成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Little_XM / 914人閱讀

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

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

微信JSSDK簽名出錯(cuò)

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

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

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

我所使用的技術(shù)

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

history路由模式好看

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

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

UI框架，采用vux

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

微信官方說(shuō)明如下

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

經(jīng)過(guò)反復(fù)測(cè)試實(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)來(lái)時(shí)，去獲取一次簽名驗(yàn)證。注意：只獲取一次，這樣IOS簽名就解決了。

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

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

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

問題描述

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


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

支付目錄配置規(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è)""/"的后面。

解決方案

將所有支付頁(yè)面的路由，統(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的配置

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

所以我的配置為

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

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

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

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

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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