微信小程序開發(一)新建小程序項目
前提
在準備微信小程序開發之前，希望你已經在微信·公衆平臺 https://mp.weixin.qq.com/註冊了小程序。微信小程序賬號註冊入口 https://mp.weixin.qq.com/wxopen/waregister?action=step1。
獲取小程序AppID
1.微信·公衆平臺 https://mp.weixin.qq.com/登錄你的小程序賬號； 2.設置–>開發設置–>開發者ID
獲取小程序AppSecret
1.微信·公衆平臺 https://mp.weixin.qq.com/登錄你的小程序賬號； 2.設置–>開發設置–>開發者ID
配置服務器域名
1.微信·公衆平臺 https://mp.weixin.qq.com/登錄你的小程序賬號； 2.設置–>開發設置–>開發者ID 不配置這個，小程序就不能使用網絡上的數據。 配置前 配置後(這個根據需求配置，我的只使用了request)
新建小程序
1.下載微信小程序開發工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html，這個安裝即可。 2.新建項目
3.小程序默認頁面
4.目錄說明
- pages: 小程序頁面文件夾(以後的頁面可以都放在這個目錄下面)
- logs: 默認的調試文件
- utils: 工具文件夾
- app.js: 啓動js文件
- app.json 小程序全局配置文件
- app.wxss 小程序全局css樣式
官方說明-簡易教程 https://mp.weixin.qq.com/debug/wxadoc/dev/這裏有詳細的說明。
5.快速新建頁面
這裏我只說說怎麼快速新建頁面。
我們打開app.json文件，在pages字段下面，比如我們新建 一個home的頁面：
在輸入"pages/home/index"後保存就會自動生成對應的目錄。
項目預覽
看下圖頁面，點擊預覽後會生成一個二維碼，我們使用手機微信掃碼即可在手機端預覽(項目沒有配置AppID的是不可以預覽)。
在這個項目做好的時候，並沒有那麼急着提交發布，而是先看了小程序的文檔小程序-運營 https://mp.weixin.qq.com/debug/wxadoc/product/index.html?t=2017527，這一快的文檔還是很有必要仔細讀一讀的。在第一次提交的時候，我就知道會被拒絕，爲什麼？因爲我這個需要提供測試賬號，但是在初次提交的時候沒有地方讓你提供測試賬號；被拒絕後，我提供了測試賬號和演示視頻就上線了。最後還是要好好看看了小程序的文檔小程序-運營 https://mp.weixin.qq.com/debug/wxadoc/product/index.html?t=2017527。
微信小程序開發(二)圖片上傳
準備工作
配置uploadFile合法域名
在做微信小程序的圖片上傳之前我們需要先配置uploadFile的合法域名。這個可以看《微信小程序開發(一)新建小程序項目》的服務器配置部分。
看小程序文檔
看小程序文檔—wx.uploadFile https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html，看文檔主要是看小程序給的api是怎麼使用的。在使用wx.uploadFile之前需要先使用wx.chooseImage(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject這個api，因爲我們需要先選擇圖片。
代碼實現
有了上面的準備工作後我們就可以實際操作了。
小程序端的實現
小程序端的實現其實很簡單，一個事件去出發選擇上傳操作。
這裏我也開放我的兩個圖片上傳的接口:
這兩個接口的使用大家可以看上線的文章，遇見接口不能使用時可以聯繫我，我開服務器。
服務端的實現
在實現服務端，我們需要使用一個新的模塊multer,關於這個模塊的使用，大家可以看文檔就是了。 代碼：
後端代碼其實也很簡單的。理清思路就好做了。
效果圖
手機不能搞gif圖，就電腦截屏了，這個在微信預覽是一樣的。
微信小程序開發(三)textarea的bug
最近在開發一個商城項目，其中有一塊是評價，就像淘寶手機端的評價那樣。首先看看我的頁面結構。
就是一個頁面可以多多個商品進行評價，每個寫具體評價的位置是一個textarea。使用微信小程序開發公司調試是沒有問題的，但是在手機端調試就有問題。
就是textarea不能跟隨一起滾動。 微信小程序給了一些Bug和建議：
我這個界面底層並沒有使用scroll-view,但是還是有問題。感覺微信給的第5點覆蓋面不廣，應該是對於滾動的頁面都不行。在HTML裏面滾動的頁面底部並不一定是scrollview,只要頁面高度大於屏幕高度 就都可以滾動。 最終的解決辦法是，把本來訂單後評價按鈕修改成對訂單中的每個商品後面單獨加一個評價按鈕去評價。
微信小程序開發(四)獲取用戶openid
在小程序裏面有兩個地方獲取用戶的openid。 一個是wx.login(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html
,第二個是wx.getUserInfo(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/open.html#wxgetuserinfoobject。 這裏我使用的是第一種wx.login(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html。
步驟
後端的實現
後端的實現就是後端調用這個接口：https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code。
具體實例
微信小程序開發(五)小程序支付-統一下單
在做小程序支付希望你已經熟讀微信的文檔微信支付-小程序-手機端https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html#wxrequestpaymentobject和微信支付-小程序-後臺https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3。且你已經有了
關於上面的這4個數據的獲取，請自行在自己的賬號中獲取和設置。且你已經有了用戶的openid。《微信小程序開發(四)獲取用戶openid》。
小程序接口
小程序接口就暴露這一個方法。這個方法有4個參數是需要後臺去獲取的。
其實大部分工作都是後臺的事情。
後端實現
後端主要是統一下單https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1的這個接口https://api.mch.weixin.qq.com/pay/unifiedorder。
這裏主要就是幾個簽名算法https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3：
統一下單簽名
小程序paySign
統一下單後端實現
wxConfig代碼：
實例
微信小程序開發(六)小程序支付-notify_url
在《微信小程序開發(五)小程序支付》裏的微信支付裏有一個notify_url(https://www.hgdqdev.cn/api/wxpay)。notify_url是位置支付成功後的一個通知地址：接收微信支付異步通知回調地址，通知url必須爲直接可訪問的url，不能攜帶參數。 這裏存在一個問題就是怎麼獲取微信通知過來的數據。支付結果通知文檔https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7。
具體實現 我的後臺是node.js + express4; 1.添加依賴body-parser-xml,這個的使用看文檔即可。 2.修改app.js
3.接口實現
4.返回結果
微信小程序開發(七)小程序支付-查詢訂單
應用場景
該接口提供所有微信支付訂單的查詢，商戶可以通過查詢訂單接口主動查詢訂單狀態，完成下一步的業務邏輯。
需要調用查詢接口的情況： ◆ 當商戶後臺、網絡、服務器等出現異常，商戶系統最終未接收到支付通知； ◆ 調用支付接口後，返回系統錯誤或未知交易狀態情況； ◆ 調用被掃支付API，返回USERPAYING的狀態； ◆ 調用關單或撤銷接口API之前，需確認支付狀態；
接口說明
這裏如果已經做好了統一下單，《微信小程序開發(五)小程序支付-統一下單》。再做查詢訂單就是一件很簡單的事情了。 但是這裏需要注意的是商戶訂單號-out_trade_no這個，因爲我們在統一下單的時候有這個，查村訂單也是根據這個區查詢，後面的關閉訂單，退款都可以根據這個去操作。
代碼實現
總結
其實代碼實現很簡單就是看微信的文檔就可以。
微信小程序開發(八)小程序支付-關閉訂單
應用場景
以下情況需要調用關單接口：商戶訂單支付失敗需要生成新單號重新發起支付，要對原訂單號調用關單，避免重複支付；系統下單後，用戶支付超時，系統退出不再受理，避免用戶繼續，請調用關單接口。 注意：訂單生成後不能馬上調用關單接口，最短調用時間間隔爲5分鐘。
接口說明
這一依然要注意的是商戶訂單號-out_trade_no 這個，因爲我們退款是根據這去微信那邊退款的。
代碼實現
微信小程序開發(九)小程序支付-申請退款
應用場景
當交易發生之後一段時間內，由於買家或者賣家的原因需要退款時，賣家可以通過退款接口將支付款退還給買家，微信支付將在收到退款請求並且驗證成功之後，按照退款規則將支付款按原路退到買家帳號上。 注意： 1、交易時間超過一年的訂單無法提交退款； 2、微信支付退款支持單筆交易分多次退款，多次退款需要提交原支付訂單的商戶訂單號和設置不同的退款單號。一筆退款失敗後重新提交，要採用原來的退款單號。總退款金額不能超過用戶實際支付金額。
接口說明
這裏退款還是根據商戶訂單號-out_trade_no去微信那邊做申請退款。
代碼實現
這個是需要證書了，
證書的使用 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3。 我的後端使用的node.js，後端網路請求使用的是request,這裏需要看看這部分Using options.agentOptions https://www.npmjs.com/package/request#using-optionsagentoptions。
微信小程序開發(十)小程序支付-查詢退款
應用場景
提交退款申請後，通過調用該接口查詢退款狀態。退款有一定延時，用零錢支付的退款20分鐘內到賬，銀行卡支付的退款3個工作日後重新查詢退款狀態。
接口說明
這裏退款還是根據商戶訂單號-out_trade_no去微信那邊查詢
代碼實現
微信小程序開發(十一)五星好評
準備工作
首選需要有兩個星星，一個滿分星星，一個空心的星星。
代碼實現
.wxml文件
這是先一個for循環構建出5個星星
.wxss文件
這裏大家可能會注意到顯示星星的<image>控件比他外面的<view class="star">要小。其實這裏是爲了加強用戶體驗。很多時候我們看見的控件顯示很小，但是它的實際點擊區域卻比較大。這裏我就是這裏處理，這樣既保證了UI的顯示效果，也保證了一定的用戶體驗。這裏的點擊事件是綁定在<view class="star">上面的。
.js文件
首先做一個包含5個星星的數組
默認是有1顆星星的。
再就是處理點擊事件，在處理點擊事件前我們要先理清思路。比如我們點擊第3顆星星時，需要顯示的是3星滿星，2顆空心。那麼這個數組userStars就好處理了，數組的前3個元素是滿心，後兩個是空心。
代碼如下：
總結
其實總體來做，五星好評並不難處理。理清思路，知道滿心是什麼，空心是什麼，做一次，以後遇見其他平臺上面的這種控件也就知道怎麼處理了。
效果圖
微信小程序開發(十二)富文本插件wxParse的使用
昨天一位網友問我小程序怎麼解析富文本。他嘗試過把html轉出小程序的組件，但是還是不成功，我說可以把內容剝離出來。但是這兩種方法都是不行了。後來找到了wxParse-微信小程序富文本解析組件https://github.com/icindy/wxParse。
基本使用方法
- Copy文件夾
wxParse
- 引入必要文件
- 數據綁定
- 模版引用
注意點
在上面的基本使用裏面在.js文件和.wxml文件裏面出現的article這個是兩個文件裏面是一樣的。但是article是js文件裏面的一個變量是可以變的，只要保證js文件和wxml文件裏面變量名一致即可。
實例
實例結構
page頁面是測試頁面。
wxml文件
wxss文件
js文件
效果圖
微信小程序開發(十三)富文本插件wxParse的wxParseImgTap的bug修復
問題描述
仔細看報錯，我們會發現是wxParse.js文件裏面的wxParseImgTap方法裏面有Bug。沒有imageUrls這個屬性。
分析問題
後來把wxParse插件的源碼都看了一次，也修復了這個bug。其實修復這個bug不需要看看那麼多，只需要看wxParse.js文件裏面的部分代碼即可。
既然問題是找不到imageUrls這個屬性，那麼我們就讓他找到。
看打印信息
打開調試看打印信息：
在wxParse.js文件的wxParse方法中有一個打印：console.log(JSON.stringify(transData, ' ', ' '));。直接先看打印的結果：
數據很長，我們就這麼看：console.log(transData);
這裏我們看見了imageUrls這個屬性。
我們發現這樣的三行代碼：
這是在把transData的數據賦值給bindData了。那麼我們就可以肯定bindData這個對象裏面是有我們需要的imageUrls了。剩下的就是取到這個imageUrls屬性了。
但是在上面的代碼中有這麼一行：that.setData(bindData);。我們知道這個setData方法是微信小程序的，但是作者在wxParse.js文件裏面並沒有定義這個方法。繼續往下看：
這裏作者這麼取得值：urls: that.data[tagFrom].imageUrls // 需要預覽的圖片http鏈接列表，這裏又有問題，that.data[key]是微信小程序取值的方式。這裏又錯了。
解決問題
其實在上面的問題描述中我們已經知道了是什麼問題，也定位了問題。但是要解決問題，通常我們不能盯着一個點看。我們要帶着問題去解決問題。
既然是找不到imageUrls，我們就讓他找到。
1.在wxParse.js文件裏面的wxParse方法如下修改：
2.在wxParseImgTap方法裏面如下修改：
效果圖
總結
其實問題的核心還是誤用了setData方法導致的。仔細看了一下，在wxParse.js文件裏面作者4次使用了setData方法和4次使用了取值that.data。最後，有問題不要怕，細心看報錯，帶着問題一點一點的調試。
微信小程序開發(十四)scroll-view實現下拉刷新上拉加載更多
之前在做原生app開發的時候，下拉刷新和上拉加載更多是使用的比較多的一個功能了。現在在做微信小程序開發，小程序只提供了下拉刷新的接口。那麼下拉刷新和上拉加載更多就需要我們換個思路實現了。
關於scroll-view
什麼是scroll-view
scroll-view：可滾動視圖區域。
scroll-view的屬性
注意點
使用豎向滾動時，需要給一個固定高度，通過 WXSS 設置 height。
Bug & Tip
- 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件
- scroll-into-view 的優先級高於 scroll-top
- 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發 onPullDownRefresh
- 若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能通過點擊頂部狀態欄回到頁面頂部 在這裏其實也就說了在使用scroll-view時是不能使用onPullDownRefresh了。
效果圖
代碼實現
wxml文件
這裏就是頁面結構，上下都是下拉和上拉纔會顯示的。中間的scroll-view纔是滾動視圖。
js文件
分析
這裏js代碼裏面其實就是處理邏輯。上拉的時候我們需要在數組contentlist的後面拼接數據和處理請求的頁碼；下拉的時候我們需要把當前頁碼設置成1，contentlist取當前網絡請求的數據。網絡請求getData函數上拉下拉的區分是通過當前頁碼值區分的。 在scroll-view的上拉和下拉事件中，我都加了一個定時，這裏是爲了延長上拉下拉視圖的顯示時間。
微信小程序開發(十五)獲取位置
準備工作
準備工作就是看小程序的文檔-小程序-獲取位置 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocationobject 。
這裏小程序提供了一個接口wx.getLocation(OBJECT)。
接口參數
這裏主要是那個type參數。
success返回
這裏我們可以看見返回的數據裏面和位置相關的只有經緯度latitude和longitude。但是這個是數字，用戶並不需要關係這些也看不懂，用戶只需要知道當前定位的城市，那麼只調用這一個接口是不行。我們需要逆向地址解析。
逆向地址解析
什麼是逆向地址解析
這個說白了就是根據經緯度獲取所在位置的國家、省、市、區和接到等信息。其實還有正向解析，這個就是一個相反的過程了。
騰訊位置服務
騰訊位置服務 http://lbs.qq.com/index.html騰訊提供了一些接口可以調用。
獲取密匙
登錄–控制檯–密匙管理
填寫相關信息
這裏主要是應用於這裏要注意。小程序端就選擇瀏覽器，服務端使用騰訊接口就選擇服務端。
微信小程序JavaScript SDK
文檔地址：開發–微信小程序開發–微信小程序JavaScript SDK http://lbs.qq.com/qqmap_wx_jssdk/index.html。
使用步驟
主要是小程序示例部分需要詳細說明。
開發實例
1.項目中添加微信小程序JavaScriptSDK
我是把下載的qqmap-wx-jssdk.js放在了這裏。
2.頁面js文件使用
首先在Page外申明兩個變量：
在實例化
調用接口
這裏首先調用wx.getLocation獲取到經緯度之後再調用騰訊位置服務的reverseGeocoder接口即可。剩下的就是處理返回的數據顯示了。
服務端WebService API的使用
上面介紹的使用小程序端的。其實仔細看調試模式和返回的數據，還是調用的是服務端WebService API http://lbs.qq.com/webservice_v1/index.html。反而還需要把微信的域名作爲小程序的一個安全域名，這個我是不能忍的，我一個小程序，爲什麼我要添加兩個不同的域名呢，而且還有一個是別人的，而且這樣做也不利於以後的維護，如果項目不使用騰訊的位置服務而是百度、高德什麼，那是不是我就需要修改小程序端的代碼了，甚至還要寫服務端代碼。爲什麼不一次搞定了。 所以這裏就有必要使用一下服務端WebService API http://lbs.qq.com/webservice_v1/index.html。
獲取密匙
這一步和上面類似，只是在生成密匙時我們選擇的應用於是選擇服務端。
服務端逆向解析
首先看文檔逆地址解析(座標位置描述) http://lbs.qq.com/webservice_v1/guide-gcoder.html。
接口說明： 1.該請求爲GET請求 http://apis.map.qq.com/ws/geocoder/v1/?location=
2.請求參數
這裏其實我們只需要傳遞location和key參數即可。
3.實例 http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
服務端代碼
小程序客戶端代碼
上面我開放了我們接口，方便大家調用。
接口：https://api.hgdqdev.cn/api/tengxunmap，GET請求
參數：lat，
參數格式：var lat = latitude + ',' + longitude，比如：39.984154,116.307490
返回:
至此小程序的獲取位置介紹完畢。
總結
其實使用小程序的接口還是很方便的。理清思路，看文檔即可完成開發。 但是還是有一點小小的建議，既然小程序是運行在微信裏面的，微信是可以獲取到用戶當前所在城市的，我們爲什麼小程序只能獲取到地理左邊。
微信小程序開發(十六)頁面傳值
小程序頁面傳值的方式
這裏正向傳值有3種，反向傳值有2種，如有遺漏歡迎補充。 這裏的url傳值只能是正向傳值，其他的本地儲存和全局的app對象既可以正向傳值也可以反向傳值。
項目結構
效果圖
正向傳值的實現
url傳值
url傳值，希望你已經看了wx.navigateTo(OBJECT) https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html。
這裏說了頁面路勁可以像GET請求一樣拼接參數，那麼怎麼獲取這個參數呢? 這個不知道大家發現沒，在每個頁面的.js文件裏面都默認會生成生命週期的幾個方法，其中：
這個是待有參數options的。這裏就需要利用它了。
A頁面代碼
B頁面代碼
本地儲存
小程序-數據緩存 https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html#wxsetstorageobject這裏大家自己去看。這裏不做詳細說明。
A頁面代碼
B頁面代碼
全局的app對象
這個大家看了小程序新建項目時生成的代碼就知道怎麼用了。
A頁面代碼
B頁面代碼
反向傳值的實現
本地儲存
B頁面代碼
A頁面代碼
全局的app對象
這個大家看了小程序新建項目時生成的代碼就知道怎麼用了。
B頁面代碼
A頁面代碼
全部代碼
app.js
A頁面
wxml
js
B頁面
wxml
js
總結
關於頁面傳值，其實也就是搞清楚需求的前提下，利用已經掌握的技術來實現，只是這個應用是用來頁面傳值。
url傳值
我們有時爲了瀏覽器不緩存一些文件，我們在文件後面加上了時間戳，文件還是一樣的；或者我們在已經打開的網頁後面自己像GET請求方式那樣添加參數，eg: https://www.baidu.com?baidu=李彥宏，和打開百度https://www.baidu.com頁面還是一樣的。
本地存儲
我們一般是存儲一些信息在本地，但是這個有存也有取，盡然可以存進去，我們只需要在需要的地方存取數據就行。這個還可以實現跨頁面傳值。
全局app對象
這個就是要搞清楚全局的概念和單例了。作爲小程序開發，看看每次新建小程序項目時自動生成的代碼就知道這個怎麼用了。 至於以後的瀏覽器端的開發就需要自己去實現了。
總的來說頁面傳值基本就這，兩個方向，三大類。搞清楚各自的特點就很好操作了。以後做瀏覽器端的項目開發時就很好處理了。
微信小程序開發(十七)模板消息
最近兩個月在重構公司的一個商城項目，小程序端，PC端，後臺部分也大部分是我做的。比較忙，所以博客寫的比較少。這兩天在調試微信支付之後個用戶發送一個模板消息的功能。一直出現errcode: 41028, errmsg: “invalid form id hint:的錯誤。在網上看了一個基本沒有一個正確的答案，基本都是照搬微信的文檔，並沒有說出調試的細節。關於文檔，大家可以直接看微信的文檔-小程序模板消息 https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html。下面寫下我的整個開發過程，首先請詳細閱讀微信相關的文檔。
選擇模板
1.登錄小程序的微信公衆平臺-模板庫
選擇你需要的模板。 2.設置那你需要的字段
3.獲取模板消息ID 在完成上面兩步之後，在我的模板裏面就可以看見了。複製模板ID即可。
獲取ACCESS_TOKEN
注意點
關於ACCESS_TOKEN這塊大家注意兩點即可： 1.access_token 是全局唯一接口調用憑據，開發者調用各接口時都需使用 access_token，請妥善保存。access_token 的存儲至少要保留512個字符空間。 2.access_token 的有效期目前爲2個小時，需定時刷新，重複獲取將導致上次獲取的 access_token 失效。 微信給了一種access_token的解決辦法：
我沒有使用中繼服務器。我是保存在本地數據庫，給一個接口去獲取這個access_token。具體的業務邏輯： 1.調用後端寫的獲取access_token接口， 2.數據庫沒有access_token記錄，就向騰訊獲取一個保存數據庫並返回， 3.數據庫有記錄且最新一天記錄的保存時間距離現在時間小於1小時55分，就直接把這個access_token返回給前臺， 4.數據庫有記錄，但最新一條的保存時間距離現在時間大於1小時55分，就重複步驟2. 爲什麼是1小時55分呢？上面的截圖第2點 目前 access_token 的有效期通過返回的 expires_in 來傳達，目前是7200秒之內的值。中控服務器需要根據這個有效時間提前去刷新新 access_token。在刷新過程中，中控服務器對外輸出的依然是老 access_token，此時公衆平臺後臺會保證在刷新短時間內，新老 access_token 都可用，這保證了第三方業務的平滑過渡這我預留5分鐘，以避免這個問題。
代碼實現
發送模板消息
發送模板消息就好處理了。
這個就是一個處理POST請求參數的問題了。 這裏需要注意的是：form_id 是 表單提交場景下，爲 submit 事件帶上的 formId；支付場景下，爲本次支付的 prepay_id。 我的是支付成功的通知，這裏一定保存整個支付流程都是在真機上面調試，一定不能是手機掃碼調試工具上面的二維碼支付，不然會一直報錯：errcode: 41028, errmsg: “invalid form id hint:。 小程序端發送模板消息：
至此發送模板消息是做完了。但是這裏有存在一個缺陷，如果是線上的小程序版本，需要及時修改模板消息格式就不好了。後來我做的是後臺發送模板消息。這個修改就很好做了，這裏不再贅述。
注意
一定整個支付流程都是在自己的手機上面完成，一定不要去掃調試工具生成的二維碼支付。