项目场景：

最近最H5开发，项目需要发起支付，因为原来我们app走的一套是小程序的支付，所以这边需要H5打开小程序实现支付；

​

问题描述

项目开发中遇到的坑，我就不一一列举了，直接上小友的爬坑链接：

然而，我还是不显示按钮，哇哇。。。。

 我再来一遍我的坑：

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，因为后台没有解码，所以不需要处理；

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