小程式開發(fā)教學(xué)欄位介紹多種方法實(shí)作微信支付功能

小程式支援webview以後，我們開發(fā)的好多h5頁面，就可以直接在小程式裡使用了，例如我們開發(fā)的微信商城，文章詳情頁，商品詳情頁，就可以開發(fā)一套，多處使用了。我們今天來講一講。在小程式的webview裡實(shí)作微信支付功能。因?yàn)槲⑿挪辉试S在小程式的webview裡直接調(diào)起微信支付。所以我們這堂課就要牽涉到小程式和webview的互動(dòng)了。

老規(guī)矩先看效果。

因?yàn)檫@裡牽涉的東西比較多，錄gif太多，沒辦法上傳，我就錄了一段影片出來。
https://v.qq.com/x/page/t0913iprnay.html

原理

先說下實(shí)作原理吧，實(shí)作原理就是我們?cè)趙ebview的h5頁裡實(shí)現(xiàn)下單功能，然後點(diǎn)擊支付按鈕，我們點(diǎn)擊支付按鈕的時(shí)候會(huì)跳到小程式頁面，把訂單號(hào)，訂單總金額，傳遞到小程式裡，然後小程式裡使用訂單號(hào)和訂單金額去調(diào)起微信支付，實(shí)現(xiàn)付款，付款成功或失敗時(shí)都會(huì)有回調(diào)。我們?cè)侔褜?duì)應(yīng)的回呼傳遞給webview，刷新webview裡的訂單和支付狀態(tài)。

一，定義webview顯示h5頁面

關(guān)於webview的使用，我就不做講解了，官方文件裡寫的很清楚，用起來也很簡單。 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

webview很簡單，就是用一個(gè)webview元件，顯示我們的網(wǎng)頁。

二，定義h5頁

我這裡啟動(dòng)一個(gè)本機(jī)伺服器，用來展示一個(gè)簡單的h5頁面。

上圖是我在瀏覽器裡顯示的效果。
接下來我們?cè)谛〕淌降膚ebview裡顯示這個(gè)頁面，也很簡單，只需要把我們的src定義為我們的本地網(wǎng)頁連結(jié)就可以了。

這裡有一點(diǎn)要注意

因?yàn)槲覀兪潜镜劓溄?，我們需要到開發(fā)者工具裡把這一項(xiàng)給勾選。

三，來看下h5頁面程式碼

nbsp;html>


????<meta>
????<title>小程序內(nèi)嵌webview</title>
????<style>
        .btn {
            font-size: 70px;
            color: red;
        }
    </style>


<h1>我是webview里的h5頁面</h1>
<a>點(diǎn)擊支付</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="點(diǎn)擊支付"
    }

    //獲取url里攜帶的參數(shù)
    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();//這里用當(dāng)前時(shí)間戳做訂單號(hào)（后面使用你自己真實(shí)的訂單號(hào)）
        let money = 1;//訂單總金額（單位分）
        let payData = {orderId: orderId, money: money};

        let payDataStr = JSON.stringify(payData);//因?yàn)橐蓞?shù)傳遞給小程序，所以這里需要轉(zhuǎn)為字符串
        const url = `../wePay/wePay?payDataStr=${payDataStr}`;
        wx.miniProgram.navigateTo({
            url: url
        });
        // console.log("點(diǎn)擊了去支付", url)
        console.log("點(diǎn)擊了去支付")
    }
</script>

h5程式碼這裡不做具體講解，只簡單說下。我們就是在點(diǎn)擊支付按鈕時(shí)，用當(dāng)前時(shí)間戳做為訂單號(hào)碼（因?yàn)橛唵翁?hào)碼要保證唯一），然後傳一個(gè)訂單金額（單位分），這裡節(jié)約起見，就傳1分錢吧，花的是自己的錢，心疼。 。 。 。

關(guān)鍵點(diǎn)說一下

1，必須引入jweixin，才可以實(shí)作h5跳轉(zhuǎn)小程式。

2，跳到小程式頁面的方法

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

這裡要和你小程式的頁面保持一致。 payDataStr是我們攜帶的參數(shù)

#四，小程式支付頁

來看看我們的小程式支付頁

小程式支付頁功能很簡單，就是來接收我們h5傳過訂單號(hào)碼和訂單金額。然後去調(diào)起微信支付，實(shí)現(xiàn)支付。支付成功和支付失敗都有對(duì)應(yīng)的回調(diào)。

支付我們這里實(shí)用的小程序云開發(fā)來實(shí)現(xiàn)的支付，核心代碼只有10行。由于支付不是本節(jié)的重點(diǎn)，所以這里不做具體講解。感興趣的同學(xué)可以去看我寫的文章和我錄的視頻
小程序支付文章：https://www.jianshu.com/p/2b391df055a9
小程序支付視頻：https://edu.csdn.net/course/play/25701/310742
下面把小程序接收參數(shù)和支付的完整代碼貼出來給大家

Page({
??//h5傳過來的參數(shù)
??onLoad:?function(options)?{
????console.log("webview傳過來的參數(shù)",?options)
????//字符串轉(zhuǎn)對(duì)象
????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)
????????//你可以在這里支付成功以后，再跳會(huì)webview頁，并把支付成功狀態(tài)傳回去
????????wx.navigateTo({
??????????url:?'../webview/webview?payOk=true',
????????})
??????},
??????fail(res)?{
????????console.log("支付失敗",?res)
??????}
????})
??}
})

代碼里注釋很清楚，這里有一點(diǎn)，就是我們支付成功后，需要告訴h5我們支付成功了，通知h5去刷新訂單或者支付狀態(tài)。
到這里我們就完整的實(shí)現(xiàn)了小程序webview展示h5頁面，并且做到了h5和小程序的交互，實(shí)現(xiàn)了小程序webview的支付功能。
是不是很簡單呢。

以上是小程式內(nèi)聯(lián)h5頁面，小程式webview內(nèi)網(wǎng)頁等等方法實(shí)作微信支付的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！