今天,你的小伙伴找你帮忙砍价了吗?
人生不如意之事十有八九,踩坑记文又增加了。
在微信浏览器中打开打一个H5页面后,要能打开指定App。因微信限制问题,可以采取其他办法。比如在H5中引导用户在浏览器中打开链接,或者才有微信官方提供的方法。
还是进入正题吧。。。。。
开发标签说明
- wx-open-launch-app是用于页面中提供一个可跳转指定App的按钮。
- 属性
名称 | 必填 | 默认值 | 备注 |
---|---|---|---|
appid | 是 | 所需跳转的AppID | |
extinfo | 否 | 跳转所需额外信息 |
- 事件
名称 | 返回值 | 备注 |
---|---|---|
ready | 标签初始化完毕,可以进行点击操作 | |
launch | 用户点击跳转按钮并对确认弹窗进行操作后触发 | |
error | { errMsg: string } | 用户点击跳转按钮后出现错误 |
- errMsg说明
- ‘launch:fail’
- ‘launch:fail_check fail’
引入jsdk
在vue中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js' type="text/javascript" charset="utf-8"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在微信中打开App</title>
</head>
<body>
<a id="toApp" >
<div class="bottom">
<wx-open-launch-app id="launch-btn" :appid="appId" :extinfo="extinfo" class="launch-btn" v-if="is_weixin">
<script type="text/wxtag-template">
<style>.btn {font-size: 16px;color: #fff;text-align:center;margin:0}</style>
<p class="btn"> 前往App中打开</button>
</script>
</wx-open-launch-app>
<p @click="launch" v-else>前往App中打开</p>
</div>
</a>
</body>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
.right {
position: absolute;
right: 24px;
top: 10px;
width: 18px;
height: 24px;
}
.right img {
width: 18px;
height: 24px;
}
p {
text-align: center;
}
.top {
margin: 34px auto 129px;
}
.top p:nth-of-type(1) {
margin-bottom: 8px;
}
.top p {
font-size: 14px;
color: #fff;
}
.center {
text-align: center;
color: #fff;
font-size: 18px;
}
.center p:nth-of-type(1) {
margin: 26px 0 7px;
}
.center img {
/* display: inline-block; */
text-align: center;
width: 90px;
height: 90px;
}
.bottom {
margin: 218px auto 0;
width: 270px;
height: 45px;
background: #3BBEA3;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.22);
border-radius: 22.5px;
text-align: center;
font-size: 16px;
line-height: 45px;
color: #fff !important;
}
.bottom p {
color: #fff !important;
}
.launch-btn{
width: 270px;
height: 45px;
display: block;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
window.vConsole = new window.VConsole()
Vue.config.ignoredElements = [
'wx-open-launch-app',
]
new Vue({
el: '#toApp',
data() {
return {
toUrl: '',
enable: false,
is_weixin: true,
extinfo:'',
appId:'你的移动应用appid'
}
},
mounted() {
this.checkVersion()
this.initUrl()
if(this.is_weixin){
this.initConfig()
let btn = document.getElementById('launch-btn')
btn.addEventListener('launch', function (e) {
console.log('success')
})
btn.addEventListener('error', function (e) {
console.log('fail', e.detail)
})
}
},
methods: {
async initConfig() {
let params = {url:window.location.href}
console.log(params)
let res = await axios.get('后端地址,获取wx.config的参数',{params})
if (res.data.config) {
let { debug,appId, timestamp, nonceStr, signature, jsApiList, openTagList } = res.data.config
wx.config({
debug,
appId, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature, // 必填,签名,见附录1
jsApiList,
openTagList // 获取开放标签权限
})
wx.ready(function () {
})
wx.error((err) => {
console.log(err, 'error') // 如果报错打印报错信息
});
}
console.log(res.data.config)
},
/*初始化url*/
initUrl() {
var url = location.search
var taskId = 0
var p = ""
if (url.indexOf("?") != -1) {
p = url.substr(url.indexOf("?"))
console.log(p)
var str = url.substr(1)
ss = str.split("&")
for (var i = 0; i < ss.length; i++) {
params = ss[i].split('=')
if (params.length == 2 && params[0] == 'taskid') {
taskId = params[1]
break
}
}
if (p.indexOf("taskid") != -1) {
p = p + "&page=report"
}
}
this.extinfo = p
this.toUrl = '你的App地址' + p
},
/* 微信版本号大于 7.0.12 开放标签才可进行 唤醒 app 跳转*/
checkVersion() {
let ua = navigator.userAgent
console.log(ua)
let uaCase = ua.toLowerCase()
if (uaCase.match(/MicroMessenger/i) == "micromessenger") {
this.is_weixin = true
} else {
this.is_weixin = false
// return false
}
console.log('is_weixin', this.is_weixin)
let wechatInfo = ua.match(/MicroMessenger\/([\d\.]+)/i)
if(wechatInfo){
let v = wechatInfo[1].split('.')
console.log('版本',v)
// 微信版本要求在7.0.12及以上
if(v[0] > 7){
this.enable = true
}else if(v[0] == 7 && v[1] > 0){
this.enable = true
}else{
this.enable = false
}
}
console.log('enable',this.enable)
// 系统版本
// let match = /android\s([\w.]+)/.exec(uaCase) || /os\s([\w_]+)/.exec(uaCase)
// var version = match[1].split(".||_")[0];
// console.log('match',match)
},
launch() {
console.log('点击了launch', this.enable,this.is_weixin)
// this.setClipboard()
if (!this.is_weixin) {
this.redirectToApp()
}
},
redirectToApp() {
console.log('跳转页面', this.toUrl)
setTimeout(() => {
window.location.href = this.toUrl
}, 400)
},
}
})
</script>
</html>
参考地址
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
上一篇:vconsole的使用