前面給大家講過一個藉助小程式雲開發實現微信支付的，但是那個操作稍微有點繁瑣，並且還會經常出現問題，今天就給大家講一個簡單的，並且藉助官方支付api實現小程式支付功能。

傳送門

老規矩，先看本節效果圖

我們實現這個支付功能完全是藉助小程式雲開發實現的，不用搭建自己的伺服器，不用買域名，不用備案域名，不用支援https。只需要一個簡單的雲函式，就可以輕鬆的實現微信小程式支付功能。

核心程式碼就下面這些

一，建立一個雲開發小程式

關於如何建立雲開發小程式，這裡我就不再做具體講解。不知道怎麼建立雲開發小程式的同學，可以去翻看我之前的文章，或者看下我錄製的影片：

建立雲開發小程式有幾點注意的

1，一定不要忘記在app.js裡初始化雲開發環境。

2，建立完雲函式後，一定要記得上傳

二， 建立支付的雲函式

1，建立雲函式pay

三，引入三方依賴tenpay

我們這裡引入三方依賴的目的，是建立我們支付時需要的一些引數。我們安裝依賴是使用裡npm 而npm必須安裝node,關於如何安裝node，我這裡不做講解，百度一下，網上一大堆。

1，首先右鍵pay，然後選擇在終端中開啟

2，我們使用npm來安裝這個依賴。

在命令列裡執行 npm i tenpay

安裝完成後，我們的pay雲函式會多出一個package.json 檔案

到這裡我們的tenpay依賴就安裝好了。

四，編寫雲函式pay

完整程式碼如下

//雲開發實現支付

const cloud = require('wx-server-sdk')

cloud.init()

  

//1，引入支付的三方依賴

const tenpay = require('tenpay');

//2，配置支付資訊

const config = {

appid: '你的小程式appid',

mchid: '你的微信商戶號',

partnerKey: '微信支付安全金鑰',

notify_url: '支付回撥網址,這裡可以先隨意填一個網址',

spbill_create_ip: '127.0.0.1' //這裡填這個就可以

};

  

exports.main = async(event, context) => {

const wxContext = cloud.getWXContext()

let {

orderid,

money

} = event;

//3，初始化支付

const api = tenpay.init(config);

  

let result = await api.getPayParams({

out_trade_no: orderid,

body: '商品簡單描述',

total_fee: money, //訂單金額(分),

openid: wxContext.OPENID //付款使用者的openid

});

return result;

}

一定要注意把appid，mchid，partnerKey換成你自己的。

到這裡我們獲取小程式支付所需引數的雲函式程式碼就編寫完成了。

不要忘記上傳這個雲函式。

出現下圖就代表上傳成功

五，寫一個簡單的頁面，用來提交訂單，呼叫pay雲函式。

這個頁面很簡單，

1，自己隨便編寫一個訂單號（這個訂單號要大於6位）

2，自己隨便填寫一個訂單價（單位是分）

3，點選按鈕，呼叫pay雲函式。獲取支付所需引數。

下圖是官方支付api所需要的一些必須引數。

下圖是我們呼叫pay雲函式獲取的引數，和上圖所需要的是不是一樣。

六，呼叫wx.requestPayment實現支付

下圖是官方的示例程式碼

這裡不在做具體講解了，把完整程式碼給大家貼出來

// pages/pay/pay.js

Page({

//提交訂單

formSubmit: function(e) {

let that = this;

let formData = e.detail.value

console.log('form發生了submit事件，攜帶資料為：', formData)

wx.cloud.callFunction({

name: "pay",

data: {

orderid: "" + formData.orderid,

money: formData.money

},

success(res) {

console.log("提交成功", res.result)

that.pay(res.result)

},

fail(res) {

console.log("提交失敗", res)

}

})

},

  

//實現小程式支付

pay(payData) {

//官方標準的支付方法

wx.requestPayment({

timeStamp: payData.timeStamp,

nonceStr: payData.nonceStr,

package: payData.package, //統一下單介面返回的 prepay_id 格式如：prepay_id=***

signType: 'MD5',

paySign: payData.paySign, //簽名

success(res) {

console.log("支付成功", res)

},

fail(res) {

console.log("支付失敗", res)

},

complete(res) {

console.log("支付完成", res)

}

})

}

})

到這裡，雲開發實現小程式支付的功能就完整實現了。

實現效果

1，調起支付鍵盤

2，支付完成

3，log日誌，可以看出不同支付狀態的回撥

上圖是支付成功的回撥，我們可以在支付成功回撥時，改變訂單支付狀態。

下圖是支付失敗的回撥，

下圖是支付完成的狀態。

到這裡我們就輕鬆的實現了微信小程式的支付功能了。是不是很簡單啊。

如果感覺圖文不是很好理解，我後面會錄製影片講解。

原始碼地址：

014雲開發實現小程式支付，就是我們的原始碼，如果你匯入原始碼或者學習過程中有任何問題，都可以留言或者私信我