亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue+微信支付目錄+JSSDK簽名解決方案

Little_XM / 975人閱讀

摘要：主要是用，每當(dāng)用戶第一次進(jìn)來時(shí)，去獲取一次簽名驗(yàn)證。注意只獲取一次，這樣簽名就解決了。

vue+微信支付目錄+JSSDK簽名解決方案 遇坑如下 
注意：此方法僅為個(gè)人總結(jié)，并非唯一解決方案

微信JSSDK簽名出錯(cuò)

微信支付 調(diào)起支付缺少API參數(shù)

微信支付目錄配置，只有5個(gè)配置，可能超過5個(gè)地方有配置，路由規(guī)劃

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

我所使用的技術(shù)

vue路由模式 history 模式，有兩點(diǎn)好處

history路由模式好看

history模式下可以保持頁面后退時(shí)，上一個(gè)頁面的滾動(dòng)條位置

微信JSSDK，圖片上傳，地理位置獲取，微信支付等功能

UI框架，采用vux

相應(yīng)的處理方法（作為一個(gè)非專業(yè)的前端，只能苦苦研究了) 微信JSSDK簽名出錯(cuò)

微信官方說明如下

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

經(jīng)過反復(fù)測試實(shí)驗(yàn),發(fā)現(xiàn)以下問題

IOS首次調(diào)用簽名驗(yàn)證方法后，路由變化可不再需要簽名驗(yàn)證

Android 隨著路由變化，每次都需要簽名驗(yàn)證

至此，解決方案已經(jīng)出爐

vue提供vue-router。主要是用router.beforeEach，每當(dāng)用戶第一次進(jìn)來時(shí)，去獲取一次簽名驗(yàn)證。注意：只獲取一次，這樣IOS簽名就解決了。

Android下，則需要每個(gè)頁面去獲取簽名

注意：每次簽名時(shí)，都要執(zhí)行wx.config()方法，用以更新簽名配置

微信支付相關(guān)（支付目錄配置）

問題描述

微信支付目錄要求最多配置5個(gè)目錄


支付目錄 必須細(xì)分到二級或以上

支付目錄配置規(guī)則示例

你的支付目錄如下：
例1：http://pandao.github.io/show/base
- 支付配置：http://pandao.github.io/show

例2：http://pandao.github.io/pay/show?a=2&b=3
- 支付配置 http://pandao.github.io/pay/

應(yīng)該發(fā)現(xiàn)其中的規(guī)律了吧，配置到 最后一個(gè)""/"的后面。

解決方案

將所有支付頁面的路由，統(tǒng)一加上“/pay/”，響應(yīng)的參數(shù)變更，以？a=b等

效果例如

http://pandao.github.io/pay/s...

http://pandao.github.io/pay/s...

最后 配置路徑為 http://pandao.github.io/pay/

微信授權(quán)回調(diào)

問題描述

vue history模式，需要配合后端服務(wù)器配置才能生效

相應(yīng)的配置示例

Apache


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

我采用的nginx的配置

為了將前后臺路由上區(qū)分開，微信端我的路由，均已 url/weixin/param這樣區(qū)分

所以我的配置為

location ^~ /weixin/ {
  try_files $uri $uri/ /index.html;
}

意思是，只要訪問路由是 /weixin/這樣的路由，均請求html靜態(tài)文件，這樣，不會影響，同一個(gè)域名下，接口，后臺等請求連接

前言鋪墊夠多了，下面說說 授權(quán)回調(diào)的解決方案

其實(shí)很簡單：例如我去請求 url/access？return_url="url/weixin/index"

看出來解決方法了嗎，就是去授權(quán)方法的地方，先去授權(quán)，拿到授權(quán)后，再回調(diào) return_url 中攜帶的回調(diào)地址

至此，我的敘述就結(jié)束了，由于時(shí)間緊迫，沒有詳細(xì)的貼上代碼，這是“耍流氓”的行為啊，下次完善。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/26266.html

相關(guān)文章

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

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

    yeyan1996 評論0 收藏0

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

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

    afishhhhh 評論0 收藏0

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

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

    Taonce 評論0 收藏0

  • vue項(xiàng)目接入微信JSSDK的坑

    摘要：微信說明文檔分享的坑根據(jù)的文檔，很多人都是在初始化的配置的時(shí)候，傳入的當(dāng)前的地址不正確。同樣的，給微信初始化的加入對應(yīng)的參數(shù)。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑，以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時(shí)候，心里是迷茫而又恐懼。因?yàn)?，聽說坑特別多，后來發(fā)現(xiàn)自己的親身體驗(yàn)到了這一點(diǎn)。 支付的坑 1、當(dāng)前URL未注冊 ...

    lieeps 評論0 收藏0

發(fā)表評論

0條評論

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