国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

使用vue開(kāi)發(fā)微信公眾號(hào)下SPA站點(diǎn)的填坑之旅

yeyan1996 / 2943人閱讀

摘要：原文見(jiàn)我的博客，點(diǎn)擊進(jìn)入使用開(kāi)發(fā)微信公眾號(hào)下站點(diǎn)的填坑之旅本文為我創(chuàng)業(yè)過(guò)程中，開(kāi)發(fā)項(xiàng)目的填坑之旅。作為一個(gè)技術(shù)宅男，我的項(xiàng)目是做一個(gè)微信公眾號(hào)，前后端全部自己搞定，不浪費(fèi)國(guó)家一分錢(qián)。

原文見(jiàn)我的博客，點(diǎn)擊進(jìn)入使用vue開(kāi)發(fā)微信公眾號(hào)下SPA站點(diǎn)的填坑之旅

本文為我創(chuàng)業(yè)過(guò)程中，開(kāi)發(fā)項(xiàng)目的填坑之旅。作為一個(gè)技術(shù)宅男，我的項(xiàng)目是做一個(gè)微信公眾號(hào)，前后端全部自己搞定，不浪費(fèi)國(guó)家一分錢(qián)^_^。

我決定實(shí)現(xiàn)如下功能

架構(gòu)上，實(shí)現(xiàn)前后端分離。方便以后前后端的分工

考慮到體驗(yàn)，前端做成SPA站點(diǎn)，也就是單頁(yè)面應(yīng)用

需要使用微信的JSSDK

需要有微信支付功能

作為一個(gè)偏后端的半專(zhuān)業(yè)前端人士，經(jīng)過(guò)一兩周的調(diào)研和學(xué)習(xí)后，

我決定使用如下技術(shù)

后端使用php搭建接口，本文主要講前端，不細(xì)說(shuō)

webpack實(shí)現(xiàn)前端代碼打包

vue實(shí)現(xiàn)數(shù)據(jù)綁定，vue-router實(shí)現(xiàn)前端路由

weui提供UI框架

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

然后

我遇到了如下的坑

微信JSSDK簽名出錯(cuò)

微信支付簽名出錯(cuò)

微信支付路徑要求二級(jí)或以上路徑

開(kāi)啟調(diào)試模式后，微信支付仍然沒(méi)有錯(cuò)誤提示

授權(quán)回調(diào)處理

微信的模板消息，會(huì)自動(dòng)把url中的問(wèn)號(hào)(?)去掉

一一詳述

微信JSSDK簽名出錯(cuò)

JSSDK在普通網(wǎng)站中是沒(méi)問(wèn)題的，但是在SPA站點(diǎn)中，簽名經(jīng)常出錯(cuò)

JSSDK官方文檔是這么說(shuō)的

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶(hù)端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在Android6.2中修復(fù)）。

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

解決辦法見(jiàn)支付簽名問(wèn)題

vue-router使用hash模式

每次url更改的時(shí)候，重新調(diào)用JSSDK的config接口

微信支付簽名出錯(cuò)

支付授權(quán)的坑，大家可以參考這篇文章
按照文中的描述，其實(shí)我們也可以在js中根據(jù)android還是ios，來(lái)分別進(jìn)行處理；但是推薦采用文中的方式，邏輯上更統(tǒng)一，使用也更方便。

另外說(shuō)明一點(diǎn)，文中的#!做分隔符的方式已經(jīng)廢棄了，大家使用#即可，嘆號(hào)(!)去掉了

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

解決辦法

vue-router路由使用hash模式

每次url更改的時(shí)候，重新調(diào)用JSSDK的config接口

