小程序webview React页面内调用微信支付

背景：

公司一个前端业务要搬到小程序上来，前端页面呢用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(
      

      
我是webview里的web页面
      this.jumpPay()}>点击支
     
    )
 
  }
}
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

webview.js

var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    src: "",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //如果支付成功，这里重新刷新h5页面，并把支付成功的状态传递给h5
    if (options.payOk === 'true') {
       //支付成功
    } else if(options.payOk == 'failed'){
     //支付失败
    }
    

  }