wx-open-launch-app踩坑记录

一、原生js或jquery引用

1、引用较高版本wxjssdk，刚开始一直没显示wx-open-launch-app按钮，config：OK，鄙人以为是标签中内容用template和script包含的区别，后来发现是引用的jssdk文件版本太低，实测1.0.0版本过低，是用不了wx-open-launch-app的。

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.内容中使用wx-open-launch-app标签，标签内外样式分开，在标签外设置标签内元素的样式无效，必须在标签内设置style样式。js中设置wx.config，在微信jssdk初始化之后绑定按钮事件。这里可以先把config中的debug调试开启，自检appId和签名是否配置正确。

tip：wx-open-launch-app最好外层包裹一层div

<wx-open-launch-app id="launch-andriodbtn" appid="xxxx" extinfo="xxx" style="text-align: center;width: 50vw;">
    <script type="text/wxtag-template">
       <style>
       img{
         width: 70%;
         height: auto;
         display: block;
         margin:20px auto;
         margin-top:50px;
       }
       </style>
       <img src="http://xxxx.com/01.png" alt="">
    </script>
 </wx-open-launch-app>

wx.config({
    debug: false,
    appId: t.appId,
    timestamp: t.timestamp,
    nonceStr: t.nonceStr,
    signature: t.signature,
    jsApiList: ["onMenuShareAppMessage"],
    openTagList: ['wx-open-launch-app']
});
wx.ready(function(){
    var btnandriod = document.getElementById('launch-andriodbtn');
    btnandriod.addEventListener('launch', function (e) {
        console.log('success', e);
    });
    btnandriod.addEventListener('error', function (e) {
        console.log('fail', e.detail);
        //打开失败则跳转到下载页
        if (e.detail.errMsg == 'launch:fail') {
            onandroid();
        }
    });
})

tip：这里有个巨坑，微信改版前，鄙人习惯用微信传输助手给自己发网址测试，改版后，会出现下图提示，这种情况下，概率会出问题，比如这个项目，wx-open-launch-app按钮点击后，会提示errMsg:"launch:fail"，查了很多资料，config：OK，配置也没错，之前用vue写的网页也可以跳转，不知道问题出在哪里，把网址发微信群里给大家测试时，点击群里链接是没有提示页的，就可以正常跳转。。。避坑。

之前测试网页微信分享时也有这样的问题出现，配置正确，进入页面时出现微信提示页，不显示分享按钮或者设置的分享题图失效等，不过当时鄙人收藏了网页链接之后，从收藏夹进去就可以解决部分问题，当然，没有提示页的情况下就是正常的。

 tip：还有一个坑，如果在wx-open-launch-app标签中使用img标签，使用项目中路径会找不到图片，鄙人后来使用图片cdn地址解决了这个问题。

 二、vue项目中使用wx-open-launch-app

vue项目中使用wx-open-launch-app就比较顺利，没这么多坑，简单记录一下。

npm i weixin-js-sdk

之后和原生引用相比省了很多步骤，定义一个launch方法和error方法

<wx-open-launch-app
    id="launch-btn"
    @error="handleErrorFn"
    @launch="handleLaunchFn"
    appid="xxx"
    :extinfo="extinfo"
>
    <script type="text/wxtag-template">
        <style>
            .topbannerbt{
            padding: 5px 15px;
            color: white;
            background: orange;
            border-radius: 5px;
        }
        </style>
        <div class="topbannerbt">打开</div>
    </script>
</wx-open-launch-app>

var wx = require("weixin-js-sdk");
wx.config({
    debug: false,
    appId: appId,
    timestamp: timestamp,
    nonceStr: nonceStr,
    signature: signature,
    jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"],
    openTagList: ["wx-open-launch-app"],
});
wx.ready(function () {

})