判断微信版本号，使用打开微信小程序的开发标签

摘要：打开微信小程序的开发标签，只适用于微信版本7.0.12及以上的微信手机浏览器。

Q: 只有微信手机浏览器才支持打开mp吗？ A: 是的，wx-open-launch-weapp 这个标签应该只有微信浏览器内部定义了。且唤起微信小程序也需要微信的原生支持。

var userAgent = window.navigator.userAgent.toLowerCase();
var is_android = /(android)/.test(userAgent);
var is_iphone = /(iphone|ios)/.test(userAgent);
var is_mobile = is_android || is_iphone;
var is_weixin_browser = /micromessenger/.test(userAgent);

打开小程序有使用条件（微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上），是否需要做判断？ 

// 获取微信的版本号，如： 7.0.14
let wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)

if (wechat) {
  let judgewechat = wechat[1].split('.')

  if (judgewechat[0] >= 7) {
    if (judgewechat[1] >= 0) {
      if (judgewechat[2] >= 12) {
        // 微信版本是 7.0.12及以上
      }
    }
  }
}

1、引入JS

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

2、注入配置信息

wx.config({
  debug: false, beta: true, appId: data.appid, timestamp: data.timestamp, nonceStr: data.noncestr, signature: data.signature, jsApiList: [''], // 备注：这里有一个坑，这项不能是 []，会不显按钮... openTagList: ['wx-open-launch-weapp'] }) wx.ready(() => { // 显示小程序跳转按钮 }) 

这里需要注意：

• jsApiList，这项的值不能是 []，会导致按钮不显示，（2020/07/28 有这个问题）。

3、页面中添加按钮

<div class="btn-wechat-mp__wrap" v-if="false"> <!-- 显示的按钮 --> <div class="btn-wechat-mp--show"> <div class="btn-wechat-mp__icon"> <!-- 自定义的组件 --> <itv-icon type="i-applet" size="12" /> </div> <span>立即使用</span> </div> <wx-open-launch-weapp id="launch-btn" username="gh_cb8edfaxxxx" :path="report_params.url"> <!-- 必须写：占位的按钮 --> <script type="text/wxtag-template"> <style> .ctn{width: 120px;height: 40px;} </style> <div class="ctn"></div> </script> </wx-open-launch-weapp> </div> 

/* 备注：样式不重要，这里就不换行了 */ .btn-wechat-mp__wrap { display: block;width: 120px;height: 40px;margin-top: 30px;position: relative; .btn-wechat-mp--show { background-color: #3464e0;border-radius: 2px;position: absolute;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;color: #ffffff;font-size: 14px;z-index: 0; .btn-wechat-mp__icon { margin-right: 8px;line-height: 12px;color: #3464e0;box-sizing: border-box;padding: 2px;width: 16px;height: 16px;border-radius: 100%;background: #fff;display: flex;align-items: center; } } #launch-btn { z-index: 10;position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: transparent; } } 

这里需要注意

• path 需要添加 .html 后缀，且 path 可以是动态的。
• 插槽必须写，且内容必须有大小（比如上面的 div.ctn ）。vue 中插槽需要用 script 替换。
• 插槽内不能使用组件，所以可以将需要显示的内容绝对定位（如上面的 div.btn-wechat-mp--show ）。

4、调试

因为微信注入配置信息本地无法测试，所以要测试该标签需要在发布到测试环境才可以看到按钮。