Vue脚手架H5公众号微信登陆问题及解决方式

 1、首先第一步在vue页面中引入sdk

    现在本地命令行当前工程目录下安装sdk

2、js代码中编写如下 

// 确认支付函数
			payment() {
						//调用后台接口，获取时间戳、字符串、签名方式、支付签名和package
						var data = this.publicMethod.getUrlFromValues('http://learn.erenju.com/index.php/index/order/setCourseOrder', this.dat)
                             // 获取到后台返回的信息
						    console.log(data)
							wx.config({
								debug: false, //用于调试，这里一般在测试阶段先用true，等打包给后台的时候就改回false,
								appId: data.appId,
								timestamp: data.timestamp,
								nonceStr: data.nonceStr,
								signature: data.signature,
								jsApiList: ['chooseWXPay'] //需要使用的API，此处只使用了微信支付接口
							})
							//查看配置是否成功，成功时候才能使用微信SDK
							wx.ready(() => {
								wx.checkJsApi({
									jsApiList: ['chooseWXPay'],
									success: function(res) {
										console.log("success")
										console.log(res)
									},
									fail: function(res) {
										console.log("fail");
										console.log(res)
									}
								})
							})

							wx.chooseWXPay({
								appId: this.baby_id,
								timestamp: data
								.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
								package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
								signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
								paySign: data.paySign, // 支付签名
								success: (res) => { //成功回调函数
									console.log(res)
									console.log("success")
									getReportDetails() //支付成功之后需要做的事
								}
							})
						} 
						console.log(data)

			},