這篇文章主要介紹小程序如何實現(xiàn)微信支付，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

云安網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

原理

先說下實現(xiàn)原理吧，實現(xiàn)原理就是我們在webview的h6頁面里實現(xiàn)下單功能，然后點擊支付按鈕，我們點擊支付按鈕的時候會跳轉(zhuǎn)到小程序頁面，把訂單號，訂單總金額，傳遞到小程序里，然后小程序里使用訂單號和訂單金額去調(diào)起微信支付，實現(xiàn)付款，付款成功或者失敗時都會有回調(diào)。我們再把對應(yīng)的回調(diào)傳遞給webview，刷新webview里的訂單和支付狀態(tài)。

一，定義webview顯示h6頁面

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

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

二，定義h6頁面

我這里啟動一個本地服務(wù)器，用來展示一個簡單的h6頁面。

上圖是我在瀏覽器里顯示的效果。
接下來我們在小程序的webview里顯示這個頁面，也很簡單，只需要把我們的src定義為我們的本地網(wǎng)頁鏈接就可以了。

這里有一點需要注意

因為我們是本地鏈接，我們需要到開發(fā)者工具里把這一項給勾選。

三，來看下h6頁面代碼

    
    
    


我是webview里的h6頁面
點擊支付

h6代碼這里不做具體講解，只簡單說下。我們就是在點擊支付按鈕時，用當(dāng)前時間戳做為訂單號（因為訂單號要保證），然后傳一個訂單金額（單位分），這里節(jié)約起見，就傳1分錢吧，花的是自己的錢，心疼。。。。

關(guān)鍵點說一下

1， 必須引入jweixin，才可以實現(xiàn)h6跳轉(zhuǎn)小程序。

2，跳轉(zhuǎn)到小程序頁面的方法

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

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

四，小程序支付頁

來看下我們的小程序支付頁

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

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

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

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

以上是“小程序如何實現(xiàn)微信支付”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：小程序如何實現(xiàn)微信支付-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/decjsj.html