微信浏览器打开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

按照上面的流程绑定好js安全域名
引入微信sdk

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

通过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转换为Unicodec = (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]}`)// decodeURIComponentvar 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"><divstyle="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") {}});}