Implement WeChat payment through inline h5 pages in mini programs, web pages within mini program webview, etc.

小program development tutorialThe column introduces various methods to implement WeChat payment function

##After the mini program supports webview, many h5 pages we have developed can be used directly in the mini program. For example, the WeChat mall, article details page, and product details page we developed can be used to develop a Set, used in many places. Let’s talk about it today. Implement the WeChat payment function in the webview of the mini program. Because WeChat does not allow WeChat payment to be directly called up in the webview of the mini program. So our lesson will involve the interaction between applet and webview.

The old rule is to look at the effect first.

Because there are a lot of things involved here, and there are too many gifs to record, so I can’t upload them, so I recorded a video.

https://v.qq.com/x/page/t0913iprnay.html

Principle

Let’s talk about the implementation principle first. The implementation principle is that we are in the h5 page of webview Implement the order function, and then click the payment button. When we click the payment button, we will jump to the mini program page, pass the order number and the total order amount to the mini program, and then use the order number and order amount to adjust the order When you start WeChat payment and implement payment, there will be a callback when the payment is successful or failed. We then pass the corresponding callback to the webview and refresh the order and payment status in the webview.

1. Define webview to display h5 pages

I won’t explain the use of webview. The official documentation is very clear and it is very simple to use. https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

webview is very simple, it just uses a webview component to display our web page.

Second, define the h5 page

I start a local server here to display a simple h5 page.

#The picture above is the effect I display in the browser.

Next, we display this page in the webview of the mini program. It is also very simple. We only need to define our src as our local web page link.

There is one thing to note here

Because we are a local link, we need to go to the developer tools to change this Check one item.

Third, let’s take a look at the h5 page code

nbsp;html>


    <meta>
    <title>小程序内嵌webview</title>
    <style>
        .btn {
            font-size: 70px;
            color: red;
        }
    </style>


<h1>我是webview里的h5页面</h1>
<a>点击支付</a>

<script></script>
<script>
    console.log(location.href);

    let payOk = getQueryVariable("payOk");
    console.log("payOk", payOk)

    if(payOk){//支付成功
        document.getElementById(&#39;desc&#39;).innerText="支持成功"
        document.getElementById(&#39;desc&#39;).style.color="green"
    }else{
        document.getElementById(&#39;desc&#39;).innerText="点击支付"
    }

    //获取url里携带的参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    function jumpPay() {
        let orderId = Date.now();//这里用当前时间戳做订单号（后面使用你自己真实的订单号）
        let money = 1;//订单总金额（单位分）
        let payData = {orderId: orderId, money: money};

        let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序，所以这里需要转为字符串
        const url = `../wePay/wePay?payDataStr=${payDataStr}`;
        wx.miniProgram.navigateTo({
            url: url
        });
        // console.log("点击了去支付", url)
        console.log("点击了去支付")
    }
</script>

The h5 code will not be explained in detail here, but will be briefly explained. When we click the payment button, we use the current timestamp as the order number (because the order number must be unique), and then pass in an order amount (unit points). For the sake of saving here, just pass 1 cent. It is your own expense. Money, distressed. . . .

The key points are

1. jweixin must be introduced to implement the h5 jump applet.

2. How to jump to the mini program page

const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
      url: url
 });

This should be consistent with the page of your mini program. payDataStr is the parameter we carry

Fourth, the mini program payment page

Let’s take a look at our mini program payment Page

The function of the mini program payment page is very simple, it is to receive the order number and order amount transmitted by our h5. Then go to WeChat Pay and make the payment. There are corresponding callbacks for payment success and payment failure.

支付我们这里实用的小程序云开发来实现的支付，核心代码只有10行。由于支付不是本节的重点，所以这里不做具体讲解。感兴趣的同学可以去看我写的文章和我录的视频
小程序支付文章：https://www.jianshu.com/p/2b391df055a9
小程序支付视频：https://edu.csdn.net/course/play/25701/310742
下面把小程序接收参数和支付的完整代码贴出来给大家

Page({
  //h5传过来的参数
  onLoad: function(options) {
    console.log("webview传过来的参数", options)
    //字符串转对象
    let payData = JSON.parse(options.payDataStr)
    console.log("orderId", payData.orderId)

    let that = this;
    wx.cloud.callFunction({
      name: "pay",
      data: {
        orderId: payData.orderId,
        money: payData.money
      },
      success(res) {
        console.log("获取成功", res)
        that.goPay(res.result);
      },
      fail(err) {
        console.log("获取失败", err)
      }
    })
  },

  //微信支付
  goPay(payData) {
    wx.requestPayment({
      timeStamp: payData.timeStamp,
      nonceStr: payData.nonceStr,
      package: payData.package,
      signType: 'MD5',
      paySign: payData.paySign,
      success(res) {
        console.log("支付成功", res)
        //你可以在这里支付成功以后，再跳会webview页，并把支付成功状态传回去
        wx.navigateTo({
          url: '../webview/webview?payOk=true',
        })
      },
      fail(res) {
        console.log("支付失败", res)
      }
    })
  }
})

代码里注释很清楚，这里有一点，就是我们支付成功后，需要告诉h5我们支付成功了，通知h5去刷新订单或者支付状态。
到这里我们就完整的实现了小程序webview展示h5页面，并且做到了h5和小程序的交互，实现了小程序webview的支付功能。
是不是很简单呢。

The above is the detailed content of Implement WeChat payment through inline h5 pages in mini programs, web pages within mini program webview, etc.. For more information, please follow other related articles on the PHP Chinese website!