微信浏览器打开APP

微信浏览器会阻止在其中直接打开APP 所有一般需要引导用户去其他浏览器

但是如果还是想在微信浏览器直接打开APP的话可以通过 wx-open-launch-app这个组件
这里是官方文档

需要的一些信息

提前要准备的东西
在使用这个组件之前我们需要两个appid和一个AppSecret
appid（服务号的appid和需要被打开的appid）
AppSecret（服务号的AppSecret）

申请服务号（APP和服务号绑定在一个微信开发平台上面）
服务号申请好之后设置IP白名单和JS接口安全域名
之后按照下图进行操作，关联需要被打开的appid


这些信息设置好之后就是在浏览器中 wx-open-launch-app这个组件

wx-open-launch-app

1. 按照上面的流程绑定好js安全域名

2. 引入微信sdk

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

3. 通过config接口注入权限验证配置并申请所需开放标签

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

this.getWxSign这里是服务器提供的一个获取jsapi_ticket的一个接口
该接口在服务器端的需要调用微信提供的接口（无法在前端直接调用因为会跨域）

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=服务号的appid&secret=服务号的secret
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上个地址返回的access_token&type=jsapi

获取到jsapi_ticket之后生成wx.config方法中要用到的signature
这里是签名规则的官方文档
其中需要sha1加密和生成随机字符串的方法如下

sha1加密

   function 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 字符串
    function sha1(s) {
        var data = new Uint8Array(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;
    }

生成随机字符串

function randomString(e) {  
  e = e || 32;
  var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
  a = t.length,
  n = "";
  for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
  return n
}

获取签名

通过调用 后台提供的接口比如getWxSign获取jsapi_ticket

this.getWxSign((jsapi_ticket) => {
 	var timestamp =  String(parseInt( new Date().getTime() / 1000));
 	// 这里的时间戳是10位的一个字符串或者数组，不然获取的签名对不上
	var nonceStr = randomString(6)
	var shaBefore = decodeURIComponent(`jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${location.href.split('#')[0]}`)
	// decodeURIComponent
	var signature = sha1(shaBefore)
	  wx.config({
          debug: false, 
          appId: '自己的服务号appid',
       	  timestamp: timestamp, 
          nonceStr: nonceStr, 
          signature: signature,
          jsApiList: [], 
          openTagList: ['wx-open-launch-app'] 
       });
})

这里是校验自己生成的签名是否正确的一个地址

签名匹配上之后

必须要在IP白名单中的域名下运行程序，可以通过微信开发工具调试程序

 <wx-open-launch-app style="width: 100vw;padding-bottom: 35px;" id="launch-btn" :appid="appId" :extinfo="params">
       <script type="text/wxtag-template">
            <style>
                .nor_box {
                    padding: 0 15px
                }
    
            </style>
            <div class="nor_box">
                <div
                    style="width: 100%;border:none;background:linear-gradient(to bottom,#FFD000 ,#FFA400 );text-align:center;line-height:2.45rem;height:2.45rem;border-radius:0.9rem;color:white"
                    class=" btn">App内查看</div>
            </div>
        </script>
    </wx-open-launch-app>
 <script>
  new Vue({
		data(){
			return {
				appId:"需要被打开的app的appid（确保已经在开发平台上关联好了）",
				params:JSON.stringify({}), // 这里建议把参数转化成json字符串
			}
		}
	})
</script>

可能用的其他内容

判断是否是浏览器

var u = navigator.userAgent
var isWeixin = u.toLowerCase().indexOf("micromessenger") !== -1;

获取打开app时的参数

原生官方提供了对应的sdk（官方地址）

apicloud

		api.addEventListener({
                name: 'appintent'
            }, function (ret, err) {
                var appParam = ret.appParam;
                if (appParam.wx_arguments != undefined) {
                	// 判断是否是在微信浏览器中打开
                    var arguments = JSON.parse(appParam.wx_arguments);
                } else {
                    if (appParam && appParam.questionId) {
                        vm.questionList(appParam.questionId)
                    }
                }
                if (api.systemType == 'ios') {
                    var iosUrl = ret.iosUrl;
                } else {
                    var sourceAppId = ret.sourceAppId;
                }
            });
            if (api.systemType == "ios") {
                var wxPlus = api.require('wxPlus');
                wxPlus.addJumpFromWxListener(function (ret) {
					if (ret.reqType == "launch") {
                    }
                });
            }