概述

前段时间来了一个需求，APP分享链接到微信朋友圈，要把用户引流到小程序。所以就需要H5跳到小程序的功能。

用到的就是微信的开放标签wx-open-launch-weapp，具体的官网文档

在网上的相关资料实在有点少，而且有些不明不白，下面就是我开发的时候遇到的问题或者的注意事项

有啥问题大家可以一起讨论，有问题也可以留言~ 希望可以帮助各位可爱的程序员们~~~

前期准备

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
因为下面配置按钮的时候后端需要返回一个公众号的appid，所以在这个公众号上，需要设置安全域名。
然后它会给一个文件，直接放在项目里面

开发

1. 使用微信开放标签 wx-open-launch-weapp

//页面中
 <div
      ref="launchBtnHome"
      class="launchBtnHome"
      style="width: 100%; position: fixed; bottom: 45px"
    >
      <wx-open-launch-weapp
        id="launch-btn"
        ref="launchBtn"
        :username="uid"
        :path="`/pages/index/index.html?BId=${BId}"
      >
        <script type="text/wxtag-template">
          <div class="bottom" style="width:100%;text-align: center;box-sizing: border-box;">
          <img src="https://pic.lian-ou.com/H5/mini/gotoWxIndex.png" style="width:95%"/>
          </div>
        </script>
      </wx-open-launch-weapp>
    </div>

通过这个标签可以让H5跳转到小程序，只能在微信浏览器上才会有效果，必须是真机才能看到按钮！在浏览器是没有的！但是在微信开发者工具上你可以看到配置（config）时候的输出
如果想要实现按钮固定定位，需要在wx-open-launch-weapp外面包一层盒子给上定位（如上），给标签里面的固定定位是没有用的
username是每个小程序的原始id 不是appid！如：gh_xxxxxx
path是跳转到小程序的哪个路径，在网址后面一定要加上.html 后面再加上小程序需要的参数就好啦（根据我了解，只能跳转到线上环境的小程序，不能到体验版的小程序）为了方便测试人员测试，我们弄了两个小程序，一个是正式环境，一个是测试环境。按钮的username来控制某一个原始id即可
为了让vue解析得到微信的标签 script需要加上这个 type="text/wxtag-template"，里面就是按钮的样式了，必须是行内样式才能有效果

2.js

//引入微信js
 mounted() {
    const oScript = document.createElement('script')
    oScript.type = 'text/javascript'
    oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'
    oScript.onload = this.wxmini()
    document.body.appendChild(oScript)
 },
 methods:{
 // 获取签名，配置按钮
  wxmini() {
    //openWxmini是调用接口来获取签名等等，都是后端生成的（参数一般都有url也就是页面路径）
      openWxmini({ Url: location.href}).then((res) => {
        const resobj = JSON.parse(res.data)
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端console.log出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
          appId: resobj.appid, // 必填，公众号的唯一标识！！！！公众号的appid
          timestamp: resobj.timestamp, // 必填，生成签名的时间戳
          nonceStr: resobj.noncestr, // 必填，生成签名的随机串
          signature: resobj.signature, // 必填，签名
          jsApiList: [
            'checkJsApi',
            'openLocation',
            'getLocation',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'chooseImage',
            'uploadImage',
            'previewImage',
            'getLocalImgData'
          ], // 必填，需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        })
        //配置成功之后的函数，按钮生成成功
        wx.ready(() => {
          console.log("ready");
        });
        wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
     	 });
      });
    },
 }

总结

虽然配置的时候需要公众号的id，刚开始我以为跳转的小程序需要关联到这个公众号，结果发现根本不需要。
只要你有一个公众号后端能获取到签名这些，还有一个小程序的原始id，你就能跳到任何的小程序（开放能力确实很强，但是感觉貌似有点不安全呢，也不知道后续微信会不会变）

第一次写文章~可能表达有些不清晰。不明白的地方欢迎大家提问、讨论

H5跳转小程序，手把手教wx-open-launch-weapp的使用

概述

前期准备

开发

总结