“

? ? ?純干貨！本文教你用云開發(fā)輕松實現(xiàn)強大的小程序支付功能！

”

導語

前面給大家講過如何借助小程序云開發(fā)實現(xiàn)微信支付，但是這種開發(fā)方式相對繁瑣，并且具有不穩(wěn)定性，今天就給大家講一下如何借助官方支付api簡單、高效率地實現(xiàn)小程序支付功能。

開發(fā)過程

老規(guī)矩，先看本節(jié)效果圖：

本文內(nèi)的支付功能完全是借助小程序云開發(fā)實現(xiàn)的，不用搭建自己的服務(wù)器，不用買域名，不用備案域名，不用支持https。只需要一個簡單的云函數(shù)，就可以輕松的實現(xiàn)微信小程序支付功能。核心代碼如下圖所示：

一、創(chuàng)建一個云開發(fā)小程序

關(guān)于如何創(chuàng)建云開發(fā)小程序，這里我就不再做具體講解。不知道怎么創(chuàng)建云開發(fā)小程序的同學，可以去翻看騰訊云云開發(fā)公眾號內(nèi)菜單【技術(shù)交流-視頻教程】中的教學視頻。

創(chuàng)建云開發(fā)小程序有幾點注意的：

1. 一定不要忘記在app.js里初始化云開發(fā)環(huán)境

2. 創(chuàng)建完云函數(shù)后，一定要記得上傳

二、創(chuàng)建支付的云函數(shù)

創(chuàng)建云函數(shù)pay

三、引入三方依賴tenpay

我們這里引入三方依賴的目的，是創(chuàng)建我們支付時需要的一些參數(shù)。我們安裝依賴是使用里npm 而npm必須安裝node,關(guān)于如何安裝node，我這里不做講解，百度一下，網(wǎng)上一大堆。

1. 首先右鍵pay，然后選擇在終端中打開

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

在命令行里執(zhí)行 npm i tenpay。

安裝完成后，我們的pay云函數(shù)會多出一個package.json 文件。

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

四、編寫云函數(shù)pay

完整代碼如下：

//云開發(fā)實現(xiàn)支付

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

cloud.init()

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

const tenpay = require('tenpay');

//2，配置支付信息

const config = {

appid: '你的小程序appid',

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

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

notify_url: '支付回調(diào)網(wǎng)址,這里可以先隨意填一個網(wǎng)址',

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換成你自己的。

到這里我們獲取小程序支付所需參數(shù)的云函數(shù)代碼就編寫完成了。不要忘記上傳這個云函數(shù)。

出現(xiàn)下圖就代表上傳成功。

五、寫一個簡單的頁面，用來提交訂單，調(diào)用pay云函數(shù)

這個頁面很簡單， 1、自己隨便編寫一個訂單號(這個訂單號要大于6位) 2、自己隨便填寫一個訂單價(單位是分) 3、點擊按鈕，調(diào)用pay云函數(shù)。獲取支付所需參數(shù)。

下圖是官方支付api所需要的一些必須參數(shù)。

下圖是我們調(diào)用pay云函數(shù)獲取的參數(shù)，和上圖所需要的是不是一樣。

六、調(diào)用wx.requestPayment實現(xiàn)支付

下圖是官方的示例代碼：

這里不在做具體講解了，把完整代碼給大家貼出來：

// pages/pay/pay.js

Page({

//提交訂單

formSubmit: function(e) {

let that = this;

let formData = e.detail.value

console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', 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)

}

})

},

//實現(xiàn)小程序支付

pay(payData) {

//官方標準的支付方法

wx.requestPayment({

timeStamp: payData.timeStamp,

nonceStr: payData.nonceStr,

package: payData.package, //統(tǒng)一下單接口返回的 prepay_id 格式如：prepay_id=***

signType: 'MD5',

paySign: payData.paySign, //簽名

success(res) {

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

},

fail(res) {

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

},

complete(res) {

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

}

})

}

})

到這里，云開發(fā)實現(xiàn)小程序支付的功能就完整實現(xiàn)了。

七、實現(xiàn)效果

1. 調(diào)起支付鍵盤

2. 支付完成

3. log日志，可以看出不同支付狀態(tài)的回調(diào)

上圖是支付成功的回調(diào)，我們可以在支付成功回調(diào)時，改變訂單支付狀態(tài)。

下圖是支付失敗的回調(diào)。

下圖是支付完成的狀態(tài)。

到這里我們就輕松的實現(xiàn)了微信小程序的支付功能了。是不是很簡單啊。如果感覺圖文不是很好理解，我后面會錄制視頻講解。

八、源碼地址

如果你導入源碼或者學習過程中有任何問題，都可以在下方留言。

— — — — End — — — —

歡迎分享云開發(fā)實戰(zhàn)經(jīng)驗與技術(shù)故事~

云開發(fā)

Tencent CloudBase

總結(jié)

以上是生活随笔為你收集整理的android简单小程序完整代码_10行代码实现小程序支付功能！丨实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。