公众号H5跳转微信小程序

• 公众号H5跳转微信小程序
  • 项目需要通过点击产品列表进入到对应的微信小程序，而从公众号H5跳转到指定微信小程序，则需要用到微信开放标签

// html部分
<wx-open-launch-weapp
  id="launch-btn" // 用与获取节点 
  username="gh_xxxxxxxx" // 跳转的小程序原始id，即小程序对应的以gh_开头的id
  path="pages/home/index?user=123&action=abc" // 跳转路径，不填则跳转首页
  @error="onEerror"  // 监听失败
  @launch="onLaunch"  // 监听成功
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>  // 跳转标签内的元素样式
    <button class="btn">打开小程序</button> // 跳转按钮
  </script>
</wx-open-launch-weapp>

// js  如果不需要监听跳转后的成功或失败，这部分可以不写
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

同时需要引入微信js-sdk，我这里用的是vue，在create的时候通过config接口注入权限验证配置并申请所需开放标签，

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，这里我们需要用到跳转小程序，填入['wx-open-launch-app']
})

至此，标签就能正常工作了。

中间走了一点弯路，想着把列表item的内容写进跳转标签的插槽里，后发现样式不好调整，也不能动态绑定数据。后来转换了一下思路，在跳转标签里仅写一个botton，把样式调整的和列表item一样的宽高，opacity：0,绝对定位到item上面，相当于盖了一个看不见的button在跳转内容上。

• 补充1：小程序跳转小程序，通过click添加点击事件，使用wx.navigateToMiniProgram(object)

   wx.navigateToMiniProgram({
                appId: this.saasData.appid, // 小程序的appId,非gh_ 开头  这里与H5跳转小程序需要的id不同
                path: '' // 跳转路径，不填则跳转首页
            })

• 补充2：消除vue对跳转标签的警告

 // main.js
Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']

---

---

新的问题出现：发现需要二次刷新跳转标签才能生效

• 找到解决的方法：vue使用wx-open-launch-weapp

我的项目本身已经封装了wxjsdk，就没有通过src引入jssdk

// 原来写法，会出需要二次刷新标签才生效的问题
import jwx from '@/lib/jweixin.js';

onLoad(){
    jwx.launchWeApp()  
}

// 参照大佬方法更改后
onLoad(){
    const oScript = document.createElement('script')
    oScript.type = 'text/javascript'
    oScript.onload = jwx.launchWeApp
    document.body.appendChild(oScript) 
}