|
官网API说明：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
前期准备：
“weixin-js-sdk”: “^1.6.0”，必须1.6.0版本以上，因为需要支持配置openTagList: [‘wx-open-launch-weapp’]当前域名需要在公众号后台配置js安全域名后，封装微信SDK函数，用于组件调用
// 下面是封装的axios,只需关注openTagList: ['wx-open-launch-weapp']与微信验签结束后是否返回config:ok
export default {
setShare(param = {}, callback) {
let registerUrl = window.location.href
// 需要encodeURIComponent 不然会有问题
apiList.getGryJsapiSignerToken({
query: {
url: encodeURIComponent(registerUrl)
},
hasLoading: false
}).then(res => {
let { code, data } = res
console.log('请求微信配置成功>>>>', new Date().getTime(), data)
if (Number(code) === 0) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名
jsApiList: [
'wx-open-launch-weapp'
], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
})
wx.ready(function () {
})
wx.error(function (res) {
console.error(res, '>>>>>>>')
})
}
})
},
}
在组件内部使用wx-open-launch-weapp拉起小程序，代码如下
.btns{font-family: PingFangSC-Semibold;font-size: 13px;color: #F1C087;text-decoration: underline;}
“打开小程序”
官网demo中使用会跟vue有冲突，需要修改成;username是小程序原始id，没有的小伙伴请找你们对应的运营或者后台程序员索取；path是指跳转的小程序链接需要在main.js添加一句代码过滤掉wx-open-launch-weapp组件声明，不然会报wx-open-launch-weapp未定义的错误！！！！重要
Vue.config.ignoredElements = ['wx-open-launch-weapp']
问题总结：如有遇到真机标签不显示，请使用；或者遇到点击没反应的情况则需要在开发工具上看看与weixin-js-sdk.js握手时是否返回config:ok；版本必须是1.6.0以上。
|