關(guān)于微信公眾號開發(fā)無法支付的問題解決
前提：由于涉及公司業(yè)務(wù)，部分核心代碼無法展示，這里僅僅是聊一下如何解決微信公眾號支付無法支付的解決方案。
問題：微信公眾號平臺支付失敗。
頁面：大致頁面就是下面這張圖片(引自《公眾號支付開發(fā)者文檔》中的"公眾號支付"-"場景介紹")所展示的那樣，可以選擇充值金額，可以點擊立即充值，然后就可以進行充值了。
現(xiàn)象：
1、點擊"立即充值"按鈕，頁面將會顯示微信支付慣有的灰色加載(我也只能形容成這樣了)，然后一閃而過，無法進行正常的充值業(yè)務(wù);
2、此充值頁面無法正常加載。表現(xiàn)為微信上方綠色進度條瞬間加載完成，但無法顯示正常的頁面，是一片白色的屏幕;
3、點擊"立即充值"按鈕，頁面無跳轉(zhuǎn)，頁面無反應(yīng)，頁面死活不動，死了。
排查步驟編號：
從這里開始是我對于整個問題的排查流程，其中因為涉及3個問題，為了條理更加清晰，這里的三大問題就用阿拉伯數(shù)字(1、2、3)表示，內(nèi)在流程歸屬于1.1、1.2、1.3......3.1這樣的形式(這里希望可以得到更好的分類建議，我這邊兒現(xiàn)在沒有太多的時間去查閱文章編號規(guī)則，寫論文的那點兒套路早就忘了)。
排查&解決：
1. 針對"點擊'立即充值'按鈕，頁面將會顯示微信支付慣有的灰色加載(我也只能形容成這樣了)，然后一閃而過，無法進行正常的充值業(yè)務(wù)"的問題解決。
1.1 起先排查后臺日志，進入微信后臺模塊所部署的生產(chǎn)環(huán)境內(nèi)?？截惍斍叭罩荆ㄟ^vim命令查看該日志，依照客服提供的充值時間點進行排查，最終查到這樣一個錯誤：
<xml> <return_code><![CDATA[FAIL]]></return_code> <return_msg><![CDATA[invalid out_trade_no]]></return_msg> </xml>
從字面意思可以看出這是在告訴我出現(xiàn)了非法的訂單號，這樣我又一次依據(jù)此日志記錄向上排查其他日志信息，又發(fā)現(xiàn)了一個疑問(除卻紅色標注的out_trade_no，其余內(nèi)容數(shù)據(jù)已替換成《公眾號支付開發(fā)者文檔》中的"API列表"-"統(tǒng)一下單"-"請求參數(shù)"提供的示例值)：
appid=wxd678efh567hg6787& body=會員充值& device_info=013467007045764& mch_id=1230000109& nonce_str=5K8264ILTKCH16CQ2502SI8ZNMTM67VS& notify_url=http://www.weixin.qq.com/wxpay/pay.php& openid=oUpF8uMuAJO_M2pxb1Q9zNjWeS6o& out_trade_no=2018年04月08日17時1609001& total_fee=1000& trade_type=JSAPI& key=KevenPotter
這個疑問就是發(fā)現(xiàn)我的訂單編號出現(xiàn)了中文字符，然而，在《公眾號支付開發(fā)者文檔》中的"API列表"-"統(tǒng)一下單"中明文規(guī)定，out_trade_no(商戶訂單號)要求32個字符內(nèi)，只能是數(shù)字、大小寫字母_-|* 且在同一個商戶號下唯一。
那么也就是說我的"訂單號(out_trade_no)"確實出問題了；
1.2 定位問題后，開始查看這個訂單號是如何生成的，怎么會出現(xiàn)中文字符這種類型呢。因為有日志信息，那么就去后臺代碼中去依照日志信息找到這行出錯的代碼，最后經(jīng)過排查，定位到service層業(yè)務(wù)處理類。在此中業(yè)務(wù)處理類中，wxUnifiedOrder()方法內(nèi)，這個out_trade_no就已經(jīng)傳了進來。
這時候就考慮業(yè)務(wù)，充值這個行為是用戶行為，具體為用戶點擊事件，那么用戶為什么點擊，是因為有這個按鈕，那么這個按鈕是在哪里呢，理所當然的首先想到頁面。因為我們這個技術(shù)用到的是ionic3和cordova，所以也就立馬去找頁面觸發(fā)的這個方法內(nèi)是什么樣的業(yè)務(wù)處理邏輯。直到我看到ts文件中out_trade_no是這樣定義的：
let out_trade_no = this.datePipe.transform(new Date(), 'yyyyMMddHHmmss') + xxx;
從這里可以看到，當初寫這個方法的人確實在規(guī)避問題，進行了格式化，但是為什么這塊格式化的代碼并沒有起作用而是被污染了，現(xiàn)在我也無法理解(有的同事說new Date()方法創(chuàng)建的是手機本地系統(tǒng)時間，有的手機系統(tǒng)時間就是中文格式，所以這里的訂單號也就出現(xiàn)了中文)。而且到底是前端污染還是后端格式化污染無從排查(因為找了大量公司同事進行測試，都沒有發(fā)現(xiàn)錯誤訂單的發(fā)生，問題重現(xiàn)很難[能遇上這種問題的客戶，可以去買買彩票了~])。
現(xiàn)在先貼一下構(gòu)建后端xml格式的代碼，希望一些大神可以解釋一下String.format中的一些坑~
private String buildPayXml(String appid, String body, String mch_id, String nonce_str, String notify_url, String openid, String out_trade_no, String sign, String total_fee) {
String xmlStr = String.format(
"<xml>" +
"<appid><![CDATA[%s]]></appid>" +
"<body><![CDATA[%s]]></body>" +
"<device_info><![CDATA[XXX]]></device_info>" +
"<mch_id><![CDATA[%s]]></mch_id>" +
"<nonce_str><![CDATA[%s]]></nonce_str>" +
"<notify_url><![CDATA[%s]]></notify_url>" +
"<openid><![CDATA[%s]]></openid>" +
"<out_trade_no><![CDATA[%s]]></out_trade_no>" +
"<sign><![CDATA[%s]]></sign>" +
"<total_fee><![CDATA[%s]]></total_fee>" +
"<trade_type><![CDATA[JSAPI]]></trade_type>" +
"</xml>",
appid, body, mch_id, nonce_str, notify_url, openid, out_trade_no, sign, total_fee);
return xmlStr;
}
所以這里的問題就是這個非法訂單的值是從前端傳過來的還是在后端格式化錯誤的，由此引發(fā)出兩種解決方案。
1.3 解決方案:
(1)、從前端頁面進行控制，不再使用之前的的格式化時間方式，而是重新創(chuàng)建一個方法叫做createTradeNo():
/**
* @Company {http://www.XXX.cn/}
* @author {KevenPotter}
* @description
* {Do not delete this method. This method is to increase for the number of users
* can not recharge by WeChat, because the formatting method before this method may result
* in illegal date format, which will lead to illegal order number of the user
* order Characters. This method is similar to a hard-coded effect and aims to
* forcibly obtain a numeric "year, month, and day" when creating a new Date class,
* rather than a wrong conversion by the previous formatting method.}
* @description
* {此方法請勿刪除.此方法的存在是為了處理部分用戶無法充值而增加的,因為此方法之前的格式化
* 方法可能會出現(xiàn)日期格式化非法的結(jié)果,這樣將會導致用戶訂單的訂單號出現(xiàn)非法字符.此方法屬于
* 類似硬編碼的效果,旨在當新建Date類時,強行獲取數(shù)字型的"年月日",而不是由之前的格式化方法
* 進行錯誤的轉(zhuǎn)換}
* @param {No Parameter}
* @returns {String}
*/
private createTradeNo(): string {
let dateNow = new Date();
let year: number = dateNow.getFullYear();
let month: string | number = (dateNow.getMonth() + 1) < 10 ? "0" + (dateNow.getMonth() + 1) : (dateNow.getMonth() + 1);
let day: string | number = dateNow.getDate() < 10 ? "0" + dateNow.getDate() : dateNow.getDate();
let hours: string | number = dateNow.getHours() < 10 ? "0" + dateNow.getHours() : dateNow.getHours();
let minutes: string | number = dateNow.getMinutes() < 10 ? "0" + dateNow.getMinutes() : dateNow.getMinutes().toString();
let seconds: string | number = dateNow.getSeconds() < 10 ? "0" + dateNow.getSeconds() : dateNow.getSeconds();
let out_trade_no: string = "" + year + month + day + hours + minutes + seconds + userId;
return out_trade_no;
}
這種方式類似于硬編碼的方式，就是強行獲取數(shù)字型年月日時分秒等值，然后轉(zhuǎn)換為字符串進行傳參；
(2)、從后端業(yè)務(wù)進行攔截，攔截的地方就是傳參的開始，我這里采用網(wǎng)上比較通用的正則表達式的方式，只要是數(shù)字的就要，其他的剔除:
String regEx = "[^0-9]";
Pattern pattern = Pattern.compile(regEx);
Matcher matcher = pattern.matcher(out_trade_no);
String outTradeNo = matcher.replaceAll("").trim(); // 過濾后的訂單
1.4 這兩種方案出現(xiàn)之后，經(jīng)過和同事商議，決定采用第二種解決方法，但不刪除第一種解決策略，如果第二種方法不可以，再采用第一種解決策略。經(jīng)過部署于客戶反饋，微信充值問題大部分已解決(75%)。
2. 針對"頁面無法正常加載，微信上方綠色進度條瞬間加載完成，無法顯示正常的頁面，是一片白色的屏幕"的問題解決。
2.1 首先依據(jù)客服的反饋，我們在公司的內(nèi)部進行了一次測試，目的是問題的重現(xiàn)。總共測試了20個手機，遺憾的是全部通過，指導硬件部門有一個人也想來做一下測試，這時發(fā)生了頁面白屏現(xiàn)象。我們后來進過對比，才發(fā)現(xiàn)這種情況的出現(xiàn)好似和微信昵稱有關(guān)聯(lián)。即，這個人的昵稱帶有特殊符號。
這時，我們項目經(jīng)理指出，這應(yīng)該是數(shù)據(jù)庫編碼出現(xiàn)了問題，特殊符號(emoji)無法存入。但是還需進行測驗，要在內(nèi)部把問題重現(xiàn)出來。
2.2 搭建本地測試環(huán)境，進行測試(就是改變自己的微信昵稱同時加入emoji表情符號)。但是進行了大致四次的更換，還是無法重現(xiàn)問題。之后經(jīng)過同事提醒發(fā)來了蘋果手機的表情，再次進行測試，問題重現(xiàn)~
重現(xiàn)問題之后，查看日志記錄，現(xiàn)粘貼如下：
2018-04-23 22:59:06.432 INFO 120 --- [p-nio-80-exec-1] com.hh.rest.app.service.WechatService :
xml msg:
<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[oUpF8uMuAJO_M2pxb1Q9zNjWeS6o]]></FromUserName>
<CreateTime>1524495419</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[subscribe]]></Event>
<EventKey><![CDATA[]]></EventKey>
</xml>
2018-04-23 22:59:06.521 INFO 120 --- [p-nio-80-exec-1] com.hh.rest.app.service.WechatService : enter subscribe
{"country":"中國","qr_scene":0,"subscribe":1,"city":"朝陽","openid":"oUpF8uMuAJO_M2pxb1Q9zNjWeS6o","tagid_list":[],"sex":1,"groupid":0,
"language":"zh_CN","remark":"","subscribe_time":1524495419,"province":"北京","subscribe_scene":"ADD_SCENE_QR_CODE","nickname":"口哈哈哈",
"headimgurl":"http://thirdwx.qlogo.cn/mmopen/iaXTwdhNbibo6cBH1GClwSgkEictOnsAN8v6JY6eB1O7ibddGXXn1iceAnZlrd8OiaqdWNAL1wGqPAc3ibDNBCQFqulvXwhEzHSnwJ8/132",
"qr_scene_str":""}
2018-04-23 22:59:06.917 INFO 120 --- [p-nio-80-exec-1] com.hh.rest.app.service.WechatService : userInfoObj:
{"country":"中國","qr_scene":0,"subscribe":1,"city":"朝陽","openid":"oUpF8uMuAJO_M2pxb1Q9zNjWeS6o","tagid_list":[],"sex":1,"groupid":0,
"language":"zh_CN","remark":"","subscribe_time":1524495419,"province":"北京","subscribe_scene":"ADD_SCENE_QR_CODE","nickname":"口哈哈哈",
"headimgurl":"http://thirdwx.qlogo.cn/mmopen/iaXTwdhNbibo6cBH1GClwSgkEictOnsAN8v6JY6eB1O7ibddGXXn1iceAnZlrd8OiaqdWNAL1wGqPAc3ibDNBCQFqulvXwhEzHSnwJ8/132",
"qr_scene_str":""}
Hibernate: select userentity0_.id as id1_13_, userentity0_.balance as balance2_13_, userentity0_.coupon as coupon3_13_, userentity0_.credit as credit4_13_, userentity0_.is_admin as is_admin5_13_, userentity0_.is_agent as is_agent6_13_, userentity0_.is_partner as is_partn7_13_, userentity0_.wx_icon as wx_icon8_13_, userentity0_.wx_name as wx_name9_13_, userentity0_.wx_open_id as wx_open10_13_, userentity0_.wx_subscribe_ts as wx_subs11_13_, userentity0_.wx_subscribed as wx_subs12_13_ from user userentity0_ where userentity0_.wx_open_id=?
Hibernate: insert into user (balance, coupon, credit, is_admin, is_agent, is_partner, wx_icon, wx_name, wx_open_id, wx_subscribe_ts, wx_subscribed) values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
2018-04-23 22:59:06.970 WARN 120 --- [p-nio-80-exec-1] o.h.engine.jdbc.spi.SqlExceptionHelper : SQL Error: 1366, SQLState: HY000
2018-04-23 22:59:06.970 ERROR 120 --- [p-nio-80-exec-1] o.h.engine.jdbc.spi.SqlExceptionHelper : Incorrect string value: '\xF0\x9F\x8D\xB4\xE5\x93...' for column 'wx_name' at row 1
2018-04-23 22:59:06.993 ERROR 120 --- [p-nio-80-exec-1] c.h.r.a.e.GlobalExceptionHandler : /rest/wechat/checkSign?signature=f3cac2272ab3f442b32d8560f024919240ab96e1×tamp=1524495419&nonce=451675791&openid=oUpF8uMuAJO_M2pxb1Q9zNjWeS6o; Error: could not execute statement; nested exception is org.hibernate.exception.GenericJDBCException: could not execute statement
2018-04-23 22:59:07.008 WARN 120 --- [p-nio-80-exec-1] .m.m.a.ExceptionHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.orm.jpa.JpaSystemException: could not execute statement; nested exception is org.hibernate.exception.GenericJDBCException: could not execute statement
我們從日志顯示上來看，其實就可以看出來，所有的用戶信息都已正常獲取，但是之后卻有兩個ERROR(紅字標注部分)報錯。其中第一條ERROR告訴我們SQL語句錯誤，那么第二條ERROR提示的更加明顯(向wx_name字段插入了不正確的字符串值)。那么，從網(wǎng)上借鑒的解決方法來看，確實是數(shù)據(jù)庫編碼問題，無法存入emoji特殊表情。
2.3 解決方案：
依據(jù)網(wǎng)上的解決方法，我們在測試環(huán)境下(我們使用的數(shù)據(jù)庫的版本為MySQL5.6.39)修改my.cnf(Linux下為my.cnf，Windows下為my.ini)數(shù)據(jù)庫的配置文件，在下面添加(無則添加，有則修改)：
[client] default-character-set = utf8mb4 [mysql] default-character-set = utf8mb4 [mysqld] character-set-server = utf8mb4 collation-server = utf8mb4_unicode_ci
修改完數(shù)據(jù)庫全局配置之后，再修改我們測試庫的編碼為utf8mb4，同時再修改emoji特殊符號所存入字段wx_name的編碼為utf8mb4，此時，進行本地測試，問題不再出現(xiàn)，之后，在生產(chǎn)環(huán)境同樣應(yīng)用上述配置，問題解決。從這里我們其實可以看出更多的問題，就是現(xiàn)如今，已然出現(xiàn)了更好的編碼方式，而公司內(nèi)部，依舊使用的是舊有的編碼模式，而不考量日后的擴展。說的與時俱進，其實也是一種換湯不換藥的死硬做法，這是我們需要警惕的。現(xiàn)貼出成功后的日志記錄：
2018-04-23 23:07:54.218 INFO 120 --- [p-nio-80-exec-9] com.hh.rest.app.service.WechatService :
xml msg:
<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[oUpF8uMuAJO_M2pxb1Q9zNjWeS6o]]></FromUserName>
<CreateTime>1524495947</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[subscribe]]></Event>
<EventKey><![CDATA[]]></EventKey>
</xml>
2018-04-23 23:07:54.226 INFO 120 --- [p-nio-80-exec-9] com.hh.rest.app.service.WechatService : enter subscribe
{"country":"中國","qr_scene":0,"subscribe":1,"city":"朝陽","openid":"oUpF8uMuAJO_M2pxb1Q9zNjWeS6o","tagid_list":[],"sex":1,"groupid":0,"language":"zh_CN","remark":"","subscribe_time":1524495947,"province":"北京","subscribe_scene":"ADD_SCENE_QR_CODE","nickname":"口哈哈哈","headimgurl":"http://thirdwx.qlogo.cn/mmopen/iaXTwdhNbibo6cBH1GClwSgkEictOnsAN8v6JY6eB1O7ibddGXXn1iceAnZlrd8OiaqdWNAL1wGqPAc3ibDNBCQFqulvXwhEzHSnwJ8/132","qr_scene_str":""}
2018-04-23 23:07:54.542 INFO 120 --- [p-nio-80-exec-9] com.hh.rest.app.service.WechatService : userInfoObj: {"country":"中國","qr_scene":0,"subscribe":1,"city":"朝陽","openid":"oUpF8uMuAJO_M2pxb1Q9zNjWeS6o","tagid_list":[],"sex":1,"groupid":0,"language":"zh_CN","remark":"","subscribe_time":1524495947,"province":"北京","subscribe_scene":"ADD_SCENE_QR_CODE","nickname":"口哈哈哈","headimgurl":"http://thirdwx.qlogo.cn/mmopen/iaXTwdhNbibo6cBH1GClwSgkEictOnsAN8v6JY6eB1O7ibddGXXn1iceAnZlrd8OiaqdWNAL1wGqPAc3ibDNBCQFqulvXwhEzHSnwJ8/132","qr_scene_str":""}
Hibernate: select userentity0_.id as id1_13_, userentity0_.balance as balance2_13_, userentity0_.coupon as coupon3_13_, userentity0_.credit as credit4_13_, userentity0_.is_admin as is_admin5_13_, userentity0_.is_agent as is_agent6_13_, userentity0_.is_partner as is_partn7_13_, userentity0_.wx_icon as wx_icon8_13_, userentity0_.wx_name as wx_name9_13_, userentity0_.wx_open_id as wx_open10_13_, userentity0_.wx_subscribe_ts as wx_subs11_13_, userentity0_.wx_subscribed as wx_subs12_13_ from user userentity0_ where userentity0_.wx_open_id=?
Hibernate: insert into user (balance, coupon, credit, is_admin, is_agent, is_partner, wx_icon, wx_name, wx_open_id, wx_subscribe_ts, wx_subscribed) values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
此時，微信充值問題絕大大部分解決(95%)。
3. 針對"點擊立即充值，頁面無跳轉(zhuǎn)，頁面無反應(yīng)，頁面死活不動，死了"的問題......
關(guān)于這個問題，我們沒有解決，不過現(xiàn)在問題定位很是明晰，這個問題的出現(xiàn)，99%的用戶使用的是蘋果手機，其版本為9抑或是9以下。關(guān)于這個問題，原諒我們能力有限，無法去解決。
問題解決，這里一筆帶過，因為原因特別簡單，TBS服務(wù)(騰訊瀏覽服務(wù))的內(nèi)核基線升級，導致了Angular的在頁面模板中的管道功能失效。
例如，原先我們在頁面模板中所使用的代碼為
{{pageDto.balance+0 | number:'1.0-1'}}
經(jīng)過修改后的代碼為
{{pageDto.balance}}
這樣，想要展示的值由后臺Java進行格式化再返回也是可以的(我?guī)滋烨白黾夹g(shù)培訓，講的是《初探前后端分離》，表達了，前后端分離的最大好處就是可以平衡壓力，當然，我知道分工明確也是很大的優(yōu)點[前者對物，后者對人]，但是我認為其中的一大亮點就是后端僅僅提供原始數(shù)據(jù)，而前端可以進行數(shù)據(jù)過濾，這樣可以達到一種"生態(tài)平衡"，奈何這種"平衡"現(xiàn)在變得不是那么平衡)。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決layer.open彈出框不能獲取input框的值為空的問題
今天小編就為大家分享一篇解決layer.open彈出框不能獲取input框的值為空的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
構(gòu)造函數(shù)就是初始化一個實例對象，對象的prototype屬性是繼承一個實例對象。本文給大家分享javascript構(gòu)造函數(shù)詳解，對js構(gòu)造函數(shù)相關(guān)知識感興趣的朋友一起學習吧2015-12-12
JS簡單實現(xiàn)String轉(zhuǎn)Date的方法
這篇文章主要介紹了JS簡單實現(xiàn)String轉(zhuǎn)Date的方法,涉及JavaScript字符串與日期相互轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2016-03-03
本文給大家分享的是一則使用javascript完美實現(xiàn)兼容各大瀏覽器的@好友自動提示的特效，是根據(jù)百度貼吧的效果模仿來的，推薦給小伙伴們，希望大家能夠喜歡。2015-03-03
下面小編就為大家?guī)硪黄猨s獲取元素的偏移量offset簡單方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了JavaScript實現(xiàn)圖像模糊化的方法,文中先進行簡單介紹，而后給出了完整的實例代碼，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
這篇文章主要介紹了微信小程序項目總結(jié)之點贊 刪除列表 分享功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
接觸jQuery很長時間了，對其的實現(xiàn)有太多疑問，可謂只知道皮毛，對其的精髓一竅不通，可悲??！所以有必要研究下其中的原理。2010-11-11
JavaScript+Canvas實現(xiàn)繪制音頻可視化波形圖
這篇文章主要為大家詳細介紹了如何利用JavaScript和Canvas實現(xiàn)繪制音頻可視化波形圖,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
下面的這段代碼中，我們通過select元素的name屬性來設(shè)置具體要訪問style的哪個屬性（本例中為背景色），這樣，這個函數(shù)就可以用來設(shè)置不同的CSS屬性了2012-08-08