微信小程序web-view內(nèi)嵌H5使用PHP完成支付功能

發(fā)表時間：2021-2-20

發(fā)布人：葵宇科技

瀏覽次數(shù)：114

在開發(fā)過程中，遇到使用微信小程序web-view內(nèi)嵌H5完成支付的業(yè)務(wù)，我們該怎么去實現(xiàn)？

一、設(shè)計思路

1、使用PHP請求接口獲取wx_data_package支付包數(shù)據(jù)
2、使用jweixin.js把wx_data_package數(shù)據(jù)傳到小程序
3、小程序獲取數(shù)據(jù)，調(diào)起支付界面完成支付，并返回支付是否成功
4、后臺根據(jù)返回的數(shù)據(jù)判斷支付是否成功，然后進行相關(guān)業(yè)務(wù)處理

二、前期準備

1、創(chuàng)建PHP文件，index.php主界面，success.php支付成功，error.php支付失敗

2、新建WeChat項目，并創(chuàng)建下面目錄

三、實現(xiàn)代碼

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=http://www.wxapp-union.com/"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
    // 假設(shè)wx_data_package是請求接口返回的支付數(shù)據(jù)包
    $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=http://www.wxapp-union.com/<?php echo urlencode($wx_data_package); ?>`
            wx.miniProgram.navigateTo({
                url: url
            })
        }
    </script>
</body>

</html>

2、success.php和error.php兩文件隨便添加點東西進去做一個區(qū)別就可以了
3、webview.wxml

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

4、webview.js

// pages/webview/webview.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    src: "http://php.com/"
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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.js
Page({

  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',
        })
      }
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let wxPageData = http://www.wxapp-union.com/JSON.parse(decodeURIComponent(options.wxPageData))
    console.log(wxPageData)
    this.payment(wxPageData)
  },
})