一、设计思路

1、使用PHP请求接口获取wx_data_package支付包数据

2、使用jweixin.js把wx_data_package数据传到小程序

3、小程序获取数据，调起支付界面完成支付，并返回支付是否成功

4、后台根据返回的数据判断支付是否成功，然后进行相关业务处理

二、前期准备

1、创建PHP文件，index.php主界面，success.php支付成功，error.php支付失败

需要创建的php文件

2、新建WeChat项目，并创建下面目录

需要创建的WeChat目录

三、实现代码

1、index.php

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>支付测试</title>    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>    <style>        .btn {            padding: 10px 20px;            text-align: center;            background: #647357;            color: #fff;
        }    </style></head><body>    <?php    // 假设wx_data_package是请求接口返回的支付数据包
    $wx_data_package = '{"package":"prepay_id=wx164122404495953ff5f88672224070000","appid":"wxa5dasdfasdf2231","sign":"m8i6LKiu+adJJouVx6XasdaEOr+K5FIuV/luTEgrqE+APuO/oEVK6Fadfn4NiJMqGasdfhlgdj2FDasdf9oHSAnmHaPKiZgK37oCVe+3HyGGirDWZLOSdpI4hVvasdLpPBbmbvM6Xvg2TLwyO41Fg3fjIEasdrhkxCJss2B5uXa3BrRyL3LEC01CbJfC05uDwRRC+a8erHzRjoscB+Kjepnhcfp/PVO9v+N6b5oKmTUCdhaF85n3U2PSFS7yzp6473oEAPi8jNiwM/dtZZvo+y7z4urWoebeFfO/5l9Bx2EWaRstQqEXgh+lLsVxNiccHal3nfDcqNkw==","signType":"RSA","noncestr":"45bd4991f99048badew9528dqfca9b7","timestamp":"1613488960"}';    ?>    <div class="btn" onclick="pay()">支付</div>    <script>        // 把wx_data_package传到小程序        function pay() {            const url = `../wePay/wePay?wxPageData=<?php echo urlencode($wx_data_package); ?>`
            wx.miniProgram.navigateTo({                url: url
            })
        }    </script></body></html>

2、success.php和error.php两文件随便添加点东西进去做一个区别就可以了

3、webview.wxml

// pages/webview/webview.wxml<web-view src="{{src}}"></web-view>

4、webview.js

// pages/webview/webview.jsPage({  /**
   * 页面的初始数据
   */  data: {    src: "http://php.com/"
  },  /**
   * 生命周期函数--监听页面加载
   */  onLoad: function (options) {
    if (options.payFlag !== undefined)
      if (options.payFlag == "true") {
        this.setData({          src: "http://php.com/success.php"
        })
      } else {        this.setData({          src: "http://php.com/error.php"
        })
      }
  },
})

5、wePay.js

// pages/wePay/wePay.jsPage({  data: {
  },
  payment(data) {
    wx.requestPayment({      'timeStamp': data.timestamp,      'nonceStr': data.noncestr,      'package': data.package,      'signType': data.signType,      'paySign': data.sign,      'success': function (res) {
        wx.navigateTo({          url: '../webview/webview?payFlag=true',
        })
      },      'fail': function (res) {
        wx.navigateTo({          url: '../webview/webview?payFlag=false',
        })
      }
    })
  },  /**
   * 生命周期函数--监听页面加载
   */  onLoad: function (options) {    let wxPageData = JSON.parse(decodeURIComponent(options.wxPageData))    console.log(wxPageData)    this.payment(wxPageData)
  },
})