H5微信内置浏览器携带参数跳转APP和监听是否安装APP(wx-open-launch-app)

1、引入微信sdk

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

2、生成signature签名

	var timestamp = String(parseInt(new Date().getTime() / 1000));
      // 这里的时间戳是10位的一个字符串或者数组，不然获取的签名对不上
    var nonceStr = this.randomString(6);
    var shaBefore = decodeURIComponent(
        `jsapi_ticket=${
          this.ticket
        }&noncestr=${nonceStr}&timestamp=${timestamp}&url=${
          location.href.split("#")[0]
        }`
      );
      var signature = this.sha1(shaBefore);
      
     // 生成随机字符串
    randomString(e) {
      e = e || 32;
      var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = t.length,
        n = "";
      for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
      return n;
    },

	encodeUTF8(s) {
      var i,
        r = [],
        c,
        x;
      for (i = 0; i < s.length; i++)
        if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
        else if (c < 0x800) r.push(0xc0 + ((c >> 6) & 0x1f), 0x80 + (c & 0x3f));
        else {
          if ((x = c ^ 0xd800) >> 10 == 0)
            //对四字节UTF-16转换为Unicode
            (c = (x << 10) + (s.charCodeAt(++i) ^ 0xdc00) + 0x10000),
              r.push(0xf0 + ((c >> 18) & 0x7), 0x80 + ((c >> 12) & 0x3f));
          else r.push(0xe0 + ((c >> 12) & 0xf));
          r.push(0x80 + ((c >> 6) & 0x3f), 0x80 + (c & 0x3f));
        }
      return r;
    },

    // 字符串加密成 hex 字符串
    sha1(s) {
      var data = new Uint8Array(this.encodeUTF8(s));
      var i, j, t;
      var l = (((data.length + 8) >>> 6) << 4) + 16,
        s = new Uint8Array(l << 2);
      s.set(new Uint8Array(data.buffer)), (s = new Uint32Array(s.buffer));
      for (t = new DataView(s.buffer), i = 0; i < l; i++)
        s[i] = t.getUint32(i << 2);
      s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
      s[l - 1] = data.length << 3;
      var w = [],
        f = [
          function () {
            return (m[1] & m[2]) | (~m[1] & m[3]);
          },
          function () {
            return m[1] ^ m[2] ^ m[3];
          },
          function () {
            return (m[1] & m[2]) | (m[1] & m[3]) | (m[2] & m[3]);
          },
          function () {
            return m[1] ^ m[2] ^ m[3];
          }
        ],
        rol = function (n, c) {
          return (n << c) | (n >>> (32 - c));
        },
        k = [1518500249, 1859775393, -1894007588, -899497514],
        m = [1732584193, -271733879, null, null, -1009589776];
      (m[2] = ~m[0]), (m[3] = ~m[1]);
      for (i = 0; i < s.length; i += 16) {
        var o = m.slice(0);
        for (j = 0; j < 80; j++)
          (w[j] =
            j < 16
              ? s[i + j]
              : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1)),
            (t =
              (rol(m[0], 5) +
                f[(j / 20) | 0]() +
                m[4] +
                w[j] +
                k[(j / 20) | 0]) |
              0),
            (m[1] = rol(m[1], 30)),
            m.pop(),
            m.unshift(t);
        for (j = 0; j < 5; j++) m[j] = (m[j] + o[j]) | 0;
      }
      t = new DataView(new Uint32Array(m).buffer);
      for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);

      var hex = Array.prototype.map
        .call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
          return (e < 16 ? "0" : "") + e.toString(16);
        })
        .join("");
      return hex;
    },  

注：其中jsapi_ticket是公众号用于调用微信js接口的临时凭证，有效期为7200秒，而获取jsapi_ticket需要通过access_token来获取，有效期也为7200秒，所以需要全局缓存jsapi_ticket以防频繁调取。

https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html（获取token的文档）

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi（通过access_token获取jsapi_ticket，GET请求）

location.href.split("#")[0]为微信公众平台配置的合法域名

3、注入wx.config

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

4、wx-open-launch-app标签

 <wx-open-launch-app
            @click="mu('launch-btn1')"
            id="launch-btn1"
            :appid="appId"
            :extinfo="params"
            v-if="isWeixin"
            style="width: 100%; margin-left: 10%"
          >
            <script type="text/wxtag-template">
              <div
                  style="width: 90%;
                        height: 45px;
                        background: #da2b27;
                        border-radius: 6px;
                        font-size: 16px;
                        font-family: Helvetica;
                        color: #ffffff;
                        text-align: center;
                        line-height: 45px;"
                  >加入购物车</div>
            </script>
 </wx-open-launch-app>

注：appId为APP的AppID，extinfo为打开APP时携带的参数（对象形式）

报错说明：

Unknown custom element: <wx-open-launch-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解决方法：mian.js

Vue.config.ignoredElements = ['wx-open-launch-app'];

5、监听判断是否安装APP事件

// 此事件为点击事件 点击wx-open-launch-app触发
 mu(ref) {
      var that = this;
      var launchBtn = document.getElementById(ref);
      if (launchBtn) {
         launchBtn.addEventListener("launch", function (e) {
        //   // 尝试进行唤起 操作成功执行的函数
        //   console.log(e, "11111");
         });
        launchBtn.addEventListener("error", function (e) {
          // 尝试进行唤起 操作失败执行的函数	，可选择跳转 AppStore 或者下载引导页等
        });
      }
    },