请问微信开放标签如何在Vue中使用?现在报错:
难道还需要在Vue组件中注册一下吗?
还有,在微信开发工具上运行的时候,提示无效的签名,错误码:63002,但看了下文档,觉得应该是生成签名时使用的url有问题,请问下这个url是指什么?我现在使用的是:
```
let url = encodeURIComponent(location.href.split('#')[0])
```
现在是真的有点蒙,求各位大佬指教!
<head>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<wx-open-launch-weapp id="launch-btn"
@launch="getApp" appid="自己的appid"
>
<script type="text/wxtag-template">
<div class='btn'>打开APP</div>
</script>
</wx-open-launch-weapp>
</div>
</div>
<script src="./js/common.js"></script>
<script src="./js/axios.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
getApp() {
console.log("打开app!!!!!");
},
},
created() {
let url = encodeURIComponent(location.href.split('#')[0])
axios({
url: "获取签名的url",
params: {
url
}
}).then(res => {
console.log("请求签名成功:", res)
let code = res.data.code
if (code == "200") {
let result = res.data.result
let nonceStr = result.nonceStr
let timeStamp = result.timeStamp
let signature = result.signature
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: WX_APPID, // 必填,公众号的唯一标识
timestamp: timeStamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
wx.ready(function () {
console.log("ready ----------------------------");
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
});
wx.error(function (res) {
console.log("error ----------------------------", res);
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
});
}
}).catch(err => {
console.log("请求签名出错:", err)
})
},
})
</script>
</body>
楼主解决这个问题了吗
react也有同样的问题,可以看下这个 https://www.jianshu.com/p/298c99a5926c
看下文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
使用说明
所有开放标签都能像普通的HTML标签一样在页面中直接使用,不需要再进行额外的处理。
如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过
<template></template>
进行包裹。对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type="text/wxtag-template"><script>
进行代替,来包裹插槽模版和样式。等你用的框架支持