概述

前段时间来了一个需求,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,你就能跳到任何的小程序(开放能力确实很强,但是感觉貌似有点不安全呢,也不知道后续微信会不会变)

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


作者:前端小野马
链接:https://juejin.cn/post/6920415471007170568
来源:掘金