使用vue開發微信公眾號下SPA站點的填坑之旅

yeyan1996 發布于2019-08-21 15:09 / 2951人閱讀

摘要：原文見我的博客，點擊進入使用開發微信公眾號下站點的填坑之旅本文為我創業過程中，開發項目的填坑之旅。作為一個技術宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢。

原文見我的博客，點擊進入使用vue開發微信公眾號下SPA站點的填坑之旅

本文為我創業過程中，開發項目的填坑之旅。作為一個技術宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢^_^。

我決定實現如下功能

架構上，實現前后端分離。方便以后前后端的分工

考慮到體驗，前端做成SPA站點，也就是單頁面應用

需要使用微信的JSSDK

需要有微信支付功能

作為一個偏后端的半專業前端人士，經過一兩周的調研和學習后，

我決定使用如下技術

后端使用php搭建接口，本文主要講前端，不細說

webpack實現前端代碼打包

vue實現數據綁定，vue-router實現前端路由

weui提供UI框架

vux，提供各種組件，包括對weui的組件化封裝

然后

我遇到了如下的坑

微信JSSDK簽名出錯

微信支付簽名出錯

微信支付路徑要求二級或以上路徑

開啟調試模式后，微信支付仍然沒有錯誤提示

授權回調處理

微信的模板消息，會自動把url中的問號(?)去掉

一一詳述

微信JSSDK簽名出錯

JSSDK在普通網站中是沒問題的，但是在SPA站點中，簽名經常出錯

JSSDK官方文檔是這么說的

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

也就是說，android下的微信客戶端里，不支持vue-router的history模式。

解決辦法見支付簽名問題

vue-router使用hash模式

每次url更改的時候，重新調用JSSDK的config接口

微信支付簽名出錯

支付授權的坑，大家可以參考這篇文章
按照文中的描述，其實我們也可以在js中根據android還是ios，來分別進行處理；但是推薦采用文中的方式，邏輯上更統一，使用也更方便。

另外說明一點，文中的#!做分隔符的方式已經廢棄了，大家使用#即可，嘆號(!)去掉了

另外就是wx.config的簽名url和支付簽名url，微信處理也不一樣，見下面的解決辦法

解決辦法

vue-router路由使用hash模式

每次url更改的時候，重新調用JSSDK的config接口

hash分隔(#)前面加一個問號(?)，如果js判斷沒有問號，則跳轉一次

wx.config簽名使用的url，通過window.location.href.split("#")[0]獲取

微信支付簽名使用的url，通過用window.location.href獲取

微信支付路徑要求二級或以上路徑

在遇到這個問題之前，我的php接口都統一加了一個前綴api，也就是http://example.com/api/other這樣的url，服務器會自動轉發給php服務，其他url則轉發給前端服務器。遇到微信這個問題后，我把前端url也統一加了一個前綴frontend，這樣前端url就變成了http://example.com/frontend/?...

解決辦法

所有前端url，統一加一個/frontend前綴

開啟調試模式后，微信支付仍然沒有錯誤提示

不止微信支付，JSSDK的其他接口，也經常沒有錯誤提示，或者提示很模糊，微信這簡直是慢性謀殺。
不過我對比發現，ios下的各種提示，要比android下全面很多，如有必要，推薦大家在ios下進行調試
解決辦法

使用iphone進行開發調試

授權回調處理

這個不算坑，只是說下我的處理。
每次加載頁面后，我都會調用后臺接口判斷是否登陸，如果沒登陸，則跳轉回到后臺url進行授權，授權后再跳轉回當前頁面

微信的模板消息自動去掉url的問號(?)

前面解決微信簽名問題的時候，我們給每個url特意加了一個問號(?)，但是我發現，在發送微信模板消息的時候，即使給微信的url是對的，當用戶點擊模板消息的時候，微信打開的鏈接中，仍然把問號去掉了，這個很讓人無語。考慮到盡量自己解決問題的原則，最后我的解決方案是在js中進行判斷處理，自動把缺失的問號加上

解決辦法

如果頁面沒有問號(?)，則跳轉到正確的url，代碼如下

function directRightUrl () {
  let paths = window.location.href.split("#")
  paths[1] = paths[1] || "/"
  // 老式的#!分隔跳轉
  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
  }
}

以上代碼有三個作用

自動添加問號(?)

自動把分隔符由#!變成#

分隔符后面，自動判斷是否為斜杠(/)，沒有則添加上

結束語

以上就是我在開發過程中遇到的一些還記得的坑，歡迎大家探討

結束語

以上就是我在開發過程中遇到的一些還記得的坑，歡迎大家探討

另外介紹一下我的公眾號"啟奏陛下"
這是一個提供“一句話新聞”的公眾號，沒有標題，標題即內容
掃描以下二維碼可以關注

掃描以下二維碼關注

GPU云服務器云服務器 net?開發微信公眾號開發微信公眾號需要云服務器嗎 PHP開發微信支付小程序開發微信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88120.html

使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

摘要：目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法主要是前端。前端提交時使用，在后端再取出對應的微信支付看了下文檔，以前是需要用喚起支付，而現在則是把微信內置到了微信的瀏覽器中。目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內容持續更新中~ 主要實現前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付技術方案后端使用 php ...

afishhhhh 2019-06-27 16:36 評論0 收藏0
使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

摘要：目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法主要是前端。前端提交時使用，在后端再取出對應的微信支付看了下文檔，以前是需要用喚起支付，而現在則是把微信內置到了微信的瀏覽器中。目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內容持續更新中~ 主要實現前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付技術方案后端使用 php ...

Taonce 2019-08-20 16:49 評論0 收藏0
基于 LNMP 搭建個人網站的填坑之旅

摘要：博客搬家原地址原發表時間本文討論使用安裝包構建網站底層服務后，包括域名解析，的管理等的一系列填坑歷程。域名解析問題相關首先將本人的網站信息公布如下域名地址主機提供方搬瓦工域名托管及解析阿里云萬網本文之后的內容均是基于以上信息。「博客搬家」原地址: CSDN 原發表時間: 2016-11-16 本文討論使用 LNMP 安裝包構建網站底層服務后，包括域名解析，MySQL 的管理等...

B0B0 2019-05-29 17:52 評論0 收藏0
vue開發微信商城項目總結之六--關于vuex的思考

先對項目進行一下簡單的介紹 vue開發微信商城項目總結之一–項目介紹項目開發初期，由于項目比較著急上線，前端的框架在選型上比較倉促，只是因為vue學習成本較低，就選了它，沒有什么別的原因，之前看過angular2一段時間，又趁著周末看了兩天vue，就倉促開發，所以埋下了很多坑，項目（項目目前沒有對游客開放，是2B2C的模式）上線后，回頭填坑，發現了很多問題，因為之前一直是基于Jquery模式的...

PrototypeZ 2019-08-21 17:08 評論0 收藏0