微信开放标签wx-open-launch-app踩坑记录

接到新需求是需要在微信网页下点击按钮直接跳转到App，看完官方文档后发现问题并没有这么简单，接下来就说说我踩过的坑吧。

首先看官方文档说明https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

我是用的原生写的页面，

在需要调用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）

在html里：

<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </script>
</wx-open-launch-app>

然后在script里：

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

这里是配置信息，从后端接口获取再进行赋值，当填写完配置信息后，页面提示config：ok，就行了，注意一点：调用后端接口时需要传入本地的url，官方平台有相关规定，如果用vue写的页面，对url进行一下处理就好了

let  wxurl= window.location.href.split('#')[0];

注意在jsApiList里，说是按需求写，其实在我自己开发的时候，按需求写完后，出现了按钮怎么也不显示的情况，本小白也是找了好久，最后选择用最笨的方式，把所有接口都写上，最后成功显示：

jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage',
            'onMenuShareQQ', 'onMenuShareWeibo', 'previewImage',
            'chooseImage', 'uploadImage', 'downloadImage',
            'hideOptionMenu', 'hideMenuItems', 'hideAllNonBaseMenuItem'
        ],

在script里继续写ready以及按钮的回调函数，用来检测目前状态

   wx.ready(function (){
       console.log('ready')
    //
    })
    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        console.log('success');
    });
    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });
    btn.addEventListener('WeixinOpenTagsError', function (e) {
        console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响
    });

到这里差不多按钮就能成功显示了，关于按钮样式就不多说了，当然官方也是有限制，比如不能使用position，宽度高度单位不能用百分比等等。

最后在点击按钮唤起App之前，要特别注意，在开放标签 wx-open-launch-app里面需要写的appId，是你需要跳转的app的id，然而在wx.config配置里面，appId是从后端获取的认证后的服务号的appId，到这里，点击按钮应该就能成功拉起app了！

最后再补充一点，调试这个项目必须在https安全链接下，在公司也就是公司的生产环境下，并且需要使用真机调试（确实有些麻烦），如果在手机上没有办法看打印信息，推荐一个插件：eruda.js   这样就能在手机上看到打印信息了。

如其他朋友在使用开放标签时还遇到其他问题或者有更好的解决办法，欢迎一起交流或者补充！谢谢~