浏览器h5拉起app 微信拉起app wx-launch-open-app
浏览器h5拉起app :
1) 微信内h5拉起app使用wx-open-launch-app 如果未安装 调用2)的实现方法
2) 其他浏览器 使用schme 如果未安装跳转到下载界面
- 微信内h5拉起app使用wx-open-launch-app
此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转满足一定条件的App。
开放平台地址登录微信开发者平台：
https://open.weixin.qq.com
微信网页跳转App功能链接：
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html
开放标签跳转APP wx-open-launch-app 链接：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22
绑定的服务号查看地址：
https://open.weixin.qq.com/cgi-bin/applist?t=manage/list&page=0&num=20&openapptype=16&token=794a6f6ddb26e0a17c3c054c585ca75707a51dda&lang=
js安全域名 关联设置地址：
https://open.weixin.qq.com/cgi-bin/bizdetail?t=wxverify/detail_mp_account&lang=zh_CN&token=794a6f6ddb26e0a17c3c054c585ca75707a51dda&appid=wx87f413d478ef4e65
微信 JS 接口签名校验工具
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
-
确保服务号与此开放平台账号同主体且均已认证(在开发平台账号中心可以查看)
-
管理中心-移动应用 - 上传 ios 和 安卓 确保通过， 应用appid 后续都会用到
-
管理中心-公众号-创建公众号-确保服务号认证
4. 调试过程种也要确保页面地址的域名已经是加入到了js 安全域名 （主域名或者其子域名），
Js安全域名需要在公众号平台添加，可以添加多个 ；域名需要经过备案
所需要的账号和设置都完成之后，进行开发工作:
wx.config({
"jsApiList": [
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareWeibo",
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareQZone",
],
"signature": “xxxxxx" // 后端根据签名规则生成,
"appId": "此时用的是认证过的服务号APPID",(重点见下图)
"nonceStr": "xxxx",
"timestamp": 1643117374
});
wx.ready(() => {
console.log('wx.config===', wx.config)
wx.updateAppMessageShareData(window.share_config.share); // “分享给朋友”及“分享到QQ”
wx.updateTimelineShareData(window.share_config.share); // “分享到朋友圈”及“分享到QQ空间”
wx.onMenuShareWeibo(window.share_config.share); // “分享到腾讯微博”
wx.onMenuShareTimeline(window.share_config.share); // 即将作废-分享到朋友圈
wx.onMenuShareAppMessage(window.share_config.share); // 即将作废-分享给朋友
wx.onMenuShareQQ(window.share_config.share); // 即将作废-分享到QQ
wx.onMenuShareQZone(window.share_config.share); // 即将作废-分享到QQ空间
var launchBtn = document.getElementById('launch-btn');
if (launchBtn) {
launchBtn.addEventListener('ready', function (e) {
console.log('launchBtnready', e);
});
launchBtn.addEventListener('launch', function (e) {
console.log('launchBtnsuccess', e);
});
launchBtn.addEventListener('error', function (e) {
console.log('launchBtnfail', e.detail);
download()
});
// document.addEventListener('WeixinOpenTagsError', function (e) {
// console.error('标签错误原因=====', e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
// });
}
})
wx.error(function (res) {
console('error' + JSON.stringify(res));
});服务号appid:
开发文档 wx-open-launch-app:
目录 | 微信开放文档
测试环境可以开启debug: true, 如果config:ok 但是标签显示不出来
首先需要查看 opentaglist 有没有获取权限 ，在微信开发者工具中选择公众号网页项目, 把要测试的网页地址输入 控制台可以看看opentaglist 权限有没有获取到
上图 说明jsapilist 和 opentaglist 都已经在config 中配置成功，也获取到权限；
点击立即体验，可以跳转到相应的app
测试：（不能直接在微信内点击链接）
- 微信扫二维码 2) 上述开发者工具中输入网页地址
如果未安装相应的app ,微信拉起会失败，会进入相应的监听函数中;或者是在其他浏览器直接打开链接想拉起app 执行下面 2）的方式
- 其他浏览器 使用schme 如果未安装跳转到下载界面(这种情况下
标签不用渲染，可以隐藏，这个标签只有在微信内打开才有用 ) 代码仅作为参考
Function download() {
var ua = window.navigator.userAgent.toLowerCase();
// 在微信内置浏览器 需要引导打开其他浏览器
if (ua.match(/MicroMessenger/i) == "micromessenger") {
// 显示引导页 在微信内置浏览器 需要引导打开其他浏览器
} else {
// 隐藏引导页
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
var loadDateTime = new Date();
window.setTimeout(function () {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location = "http://xxxx/appdownload"; // 开发的下载地址 ios 可以跳转到app store ， 安卓跳转到 应用宝等等
} else {
window.close();
}
}, 25);
window.location = "ios scheme"
} else if (navigator.userAgent.match(/android/i)) {
var loadDateTime = new Date();
window.setTimeout(function () {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location = "http://xxxxxx/appdownload";
} else {
window.close();
}
}, 25);
window.location = "android scheme"
}
}
}