项目场景：

最近最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.datathat.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, // 必填，签名，见附录1jsApiList: ['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，因为后台没有解码，所以不需要处理；

3，一定要跟后台多沟通，一起调试，别自己蒙头捣鼓！！！

uni-app H5中使用wx-open-launch-weapp打开微信小程序相关推荐

H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
参考链接需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
uniapp中使用uview组件u-icon 编辑到微信小程序样式问题
在微信小程序中用u-icon标签选择器才能对其设置样式,但在h5预览中u-icon{ }这样设置样式不生效,用组件的customStyle属性才生效.所以干脆对不同平台用不同写法: <!-- # ...
MPX + Vant Weapp 在微信小程序中实现Picker选择器
目录功能概述实现步骤在MPX项目中引入Vant Weapp Popup与Picker组件结合实现Picker选择器代码效果实现单页面中的多个Picker选择器代码 Picker选择器的多 ...
app error login.php,GitHub - jmluang/weappLogin-for-laravel: 封装了微信小程序的登陆逻辑，包含了数据库操作...
laravel-weapp A weapp login logic Laravel warpper 本仓库从 wafer2开发套件中提取并封装了微信小程序的登陆逻辑并转移到Laravel中,不仅降低 ...
自家APP打开微信小程序，可行吗？
小程序的通用解决方案,今天为大家介绍一下FinClip.它的最大特点,就是能够让任何 App 运行小程序. 只需要在你的 App 里面,引入它的 SDK,就能加载运行外部小程序了.除了 SDK,它还提 ...
【重磅】App内可直接打开微信小程序，新增内容安全接口等
今晚,微信又公布了几项微信小程序新能力: 微信小程序上线App直接打开小程序功能内容安全接口.插件详情页等多种能力接连更新上线一.App直接打开小程序之前微信已经开放过相关能力,可以实现App和 ...
微信小程序轮播中的current_手把手教你美化微信小程序中的轮播效果
微信小程序现在依然很火,相信大家有目共睹:所以作为前端开发者,掌握如何开发小程序,是一项必备技能了,你觉得呢? 相对于PC和H5开发,小程序坑很多,所以需要慢慢"踩",被坑多了,路 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
企业微信H5唤起(打开)微信小程序
1.登录企业微信管理后台(https://work.weixin.qq.com/wework_admin/frame) 2.获取企业ID,我的企业>企业信息>企业ID(ww28b3c6e7 ...

uni-app H5中使用wx-open-launch-weapp打开微信小程序

项目场景：

报错：

config:fail,Error: 系统错误，错误码：63002,invalid signatur

uni-app H5中使用wx-open-launch-weapp打开微信小程序相关推荐

最新文章

热门文章