?. 背景
- 小程序開發(fā)的過程中塞颁，絕大多數(shù)會滿足微信支付
- 那么硫痰，作為友好交互的體現(xiàn)，自然就會考慮到支付后的消息通知咯
- 所以腻窒，我的小程序項(xiàng)目也要求完成這個效果滩字，so.分享一下自己的實(shí)現(xiàn)步驟造虏，以方便道友們少踩點(diǎn)坑...
- 微信消息通知 的區(qū)別：
1. 微信網(wǎng)頁版、公眾號的消息提醒
要求用戶必須 "關(guān)注商家公眾號"麦箍，才支持消息的接收
并且還有個奇怪的毛怖炫骸：如果近期內(nèi)未與該公眾號有所交流，依然收不到消息提醒
再者挟裂，消息的樣式需代碼進(jìn)行自定義(麻煩)
2. 微信小程序享钞，可支持"服務(wù)通知"
只需配置好自己的 "模板消息"，通過獲取用戶的 "openid" 即可進(jìn)行來自微信服務(wù)的消息
通知的樣式诀蓉，可在小程序的管理后臺進(jìn)行選取栗竖，預(yù)覽(人性化)
-
此處參考京東購物的消息通知如下（也就是在下想要實(shí)現(xiàn)的效果）：
? 前期準(zhǔn)備
- ①. 首先，微信小程序官方文檔為我們提供了指導(dǎo) --- 【發(fā)送模板消息】
我們可以先對文檔進(jìn)行一遍
簡單的瀏覽渠啤，以方便自己的流程理解狐肢，避免蒙頭蒼蠅亂撞
- ②. 小程序給與了我們最方便的手動模板配置方式
- 我們可以先去
1（模板庫）中選取自己需要的模板，自定義標(biāo)題埃篓、排序- 申請成功之后处坪，進(jìn)入
2（我的模板）中就可以看到自己能夠使用的模板，我們后期進(jìn)行代碼編輯時，用到的就是那個模板ID
? 實(shí)現(xiàn)步驟
- 此處同窘，主要以
<form/>組件形式的實(shí)現(xiàn)為例玄帕，對于prepay_id的實(shí)現(xiàn)請參考文末的 附錄
1. 小程序端的要求
語境：
微信支付成功后，對用戶發(fā)送一條"訂單支付成功通知"的模板消息
- 第一步：以我的代碼實(shí)現(xiàn)為例想邦，首先需要對我的
<form/>組件進(jìn)行需發(fā)模板消息的聲明裤纹，即設(shè)置屬性report-submit="true"
- 第二步：對應(yīng)的
pages/cart/payment.js代碼中，編寫的提交代碼丧没，以及對event參數(shù)打印的結(jié)果則為：
20180904184002364.jpg
注意：截圖部分只是為了鹰椒，獲取并保存我們需要的
formId，
- 其實(shí)呕童，后面的代碼還可以有很多的邏輯處理漆际，以我的代碼邏輯為例：
- 我繼續(xù)進(jìn)行了表單數(shù)據(jù)的規(guī)范驗(yàn)證 ->
wx.request數(shù)據(jù)提交 -> 喚醒微信支付 -> 支付結(jié)果的回調(diào)處理
- 第三步：
request調(diào)用發(fā)送消息通知的方法
以我的邏輯為例，是在執(zhí)行完微信支付回調(diào)后夺饲，判斷支付成功才進(jìn)行調(diào)用的
此處奸汇，直接提供上述截圖中
pages/cart/payment.js所需要用到的兩個核心方法
/**
* 微信支付成功后的 消息模板的發(fā)送
*/
sendTemplatePaySuccess: function() {
var self = this;
var postData = {
sn: self.data.order_sn,
form_id: self.data.formId
};
self.http_post('https://xxx.com/wx/sendTemplatePaySuccess', postData, (data) => {
wx.navigateTo({
url: '/pages/cart/results/index?status=1&type=pay&orderInfo=' + JSON.stringify(self.data.orderInfo),
});
})
},
/**
* 封裝 http 函數(shù)，默認(rèn)‘GET’ 提交
*/
http_post:function(toUrl, postData, httpCallBack) {
wx.request({
url: toUrl,
data: postData,
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
},
success: function (res) {
//回調(diào)處理
return typeof httpCallBack == "function" && httpCallBack(res.data);
},
fail: function (error) {
console.log(error);
}
})
},
2. 服務(wù)端代碼配置
- 我對服務(wù)端的代碼往声，整合集中在了一個文件中擂找，可從附錄中進(jìn)行下載
-
第一步：替換小程序配置信息
- 第二步：修改方法
sendTemplatePaySuccess()
- 提示：
- 1.此方法是對應(yīng)于
pages/cart/payment.js中的Https://xxx.com/wx/sendTemplatePaySuccess，應(yīng)該不會理解錯吧浩销！- 2.一般的設(shè)計邏輯贯涎，是在用戶注冊、初次授權(quán)登錄的時候就將其
openid寫到數(shù)據(jù)庫中慢洋，后期使用時可隨時調(diào)用- 3.如果前期沒有寫入數(shù)據(jù)庫塘雳，也可以考慮直接授權(quán)獲取，參考文章 【微信小程序Ⅴ [獲取登錄用戶信息且警，重點(diǎn)openID(詳解)】]
- 4.
template_id直接在小程序賬號后臺復(fù)制即可粉捻，但是請將$rawPost['data']['keyword?']['value']順序?qū)?yīng)正確哦
? 運(yùn)行測試
- ①. 首先礁遣，要
特別注意一點(diǎn)斑芜，不可以使用微信開發(fā)者工具進(jìn)行測試，不然會有如下報錯：
- ②. 其中祟霍，如果已經(jīng)發(fā)送過一次模板消息杏头，會有如下提示信息：
//#這說明，你的formid 已經(jīng)用過了沸呐，系統(tǒng)要求只能使用一次４纪酢！崭添！
{
"status":0,"result":"sendTemplatePaySuccess Failed!",
"data":
{
"errcode":41029,"errmsg":"form id used count reach limit hint: [9mUwja01342277]"
}
}
? 附錄
A. 補(bǔ)充信息
- 開發(fā)文檔中有這樣一句話：
- 值得注意：
第一點(diǎn)：
使用 "<form/>" 組件
獲得的 "formId" 只能使用一次
相對適合的通知業(yè)務(wù) —— 支付成功或失敗后寓娩，充值成功、 續(xù)費(fèi)成功、掛號成功等被動響應(yīng)的信息...
第二點(diǎn)：
"prepay_id" 只有進(jìn)行了支付行為才能獲得棘伴，并且必須支付成功寞埠！
一個 "prepay_id" 可以使用三次
相對適合的通知業(yè)務(wù)有 —— 后臺發(fā)貨提醒、審核通知焊夸、課程開班提醒仁连、拼團(tuán)成功通知等主動推送的信息...
第三點(diǎn)：
prepay_id 使用時的報錯信息：
//# 如果支付不成功，但是要使用獲得的 prepay_id阱穗，會有如下類似的信息
{"data":
{"errcode":41028,"errmsg":"invalid form id hint: [XiZ04574125]"}
}
//# 如果支付成功饭冬，使用獲得的 prepay_id 次數(shù)超過了三次，會有如下的信息:
{"data":
{"errcode":41029,"errmsg":"form id used count reach limit hint: [oFN1Aa08963936]"}
}
B. 后臺發(fā)貨通知的設(shè)計思路
1. 首先揪阶，我們在數(shù)據(jù)表設(shè)計時昌抠，對于訂單表需要有一個存儲微信支付后 "prepay_id"的存儲字段
2. 進(jìn)行微信支付時，將生成的 "prepay_id" 存到數(shù)據(jù)表中
3. 當(dāng)對已支付訂單進(jìn)行后臺發(fā)貨操作時鲁僚，調(diào)用的通知模板扰魂，使用前面數(shù)據(jù)表中的 "prepay_id" 數(shù)據(jù)
4. 其他的服務(wù)端代碼設(shè)計 同上文中的 "sendTemplatePaySuccess()" 方法
- 溫馨提示：
畢竟存放的
"prepay_id"最多只用使用三次，所以對于項(xiàng)目設(shè)計中的使用位置要做好規(guī)劃 !!!
C. 使用真機(jī)測試蕴茴，順利運(yùn)行的效果
D. Access_Token 建議
官方文檔 - 獲取 access_token
- 代碼中劝评，所必須涉及到的業(yè)務(wù) ——
access_token的獲取，請參考文檔介紹倦淀，進(jìn)行定時刷新蒋畜，以避免不必要的資源請求 - 個人的思路就是，創(chuàng)建數(shù)據(jù)表字段撞叽，根據(jù)其返回的時長
expires_in姻成，在失效前保存數(shù)據(jù)access_token - 可根據(jù)自己的實(shí)際需求，優(yōu)化小編提供的
opGetAccessToken()方法愿棋！ - 有一點(diǎn)科展，或許很多人不多加注意：
當(dāng)項(xiàng)目已上線，如果你線下依舊測試使用了獲取 "access_token" 的操作糠雨，這會影響線上服務(wù)的才睹！
因?yàn)椋坏┲匦芦@取了 "access_token" 信息甘邀，微信服務(wù)器便會在短時間內(nèi)琅攘，對之前的 "access_token" 進(jìn)行失效處理
建議，可以考慮在線下直接使用線上獲得的 "access_token"松邪，不要隨意去刷新請求獲取坞琴，影響大局就尷尬了...
?. 源代碼參考
- 請對應(yīng)代碼進(jìn)行正確配置哦
