浏览器中H5使⽤wx-open-launch-app打开第三⽅APP
1、在开放平台配置关联相关APP、⼩程序、;
2、在中设置安全域名;
3、在开放者平台中的APP配置关联JS⽹页安全域名;
4、把相关Html页⾯代码放到对应域名下;
<!DOCTYPE html>navigator标签
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Demo</title>
</head>
<body>
<div id="app">
<wx-open-launch-weapp path="pages/index/index" id="launch-wxapp" username="gh_12">
<template>
<style>
.btn {
padding: 12px
}
</style>
<button class="btn-download">点击打开⼩程序</button>
</template>
</wx-open-launch-weapp>
<wx-open-launch-app id="launch-btn" appid="wx12" extinfo='{"PageType":1001}'>
<script type="text/wxtag-template">
<style>
.btn {
padding: 12px
}
</style>
<button class="btn">点击打开APP</button>
</script>
</wx-open-launch-app>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="res2.wx.qq/open/js/jweixin-1.6.0.js "></script>
<script>
getAppList()
function getAppList() {
var link = location.href;
let _params = {
url: link
};
$.ajax({
url: "demo/WeiXinService.svc/GetWxInfo",
type: "POST",
contentType: "application/json",
data: JSON.stringify(_params),
success: function (data) {
const result = data;
debug: false, // 开启调试模式,调⽤的所有api的返回值会在客户端alert出来,若要查看传⼊的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: result.appid, // 必填,的唯⼀标识
timestamp: result.timestamp, // 必填,⽣成签名的时间戳
nonceStr: str, // 必填,⽣成签名的随机串
signature: result.signature, // 必填,签名
jsApiList: ['onMenuShareTimeline', 'chooseImage'], // 必填,需要使⽤的JS接⼝列表
openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'] // 可选,需要使⽤的开放标签列表,例如['wx-open-launch-app']
})
// config信息验证后会执⾏ready⽅法,所有接⼝调⽤都必须在config接⼝获得结果之后,config是⼀个客户端的异步操作,所以如果需要在页⾯加载时就调⽤相关接⼝,则须把相关接⼝放在ready函数中调⽤来确保正确执⾏。对于⽤户触var btn = ElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success', e);
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
//打开失败则跳转到下载页
if (Msg == 'launch:fail') {
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
window.location = "itunes.apple/"; //ios app下载地址
} else if (navigator.userAgent.match(/android/i)) {
window.location = "demo/download.html"; //android app下载地址
}
}
});
});
<(function (res) {
// config信息验证失败会执⾏error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这⾥更新签名
});
}
});
}
</script>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论