uniapp使用wx-open-launch-weapp实现跳转小程序

需求

使用uniapp开发H5项目，放到微信公众号里，点击跳转到小程序

实现

使用微信官方提供的wx-open-launch-weapp开放标签跳转小程序

步骤

1、绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

2、引入JS文件

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

备注：支持使用 AMD/CMD 标准模块加载方法加载。

在APP.vue里引入js文件

TIP

// App.vue页面
  onLaunch: function() {
    // 引入微信sdk
    const script = document.createElement('script')
    script.src = "http://res.wx.qq.com/open/js/jweixin-1.6.0.js"
    script.type = 'text/javascript'
    document.body.appendChild(script)
  },

3、通过config接口注入权限验证配置并申请所需开放标签

所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['chooseImage'], // 这个没用，随便写的
  openTagList: ['wx-open-launch-weapp'] // 主要是这个，用这个开放标签跳转
})
wx.ready(function () {
  console.log('wx.ready')
})
wx.error(function (res) {
  console.log(res.errMsg)
})

4、页面里使用wx-open-launch-weapp标签

<wx-open-launch-weapp
  style="width: 89px; height: 89px"
  id="launch-btn"
  username=""
  appid=""
  path=""
>
</wx-open-launch-weapp>

备注

appid    必填    所需跳转的小程序appid，即小程序对应的以wx开头的id

username    所需跳转的小程序原始id，即小程序对应的以gh_开头的id（跳转时，有appid会优先使用appid，没有appid才会使用username）

path    所需跳转的小程序内页面路径及参数

备注

在main.js里加入如下代码，不然会报wx-open-launch-weapp标签错误

Vue.config.ignoredElements = ['wx-open-launch-weapp']

5、在wx-open-launch-weapp标签里添加内容

<template>
  <script type="text/wxtag-template">
    <style>
      .grid-item-box{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 86px;
      height: 86px;
    }
      .grid-item-image{
      width: 36px;
      height: 36px;
    }
      .grid-item-text{
      font-size: 13px;
      font-weight: 400;
      color: #333;
      margin-top: 6px;
    }
    </style>
    <view class="grid-item-box">
      <image class="grid-item-image" src="{{electronicInvoiceImg}}"/>
      <text class="grid-item-text">电子发票</text>
    </view>
  </script>
</template>

备注

1、script标签的type为text/wxtag-template

2、样式需要定义在script标签里，通过style标签

完整代码

 <wx-open-launch-weapp
   style="width: 89px; height: 89px"
   id="launch-btn"
   username="gh_310a33219dae"
   appid="wx8e0b79a7f627ca18"
   path="pages/index/index.html?agencyCode=bad32856c8654b528e84aa6f2e2dd3f7"
 >
   <template>
     <script type="text/wxtag-template">
       <style>
         .grid-item-box{
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           width: 86px;
           height: 86px;
         }
         .grid-item-image{
           width: 36px;
           height: 36px;
         }
         .grid-item-text{
           font-size: 13px;
           font-weight: 400;
           color: #333;
           margin-top: 6px;
         }
       </style>
       <view class="grid-item-box">
         <image class="grid-item-image" src="{{electronicInvoiceImg}}"/>
         <text class="grid-item-text">电子发票</text>
       </view>
     </script>
    </template>
  </wx-open-launch-weapp>
  
  // 触发wx.config方法
  setTimeout(() => {
    this.getSign()
  }, 100)
  
  // 初始化wx
      async getSign() {
        const _this = this
        // 获取url并截取
        let url = window.encodeURIComponent(window.location.href.split('#')[0])
        // 调用后端提供的接口，获取初始化需要的参数
        const res = await ConsultationModel.getSign({
          url: url
        })
        if (res.success === true) {
          const data = res.data
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: config.appId, // 必填，公众号的唯一标识
            timestamp: parseInt(data.timestamp), // 必填，生成签名的时间戳
            nonceStr: data.nonce, // 必填，生成签名的随机串
            signature: data.sign,// 必填，签名
            jsApiList: ['chooseImage'],
            openTagList: ['wx-open-launch-weapp']
          })
          wx.ready(function () {
            _this.ifOpenLaunch = true
            console.log('wx.ready')
          })
          wx.error(function (res) {
            console.log('wx.err')
            console.log(res.errMsg)
          })
        }
      }

备注

调用wx.config初始化的方法要包裹在setTimeout里，不然会初始化失败

备注

在hash模式下，url需要截取#前面的值

window.encodeURIComponent(window.location.href.split('#')[0])