背景：
公司一个前端业务要搬到小程序上来，前端页面呢用react实现的。前端页面是开发好的，这里直接用webview加载前端页面就好。由于是搬到小程序上，前端想要加一个微信支付的业务接口来调用微信支付完成付款。记录一下实现过程。
支付流程
react 项目
一. 安装 weixin-js-sdk
在项目中引入weixin-js-sdk
yarn add weixin-js-sdk
二.支付页面
（为了方便这里直接放在demo里的app 页面，在做业务的时候注意放到自己的支付页面。）
import React from 'react';
import './App.css';
import wx from 'weixin-js-sdk';
class App extends React.Component{
jumpPay() {
let orderId = "订单号";
let payData = {orderId: orderId};
let payDataStr = JSON.stringify(payData);
const url = `../wePay/wePay?payDataStr=${payDataStr}`;//对应小程序项目里建立的wePay.js的路径
wx.miniProgram.navigateTo({
url: url
});
}
render() {
return(
<div className="App">
<h1>我是webview里的web页面</h1>
<button id="desc" className="btn" onClick={()=>this.jumpPay()}>点击支</button>
</div>
)
}
}
export default App;
wx.miniProgram.navigateTo 是微信给webview里js暴漏的跳转方法，url为跳转路径，对应到微信小程序文件目录里的wePay路径（这个文件我们在小程序里建立，下面会说到）。
在react里，把订单id当作参数拼接到url里传给小程序，我们的订单是预先在前端调用后台接口交互生成好的，根据订单id可以在后台查询到订单信息。因为url参数有长度限制，所以不推荐把所有订单信息拼接到url后面。
react就到这里，下面是小程序的实现。
微信小程序
一.项目结构
屏幕快照 2020-01-13 下午4.33.04.png
在pages下创建两个目录，一个wePay用于处理微信支付流程，一个webView用于加载react页面。
二 .代码实现
1.wePay
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let payData = JSON.parse(options.payDataStr);//获取参数
let that = this;
wx.showLoading({title: 'loading...',})
wx.login({//获取code
success(res) {
if (res.code) {
wx.request({
url: "你的后台接口，换取支付参数"
method: 'post',
data: {
'code':res.code,
'orderId': payData.orderId,
},
success: function (res) {
if (res.statusCode === 200){
that.goPay(res.data);
}else{
that.goWeb('failed')
}
},
fail:function(err){
that.goWeb('failed')
}
})
} else {
that.goWeb('failed')
}
}
})
},
//微信支付
goPay(payData) {
let that = this;
wx.requestPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.wechatPackage,
signType: payData.signType,
paySign: payData.paySign,
success(res) {
console.log("支付成功", res);
that.goWeb('true');
},
fail(res) {
that.goWeb('failed');
}
})
},
//跳回web页面
goWeb(isOK){
if(isOK === 'true'){
wx.redirectTo({
url: '../webView/webView?payOk=true'
})
}else{
wx.redirectTo({
url: '../webView/webView?payOk=failed'
})
}
},
})
代码很简单，流程是:
(1).在wePay页面的onLoad方法里拿到前端页面传来的参数，也就是oderId
(2).调用wx.login方法或得code。
(3).将code和oderid一起发给后台。后台会给微信小程序的服务器进行两次交互，第一次拿code换取openid，然后拿openid和订单信息换取微信的支付参数，返回给小程序。
(4).小程序拿到参数调用wx.requestPayment接口进行支付，完事跳回web页面将结果告知前端。
2.webview
webview.wxml
<view >
<web-view src= "你的react项目地址">
</web-view>
</view>
webview.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
src: "",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//如果支付成功，这里重新刷新h5页面，并把支付成功的状态传递给h5
if (options.payOk === 'true') {
//支付成功
} else if(options.payOk == 'failed'){
//支付失败
}
}
