本文作者（昵稱）：王文兵
內容來自葡萄城社區技術文章征稿活動
前言
最近自己做了一個手機版的商城分銷商城系統，整個大體的框架使用了官方的小程序工程，再此工程上改一改，最終就實現了一個小程序用戶注冊-邀請碼-商品上架-購買-發貨-退款-分銷傭金的全部功能。那今天我著重分享我是如何調用小程序支付的全部流程。當然也有傭金的發放功能、就用到了商家付款到零錢的接口了，官方沒有、這個就需要單獨的開發插件了，目前還在抽空進行中，后面實現了我在進行分享吧。
關于小程序支付在論壇上有很多帖子，但是都沒有直接解決的方法。So 我就整理一篇，正好官方還有征文活動，我就寫了一篇關于小程序支付的文章，希望能幫到其他格友，少走一些彎路。
需要用到的參考文件：
官方的活字格與小程序對接：【對接方案】微信小程序中嵌入活字格 - 活字格專區 - 專題教程 - 葡萄城開發者社區 (grapecity.com.cn)
使用了活字格微信支付插件：微信支付 - 葡萄城市場 (grapecity.com.cn)
當然，如果你嫌用插件太麻煩的話，你也可以直接去葡萄城市場，里面有一個官方上架的【在線商城Lite版在線商城Lite版 - 葡萄城市場 (grapecity.com.cn)】的系統中有支付功能，版本號為9.0.6，將把相關的支付功能和服務端都寫好了。你下載工程導入對應的命令，去改改配置參數就可以實現支付下單了。對于如何被配置、需要哪些參數、以上的教程說的夠明白了，這里都相對簡單就不過多講述了。
實現過程
接下來就進入正題，介紹一下我是如何操作的，
微信支付的思路：
使用 JSAPI 的接口進行下單，獲取到"prepay_id" : "wx201410272009395522657a690389285100"。
在獲取到支付請求后，跳轉到小程序原生頁面的頁面加載函數中調用wx.requestPayment(OBJECT)發起微信支付
支付后微信會進行回調我們系統中的一個接口（當然官方插件已經幫我做好了，只需要改自己的邏輯即可）。
走過的彎路
看到這，你可能就有疑問了，官方這個是 JSAPI 的支付形式啊，可要對接小程序啊，怎么對接的？你是怎么去下單的？你的請求頭怎么出來的？你是怎么對證書加解密的？
經過我不斷的惡補知識，找代碼、看代碼、看文檔、搜教程………….。終于一頓操作猛如虎，干出來了。
最終發現沒用，白搞……..
然后我仔細的看了微信的開發者文檔，發現小程序支付和JSAPI的下單的接口是同一個，所以我就可以使用官方的插件了去完成下單操作。下單完成帶著參數去小程序頁面，然后在調用wx.requestPayment就完成支付操作了。
解決方法
理解了之后緊接著就是實踐：
1）下單：使用上面工程里面的命令 CreateJSApiOrder（創建 JSAPI 下單）。
2）獲取使用js請求訪問該接口
貼源代碼：
var page = Forguncy.Page;
//該接口的需要的參數
var orderid = page.getCell("orderid").getValue();
var user_address_id = page.getCell("用戶地址ID").getValue();
var remarks = page.getCell("remarks").getValue();
//請求下單接口的路徑
var url = "ServerCommand/MiniCreateJSApiOrder";
//封裝請求參數
var data = {
"orderID": orderid,
"userAddress_id": user_address_id,
"remarks": remarks
}
console.log(data);
// 發送請求，執行下單邏輯獲取支付請求所需的參數
Forguncy.Helper.post(url, data, function (message) {
if (message)
{
let obj = JSON.parse(message);
console.log(obj.appId);
//package、paySign這個兩個參數需要特殊處理，原因是微信的接口會自動忽略"="后的內容，這兩個參數中存“=”，請求前先轉義一下，確保請求參數完整
var package = encodeURIComponent(obj.package);
let paySign = encodeURIComponent(obj.paySign);
//設置跳轉到小程序頁面，將所有的參數傳入
var gotourl=`/pages/pay/h5pay?timeStamp=${obj.timeStamp}&nonceStr=${obj.nonceStr}&package=${package}&signType=${obj.signType}&paySign=${paySign}`
console.log(gotourl);
console.log(message);
//打開小程序頁面
wx.miniProgram.navigateTo({
url: gotourl,
extraData: {
// 傳遞給目標小程序的數據，可選參數
},
success(res) {
console.log("成功");
//console.log(res);
// 打開成功
},
fail(err) {
console.log("失敗");
//console.log(err);
// 打開失敗
}
})
}
});請求后返回的信息。這樣就拿到了微信支付所需要的全部參數了
3）看到上面的信息，就說明下單成功了、現在就需要在工程文件上引用微信 SDK（做跳轉使用）：res.wx.qq.com/open/js/jweixin-1.6.0.js，配置完成就可以發布了，在活字格的工作就算完成了。
4）開發小程序的支付頁面，在官方的小程序工程中的pages文件夾下右擊，創建一個新的頁面【h5pay】；
（1）進行 h5pay.wxml 注釋全部內容，我這里使用的是一個空白的頁面。在頁面加載時就調用了支付接口。
（2）進入 h5pay.js 的 onLoad(options)添加代碼
let option = wx.location.query(options)
// console.log(JSON.stringify(options))
//之前轉義的兩個參數在進行解碼
options.package = decodeURIComponent(options.package);
options.paySign = decodeURIComponent(options.paySign);
//console.log(options)
// options 里面可以拿到h5傳遞過來的參數
// 調起支付
wx.requestPayment({
...options,
success(res) {
// 支付成功后，設置一個全局變量，然后返回到那個vwebview頁面
console.log(res)
wx.$payResult = {...res, paycode: 1};
wx.navigateBack();
},
fail() {
//支付失敗，同樣設置一個全局變量，然后返回到那個vwebview頁面
console.error();
console.log()
wx.$payResult = {paycode: 0};
wx.navigateBack();
},
});（5）好了現在就可以支付測試了。
總結
以上就是我用活字格實現微信支付的全過程，希望可以幫助到正在學習或者有這方需求的格友們，當然如果有更多想了解活字格的朋友們，也歡迎去葡萄城的官網了解。
