微信分享页面直接在微信内唤起app
首先引入微信sdk的库
可以script引入
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
也可以通过npm下载:weixin-js-sdk 需要1.6.0以上版本
npm install weixin-js-sdk@1.6.0
在vue中直接使用会报未注册组件的错误,需要在main.js文件中注册该组件
Vue.config.ignoredElements = ['wx-open-launch-weapp']
可以写一个分享的组件
<wx-open-launch-app id="launch-btn"
@error="handleErrorFn"
@launch="handleLaunchFn"
appid=""
:extinfo="getExtInfo()">
<script type="text/wxtag-template">
<div class = "btn" style="{{getStyle()}}">{{btnText}}</div>
</script>
</wx-open-launch-app>
appid对应的服务号的id
getExtInfo 在微信中点击在客户端打开的地址
js部分需要获取的微信配置
getDownloadUrl 没有安装app的跳转下载app的地址
// 微信配置
getVXConfig () {
let url = location.href
let index = url.indexOf('#')
if (index > 0) {
url = url.substring(0, index)
}
url = encodeURIComponent(url)
this.$http.getVXConfig({
url: url
}).then(res => {
window.wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
})
window.wx.ready(() => {
console.log('window.wx success')
this.sharePage = true
})
window.wx.error(() => {
console.log('window.wx error')
this.sharePage = false
})
let btn = document.getElementById('launch-btn')
btn.addEventListener('launch', function (e) {
console.log('launch', e)
})
btn.addEventListener('error', function (e) {
if (e.detail && e.detail.errMsg === 'launch:fail') {
Dialog.closeAll()
Dialog.alert({
title: '',
content: '请下载xxxAPP',
confirmText: '确定',
onConfirm: () => {
window.location.href = getDownloadUrl()
}
})
} else {
alert(e.detail)
}
console.log('error', e)
console.log('error', e.detail)
})
})
},
原文地址:https://blog.csdn.net/a331790021/article/details/136150090
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!