微信小程序与webview交互实现支付

实现原理：点击h5⽹页的⽀付按钮——(跳转)——>嵌套改h5的⼩程序的⽀付页⾯——(处理⽀付)——>跳转⾄⽀付完成后的页⾯注意：（1）⽹页h5中，引⼊微信的jssdk

（2）⼩程序嵌套h5页⾯后，需要在微信公众平台配置h5⽹页的业务逻辑名，否则⽆法访问(且配置业务逻辑名的⼩程序只能是企业⼩程序，个⼈⼩程序暂时⽆法实现)。

操作：登录微信公众平台————开发——————开发设置

点击⽀付

jumpPay:function(){

const ordercode=this.$route.query.ordercode; console.log(1111111);

const url=`/pages/wxPay/index?ordercode=${ordercode}`; alert('url:' + url);

//跳转到⼩程序⽀付界⾯wxPay wx.miniProgram.navigateTo({ url: url }); },

　⼩程序⽬录　

//pages/lnyc2019/index.wxml

//pages/lnyc2019/index.jsPage({ 　　data: {

　　　　url:'https://xxxxxxxx/wxmini/index.html'//h5地址 　　} })

// pages/wxPay/index.jsPage({ data: {

payTempcode:'', ordercode:'', payParam:{} },

onLoad: function (options) { console.log('⽀付开始'); console.log(options); this.setData({

ordercode: options.ordercode });

this.getTempcode(); },

// 换取⽀付临时code getTempcode:function(){ wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId this.setData({

payTempcode:res.code });

console.log('⽀付code:', this.data.payTempcode); this.getPayinfo(); } }) },

// 换取⽀付参数

getPayinfo:function(){ var self=this; wx.request({

url: 'https://xxxxxx/pay/xcxpay',//后台接⼝地址 data: {

'wxcode': self.data.payTempcode, 'ordercode': self.data.ordercode, 'gid': x, },

method: 'POST',

success: function (res) {

console.log(res.data.data.payinfo); self.setData({

payParam: res.data.data.payinfo });

console.log('⽀付的订单====',self.data.ordercode); // 调起⽀付

wx.requestPayment({

'timeStamp': self.data.payParam.time,//为字符串，否则报错 'nonceStr': self.data.payParam.nonce_str,

'package': `prepay_id=${self.data.payParam.prepay_id}`, 'signType': 'MD5',

'paySign': self.data.payParam.paysign, 'success': function (res) { console.log(res)

console.log('=======⽀付成功=========='); wx.navigateTo({

url: `/pages/lnyc2019/detail?ordercode=${self.data.ordercode}` }) },

'fail': function (res) { console.log(res)

console.log('=======⽀付失败==========') wx.navigateBack({ delta: 1//返回1个页⾯ }) } }) } }) }

})