hash分隔(#)前面加一個(gè)問(wèn)號(hào)(?)，如果js判斷沒(méi)有問(wèn)號(hào)，則跳轉(zhuǎn)一次

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

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

微信支付路徑要求二級(jí)或以上路徑

在遇到這個(gè)問(wèn)題之前，我的php接口都統(tǒng)一加了一個(gè)前綴api，也就是http://example.com/api/other這樣的url，服務(wù)器會(huì)自動(dòng)轉(zhuǎn)發(fā)給php服務(wù)，其他url則轉(zhuǎn)發(fā)給前端服務(wù)器。遇到微信這個(gè)問(wèn)題后，我把前端url也統(tǒng)一加了一個(gè)前綴frontend，這樣前端url就變成了http://example.com/frontend/?...

解決辦法

所有前端url，統(tǒng)一加一個(gè)/frontend前綴

開(kāi)啟調(diào)試模式后，微信支付仍然沒(méi)有錯(cuò)誤提示

不止微信支付，JSSDK的其他接口，也經(jīng)常沒(méi)有錯(cuò)誤提示，或者提示很模糊，微信這簡(jiǎn)直是慢性謀殺。
不過(guò)我對(duì)比發(fā)現(xiàn)，ios下的各種提示，要比android下全面很多，如有必要，推薦大家在ios下進(jìn)行調(diào)試
解決辦法

使用iphone進(jìn)行開(kāi)發(fā)調(diào)試

授權(quán)回調(diào)處理

這個(gè)不算坑，只是說(shuō)下我的處理。
每次加載頁(yè)面后，我都會(huì)調(diào)用后臺(tái)接口判斷是否登陸，如果沒(méi)登陸，則跳轉(zhuǎn)回到后臺(tái)url進(jìn)行授權(quán)，授權(quán)后再跳轉(zhuǎn)回當(dāng)前頁(yè)面

微信的模板消息自動(dòng)去掉url的問(wèn)號(hào)(?)

前面解決微信簽名問(wèn)題的時(shí)候，我們給每個(gè)url特意加了一個(gè)問(wèn)號(hào)(?)，但是我發(fā)現(xiàn)，在發(fā)送微信模板消息的時(shí)候，即使給微信的url是對(duì)的，當(dāng)用戶(hù)點(diǎn)擊模板消息的時(shí)候，微信打開(kāi)的鏈接中，仍然把問(wèn)號(hào)去掉了，這個(gè)很讓人無(wú)語(yǔ)。考慮到盡量自己解決問(wèn)題的原則，最后我的解決方案是在js中進(jìn)行判斷處理，自動(dòng)把缺失的問(wèn)號(hào)加上

解決辦法

如果頁(yè)面沒(méi)有問(wèn)號(hào)(?)，則跳轉(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
  }
}

以上代碼有三個(gè)作用

自動(dòng)添加問(wèn)號(hào)(?)

自動(dòng)把分隔符由#!變成#

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

結(jié)束語(yǔ)

以上就是我在開(kāi)發(fā)過(guò)程中遇到的一些還記得的坑，歡迎大家探討

結(jié)束語(yǔ)

以上就是我在開(kāi)發(fā)過(guò)程中遇到的一些還記得的坑，歡迎大家探討

另外介紹一下我的公眾號(hào)"啟奏陛下"
這是一個(gè)提供“一句話(huà)新聞”的公眾號(hào)，沒(méi)有標(biāo)題，標(biāo)題即內(nèi)容
掃描以下二維碼可以關(guān)注

掃描以下二維碼關(guān)注

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/88120.html

相關(guān)文章

  • 使用 vue2.0 開(kāi)發(fā)微信公眾號(hào)下前后端分離的SPA站點(diǎn)的填坑之旅

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

    afishhhhh 評(píng)論0 收藏0

  • 使用 vue2.0 開(kāi)發(fā)微信公眾號(hào)下前后端分離的SPA站點(diǎn)的填坑之旅

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

    Taonce 評(píng)論0 收藏0

  • 基于 LNMP 搭建個(gè)人網(wǎng)站的填坑之旅

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

    B0B0 評(píng)論0 收藏0

  • vue開(kāi)發(fā)微信商城項(xiàng)目總結(jié)之六--關(guān)于vuex的思考

    先對(duì)項(xiàng)目進(jìn)行一下簡(jiǎn)單的介紹 vue開(kāi)發(fā)微信商城項(xiàng)目總結(jié)之一–項(xiàng)目介紹 項(xiàng)目開(kāi)發(fā)初期，由于項(xiàng)目比較著急上線(xiàn)，前端的框架在選型上比較倉(cāng)促，只是因?yàn)関ue學(xué)習(xí)成本較低，就選了它，沒(méi)有什么別的原因， 之前看過(guò)angular2一段時(shí)間，又趁著周末看了兩天vue，就倉(cāng)促開(kāi)發(fā)，所以埋下了很多坑，項(xiàng)目（項(xiàng)目目前沒(méi)有對(duì)游客開(kāi)放，是2B2C的模式）上線(xiàn)后，回頭填坑，發(fā)現(xiàn)了很多問(wèn)題，因?yàn)橹耙恢笔腔贘query模式的...

    PrototypeZ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<