使用微信开放标签＜wx-open-launch-weapp＞的踩坑日记

最近在完成H5跳转小程序需求时，使用到了微信官方退出的开放标签<wx-open-launch-weapp>，来谈一谈使用的心得和不足。

1、适用环境

微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上

2、接入微信的JS-SDK

按微信JS-SDK要求绑定安全域，并通过config接口注入权限验证配置

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

这里附录微信官方教程微信开放文档

贴个我用的方法

    /**
     * H5跳转小程序
     */
    registerWXJumlSDK (that, callback) {
        const jsApiList = [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'closeWindow',
            'showMenuItems',
            'hideOptionMenu',
            'showOptionMenu',
            'hideAllNonBaseMenuItem',
            'onMenuShareQQ',
            'chooseWXPay',
        ]
        // console.log(Vue.$api);
        const _this = that
        const openTagList = ['wx-open-launch-weapp']
        let weapp = {
            originid: '', // 所需跳转的小程序原始id，即小程序对应的以gh_开头的id
            path: '', // 所需跳转的小程序内页面路径及参数
        }
        
        let urls = ""
        let u = navigator.userAgent
        if (/ipad|iphone|mac/i.test(u)) {
            urls = _this.$store.state.configUrl.split("#")[0]
        } else {
            urls = encodeURIComponent(location.href.split("#")[0])
        }
        // 签名算法的接口
        _this.$api.jsTicket({ url: urls }).then((res) => {
            var resData = res.content
            if (resData.resultCode == 1) {
                wx.config({
                    appId: '', // 必填，公众号的唯一标识
                    timestamp: '', // 必填，生成签名的时间戳
                    nonceStr: '', // 必填，生成签名的随机串
                    signature: '', // 必填，签名，见附录1
                    debug: false,
                    jsApiList: '',
                    openTagList: openTagList
                })
                callback(weapp)
                // return weapp 
            }
        })
        .catch((e) => {})
    },

在微信开发者工具内打开你的页面如果显示

{errMsg: "config:ok”}

就说明你已经介入wx的js-sdk成功了

3.使用开放标签(vue)

贴个最简单的应用

<wx-open-launch-weapp
    id="launch-weapp1"
    username="xxxxxx"
    path="xxxxxx"
    @launch="onLaunch"
    @error="onError"
>
    <script type="text/wxtag-template">
        <div style="font-size: 14px;margin-top: 10px;text-align: center;">打开小程序</div>
    </script>
</wx-open-launch-weapp>

坑的地方来了： 你会发现在微信开发者工具中没有显示还报错

在微信开发者工具中没有显示是因为微信开发者工具还是无法支持微信开放标签的调试功能，只能在手机上调试并且是在加了微信安全域名的服务器环境下调试(￣︶￣)

报错是在提示你没有在vue中注册过改组件，你只需要在main.js中写上下面一句代码就可以了

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

除了这点外还有以下几个坑点

1. 不能用js来模拟点击，有了局限性
2. 样式无法写在外面中，只能在script标签内内链写或者行内样式
3. 无论是内链还是行内 都不支持rem
4. 不会继承样式
5. 如果开发标签内需要使用图片，不能用本地图片，得用外网可以访问的图片，要不然会不显示

4.动态渲染

经过实验发现是可以动态渲染的

<div v-for="(item,index) in list" :key="index" v-html="renderDom(item)"></div>


// 动态渲染微信开发标签 跳转小程序
renderDom (item) {
  let script = document.createElement('script')  
  script.type = 'text/wxtag-template'
  let image = item.imgUrl  
  script.text = `<div style="height:100%;width:100%;text-align:center;"> <img src="${image}" width="46px" height="46px"/><p style="color: #333;font-size: 12px;">${item.name}</p></div>` 
  let html = `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="小程序原始id"path="小程序页面路径和参数">${script.outerHTML}</wx-open-launch-weapp>`
  return html
}

这样就实现了动态渲染

最后在贴个官方的适用用例

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>
<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>