判斷微信版本號，使用打開微信小程序的開發標簽

摘要：打開微信小程序的開發標簽，只適用於微信版本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、調試

因為微信注入配置信息本地無法測試，所以要測試該標簽需要在發布到測試環境才可以看到按鈕。