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"><divstyle="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 或者下载引导页等});}},

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

CocosCreator H5 微信内置浏览器调起微信支付
CocosCreator H5 微信内置浏览器调起微信支付先来看看效果图微信公众平台相关文档传送门https://mp.weixin.qq.com/wiki?t=resource/res_main ...
微信内置浏览器如何自动跳转其它浏览器
此方法可以实现微信内置浏览器跳转到手机其它浏览器,现在网上其它的方法都只是一个页面,让访问者自己手动点右上角浏览器打开,而这个不同,是可以直接自动跳转的. <?php error_reporti ...
跳过微信内置浏览器缓存
跳过微信内置浏览器缓存微信资源文件被缓存怎么解决有什么好的解决办法? window.location = index.html?v=Math.random() 的方法,跳转到新页面,来变相地跳过微 ...
微信小程序跳转微信内置浏览器
最近遇到一个需求,需要微信小程序跳转到微信内置浏览器,但是官网并没有给出相关文档.查阅了大量资料,发现有两种实现方式. 1.通过微信公众号文章实现小程序可以使用web-view打开关联的公众号文章, ...
微信内置浏览器打不开链接怎么办，实现微信跳转链接
大家是不是经常会遇到微信内点击链接或扫描二维码无法打开指定网页的问题?只要你使用微信转发分享,相信你就一定会遇到,那么打不开的原因很简单了,就是被微信拦截了.这个问题我们只需要实现从微信内直接跳出到外 ...
微信内置浏览器调试和调试微信内的H5页面汇总（持续更新...)
调试PC端微信内置浏览器(只支持3.2.1以下的) (1)添加以下代码, 查看chrome版本和内核安放位置 <html><script type="text/javasc ...
微信内置浏览器屏蔽网页链接怎么办，微信跳转外部浏览器的实现教程
分享链接被微信屏蔽导致无法正常打开的情况想必看到该文章的你肯定已经遇到这个问题了,其实屏幕前的朋友也知道要怎么解决,无奈只是不知道如何实现,下面我就给大家细说一下微信跳转外部浏览器功能的实现过程. 功 ...
网页链接无法使用微信内置浏览器打开的解决方案，实现微信跳转外部浏览器打开网页
最近很多做微信推广的朋友经常会问我为什么网页链接在微信内转发很容易被拦截,问我有没有办法解决.其实这并不难,只要我们实现微信跳转功能即可,下面给大家说说如何实现微信跳转外部浏览器的功能. 功能目的生 ...
正则表达式获取url后面的参数截取微信支付code值（微信内置浏览器里使用微信支付）
需求是在移动端的微信内置浏览器里使用微信支付,需要跳转到一个自定义的页面去,获取code值,支付成功之后,还要跳转回去原来的页面. url格式: http://xxx.com/?code=061NnY ...