H5跳转小程序按钮不显示（使用wx-open-launch-weapp的血泪史）

被wx-open-launch-weapp折磨累了，也就不废话了，直接上关键点：

ps:其他细节不赘述，自行百度，有很多案例

1. 引入jweixin.js，需要1.6.0版本

http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

2. 设置wx.config

设置：openTagList:['wx-open-launch-weapp']（必须有，跳转小程序）

设置：jsApiList:['chooseImage', 'previewImage']（必须有，不然安卓不显示）

3. vue中忽略wx-open-launch-weapp标签检测

在main.js中添加：Vue.config.ignoredElements = ['wx-open-launch-weapp']

4. 在vue页面中添加wx-open-launch-weapp标签

在vue的视图页：

在vue的methods中：

sucFun(msg) { console.log(msg) },
errFun(msg) { console.log(msg) }

另外，在vue中也可以使用v-html去绑定，例如：

在vue视图中：

在vue的script中（可放在created中）：

this.weappDom = `
    
      
    
    `

注意：
vue页面中，可以使用进行包裹标签
普通html页面中，使用进行包裹
样式中不可添加position:fixed，position:absoulte样式，不然按钮不展示

5. 环境

微信开发工具和真机测试结果可能不一样，一定要用真机测试
安卓和ios测试结果也可能不同，都要测试

6. 小程序的web-view不支持wx-open-launch-weapp

所以在h5页面中使用wx-open-launch-weapp跳转A小程序，如果将此h5通过webview的方式嵌入B小程序，这个功能将失效，按钮也不会展示

---

此情况还是采用长按识别小程序码吧！（直接放上小程序码图片就可以，系统自带长按识别功能）

---

如果直接使用img放小程序码页不识别，那就再退而求其次吧，可以使用官方文档提供的图片预览的功能：

wx.previewImage({
    current: '', // 当前显示图片的http链接（注意：是在线链接，不是本地）
    urls: [] // 需要预览的图片http链接列表（注意：是在线链接，不是本地）
});

点击之后，出现预览的小程序码或二维码界面，然后长按识别

---

如果还是不可以，那就更换需求或交互方式。总之，大家自己想办法吧

ps： 尽自己的绵薄之力让大家少走点坑，其他的坑大家慢慢踩吧。
说实话，微信相关开发是真的坑，及其不友好（痛苦三连~~~）