資訊專欄INFORMATION COLUMN
摘要：原文見我的博客，點擊進入使用開發(fā)微信公眾號下站點的填坑之旅本文為我創(chuàng)業(yè)過程中，開發(fā)項目的填坑之旅。作為一個技術(shù)宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢。
原文見我的博客，點擊進入使用vue開發(fā)微信公眾號下SPA站點的填坑之旅
本文為我創(chuàng)業(yè)過程中，開發(fā)項目的填坑之旅。作為一個技術(shù)宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢^_^。
我決定實現(xiàn)如下功能架構(gòu)上，實現(xiàn)前后端分離。方便以后前后端的分工
考慮到體驗，前端做成SPA站點，也就是單頁面應(yīng)用
需要使用微信的JSSDK
需要有微信支付功能
作為一個偏后端的半專業(yè)前端人士，經(jīng)過一兩周的調(diào)研和學(xué)習(xí)后，
我決定使用如下技術(shù)后端使用php搭建接口，本文主要講前端，不細說
webpack實現(xiàn)前端代碼打包
vue實現(xiàn)數(shù)據(jù)綁定，vue-router實現(xiàn)前端路由
weui提供UI框架
vux，提供各種組件，包括對weui的組件化封裝
然后
我遇到了如下的坑微信JSSDK簽名出錯
微信支付簽名出錯
微信支付路徑要求二級或以上路徑
開啟調(diào)試模式后，微信支付仍然沒有錯誤提示
授權(quán)回調(diào)處理
微信的模板消息，會自動把url中的問號(?)去掉
一一詳述
微信JSSDK簽名出錯JSSDK在普通網(wǎng)站中是沒問題的，但是在SPA站點中，簽名經(jīng)常出錯
JSSDK官方文檔是這么說的
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現(xiàn)web app的頁面會導(dǎo)致簽名失敗，此問題會在Android6.2中修復(fù)）。
也就是說，android下的微信客戶端里，不支持vue-router的history模式。
解決辦法見支付簽名問題
vue-router使用hash模式
每次url更改的時候，重新調(diào)用JSSDK的config接口
微信支付簽名出錯支付授權(quán)的坑，大家可以參考這篇文章
按照文中的描述，其實我們也可以在js中根據(jù)android還是ios，來分別進行處理；但是推薦采用文中的方式，邏輯上更統(tǒng)一，使用也更方便。
另外說明一點，文中的#!做分隔符的方式已經(jīng)廢棄了，大家使用#即可，嘆號(!)去掉了
另外就是wx.config的簽名url和支付簽名url，微信處理也不一樣，見下面的解決辦法
解決辦法
vue-router路由使用hash模式
每次url更改的時候，重新調(diào)用JSSDK的config接口
hash分隔(#)前面加一個問號(?)，如果js判斷沒有問號，則跳轉(zhuǎn)一次
wx.config簽名使用的url，通過window.location.href.split("#")[0]獲取
微信支付簽名使用的url，通過用window.location.href獲取
微信支付路徑要求二級或以上路徑在遇到這個問題之前，我的php接口都統(tǒng)一加了一個前綴api，也就是http://example.com/api/other這樣的url，服務(wù)器會自動轉(zhuǎn)發(fā)給php服務(wù)，其他url則轉(zhuǎn)發(fā)給前端服務(wù)器。遇到微信這個問題后，我把前端url也統(tǒng)一加了一個前綴frontend，這樣前端url就變成了http://example.com/frontend/?...
解決辦法
所有前端url，統(tǒng)一加一個/frontend前綴
開啟調(diào)試模式后，微信支付仍然沒有錯誤提示不止微信支付，JSSDK的其他接口，也經(jīng)常沒有錯誤提示，或者提示很模糊，微信這簡直是慢性謀殺。
不過我對比發(fā)現(xiàn)，ios下的各種提示，要比android下全面很多，如有必要，推薦大家在ios下進行調(diào)試
解決辦法
使用iphone進行開發(fā)調(diào)試
授權(quán)回調(diào)處理這個不算坑，只是說下我的處理。
每次加載頁面后，我都會調(diào)用后臺接口判斷是否登陸，如果沒登陸，則跳轉(zhuǎn)回到后臺url進行授權(quán)，授權(quán)后再跳轉(zhuǎn)回當前頁面
前面解決微信簽名問題的時候，我們給每個url特意加了一個問號(?)，但是我發(fā)現(xiàn)，在發(fā)送微信模板消息的時候，即使給微信的url是對的，當用戶點擊模板消息的時候，微信打開的鏈接中，仍然把問號去掉了，這個很讓人無語。考慮到盡量自己解決問題的原則，最后我的解決方案是在js中進行判斷處理，自動把缺失的問號加上
解決辦法
如果頁面沒有問號(?)，則跳轉(zhuǎn)到正確的url，代碼如下
function directRightUrl () {
let paths = window.location.href.split("#")
paths[1] = paths[1] || "/"
// 老式的#!分隔跳轉(zhuǎn)
if (paths[0].charAt(paths[0].length - 1) !== "?") {
paths[0] = `${paths[0]}?`
}
if (paths[1].charAt(0) === "!") {
paths[1] = paths[1].substr(1)
}
let url = `${paths[0]}#${paths[1]}`
if (window.location.href !== url) {
window.location.href = url
}
}
以上代碼有三個作用
自動添加問號(?)
自動把分隔符由#!變成#
分隔符后面，自動判斷是否為斜杠(/)，沒有則添加上
結(jié)束語以上就是我在開發(fā)過程中遇到的一些還記得的坑，歡迎大家探討
結(jié)束語
以上就是我在開發(fā)過程中遇到的一些還記得的坑，歡迎大家探討
另外介紹一下我的公眾號"啟奏陛下"
這是一個提供“一句話新聞”的公眾號，沒有標題，標題即內(nèi)容
掃描以下二維碼可以關(guān)注
掃描以下二維碼關(guān)注
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88120.html
摘要：目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法主要是前端。前端提交時使用，在后端再取出對應(yīng)的微信支付看了下文檔，以前是需要用喚起支付，而現(xiàn)在則是把微信內(nèi)置到了微信的瀏覽器中。 目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內(nèi)容持續(xù)更新中~ 主要實現(xiàn) 前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付 技術(shù)方案 后端使用 php ...
摘要：目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法主要是前端。前端提交時使用，在后端再取出對應(yīng)的微信支付看了下文檔，以前是需要用喚起支付，而現(xiàn)在則是把微信內(nèi)置到了微信的瀏覽器中。 目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內(nèi)容持續(xù)更新中~ 主要實現(xiàn) 前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付 技術(shù)方案 后端使用 php ...
摘要：博客搬家原地址原發(fā)表時間本文討論使用安裝包構(gòu)建網(wǎng)站底層服務(wù)后，包括域名解析，的管理等的一系列填坑歷程。域名解析問題相關(guān)首先將本人的網(wǎng)站信息公布如下域名地址主機提供方搬瓦工域名托管及解析阿里云萬網(wǎng)本文之后的內(nèi)容均是基于以上信息。 「博客搬家」 原地址: CSDN 原發(fā)表時間: 2016-11-16 本文討論使用 LNMP 安裝包構(gòu)建網(wǎng)站底層服務(wù)后，包括域名解析，MySQL 的管理等...
先對項目進行一下簡單的介紹 vue開發(fā)微信商城項目總結(jié)之一–項目介紹 項目開發(fā)初期，由于項目比較著急上線，前端的框架在選型上比較倉促，只是因為vue學(xué)習(xí)成本較低，就選了它，沒有什么別的原因， 之前看過angular2一段時間，又趁著周末看了兩天vue，就倉促開發(fā)，所以埋下了很多坑，項目（項目目前沒有對游客開放，是2B2C的模式）上線后，回頭填坑，發(fā)現(xiàn)了很多問題，因為之前一直是基于Jquery模式的...
閱讀 1320·2021-11-11 10:57
閱讀 3740·2021-09-07 10:10
閱讀 3455·2021-08-03 14:03
閱讀 3082·2019-08-30 13:45
閱讀 696·2019-08-29 11:19
閱讀 1052·2019-08-28 18:07
閱讀 3112·2019-08-26 13:55
閱讀 823·2019-08-26 12:17
