项目场景:
最近最H5开发,项目需要发起支付,因为原来我们app走的一套是小程序的支付,所以这边需要H5打开小程序实现支付;
微信文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
问题描述
项目开发中遇到的坑,我就不一一列举了,直接上小友的爬坑链接:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
然而,我还是不显示按钮,哇哇。。。。
我再来一遍我的坑:
npm install weixin-js-sdk
<view>
<wx-open-launch-weapp id="launch-btn" username="小程序的原始id" :path="path">
<script type="text/wxtag-template">
<style>.btn { display:block; padding: 12px; color: red }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</view>
import wx from 'jweixin-module';
onLoad(options) {
that = this;
that.shopId= app.globalData.shopId;
that.deskNo= app.globalData.deskNo;
that.seatNo= app.globalData.seatNo;
if (options.orderNo) {
that.$request({
url: '/malls/order/detail/noVerification',
data: { orderNo: options.orderNo }
}).then((res) => {
if (res.code == 0) {
that.info = res.data
that.path = `pages/index/index?orderId=${res.data.orderId}&payAmount=${res.data.payAmount}`
}
})
}
this.getConfig();
},
methods: {
// wx api 注册
getConfig() {
// console.log('locaurl'+location.href.split('#')[0])
let localUrl= location.href.split('#')[0];
that.$request({
url: '/payment/WXSignature/noVerification/getSign',
data: { param: localUrl }
}).then((res) => {
if (res.code == 0) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: 'wx93524a8eb0a68588', // 必填,公众号的唯一标识,填自己的!
timestamp: res.data.timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
ignature: res.data.signature, // 必填,签名,见附录1
jsApiList: ['wx-open-launch-weapp','chooseImage', 'previewImage'],
openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
});
wx.ready(res => {
this.$nextTick(() => {
let btn = document.getElementById('launch-btn');
btn.addEventListener('launch', e => {
console.log('success'+ e);
});
btn.addEventListener('error', e => {
alert('小程序打开失败');
console.log('fail', e.detail);
});
});
});
wx.error(res => {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
console.log('失败'+ JSON.stringify(res));
});
}
})
}
}
报错:
config:fail,Error: 系统错误,错误码:63002,invalid signatur
最后总结一下我爬坑的点:
1,前端跟后台获取微信签名的接口参数url,要传动态的获取的 location.href.split('#')[0]
2,获取的url 不需要encodeURIComponent,因为后台没有解码,所以不需要处理;文章来源:https://www.toymoban.com/news/detail-506241.html
3,一定要跟后台多沟通,一起调试,别自己蒙头捣鼓!!!文章来源地址https://www.toymoban.com/news/detail-506241.html
到了这里,关于uni-app H5中使用wx-open-launch-weapp打开微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!