前言、背景

本人(rén)目前的(de)工(gōng)作(zuò)崗位是(shì)安卓工(gΩ♥ōng)程師(shī)，在這(zhè)之前對(duì)于前端和(hé)後πλ台的(de)知(zhī)識基本是(shì)白(bái)紙δ® (zhǐ)，隻是(shì)在日(rì)常的(de)工(gōng)作(zuò)項目中ε♦ 有(yǒu)需要(yào)和(hé)小(xiǎo)夥伴進行§&(xíng)對(duì)接的(de)時(shí)候接觸了(le± ≥)那(nà)麽一(yī)丢丢，對(duì)于前端和(hé)後台的(d≠γe)一(yī)些(xiē)專業(yè)描述和(hé)理(lǐ)解有(yǒu)不♥λ★(bù)當之處還(hái)請(qǐng)各位指正。

目前部門(mén)的(de)主營項目是(shì)一(yī)個(gè)電'‍σ★(diàn)商項目，在本人(rén)入職之前整個(gè)項目系γε 統的(de)主營業(yè)務流程已經完備，也(yě)已經在正式運營，不(bù)過因為(←₽≤wèi)各種原因平台主要(yào)是(shì)在PC端和(hé)微(wēi)信公衆号∏♦進行(xíng)運營。小(xiǎo)程序其實出來(lái)的(de)挺早的 ∑÷(de)，但(dàn)是(shì)優先級對(duì)于我們目前的(de)規劃來(lái)α•≠說(shuō)其實還(hái)是(shì)很(hěn)低(dī∞φ∏₽)的(de)。直到(dào)17年(nián)11月(€®♦♦yuè)的(de)時(shí)候小(xiǎo)程序推出了(le)web-view組件(jiàn)，在當時(shí)被譽為(wèi)移動電(diàn∞✔$)商的(de)福音(yīn)&&&amε ★×p;&$$$...此處省略五千字。

有(yǒu)了(le)web-view那(nà)什(shén)麽公衆号內(nèiπ"​)容、官網、網頁有(yǒu)域名的(de)那(nà)種直接就(jiù)可(k​≥ě)以扔到(dào)小(xiǎo)程序的(de)webview組件(j↑<iàn)了(le)，極大(dà)的(de)減少(shǎo)了(le)開(kāi)發成本，就(jiùε✔≠)是(shì)一(yī)把梭。。。。

關于小(xiǎo)程序

小(xiǎo)程序的(de)解釋什(shén)麽的(de)不(bù)巴拉巴拉，直接上(shà​Ω δng)幹貨開(kāi)發文(wén)檔就(jiù)不(bù)做(zuò≥×)過多(duō)解釋 微(wēi)信小(xiǎo)程序

關于小(xiǎo)程序web-view組件(jiàn)

先奉上(shàng)傳送門(mén)小(xiǎo)程序 webviewσ∑®​相(xiàng)關說(shuō)明(míng)和(hé)API使用(yòng) 官方解釋λ₽♠：web-view 組件(jiàn)是(shì)一(yī)個(gè)可(kě)以用(yòng)來★Ω$(lái)承載網頁的(de)容器(qì)，會(huì)自(zì)動鋪滿整個(gè★β)小(xiǎo)程序頁面。個(gè)人(rén)類型與海(hǎi)外(wài)類型的(de)小(xiǎo)程序暫不(bù)✔ ♠φ支持使用(yòng)。 web-view組件(jiàn)開(kāi)放(fàβ'ng)時(shí)間(jiān)并不(bù)久，所以目前的(de)還(hái)是(sh ‍•ì)有(yǒu)很(hěn)多(duō)局限性的(de)。
關于webview配置指向的(de)鏈接的(de)去(qù)小(xiǎo)程序後台↓∞α進行(xíng)配置就(jiù)好(hǎo)（不(bù)配置webvie€₽$★w是(shì)訪問(wèn)不(bù)了(le)的(d£∞☆e)）必須支持https 如(rú)圖：

示例代碼：

做(zuò)過微(wēi)信公衆号的(de)童鞋應該都(dōu)知(zhī)道(dào)€¶±€，在公衆号裡(lǐ)商家(jiā)H5頁面內(nèi)調用(yòn↕Ω ★g)JSSDK就(jiù)可(kě)以實現(xiàn)微(wēi)信支付功能(né§γ≈ng)。但(dàn)是(shì)看(kàn)過webview組件¥ (jiàn)的(de)API的(de)文(wén)檔的(de)童鞋應該知(z★≥hī)道(dào)：webview 裡(lǐ)面的(de)網頁（公衆号遷移的©→£(de)網頁）是(shì)調用(yòng)不(bù)了(le)外(wài)部πλ≤ 的(de)微(wēi)信支付what....... 雖然微(wēi)信支付也•€ (yě)确實是(shì)提供了(le)小(xiǎo)♠§≤↓程序的(de)微(wēi)信支付API，但(dàn)是(shì)因γΩ​Ω為(wèi)我們整個(gè)小(xiǎo)程序的(de)內(nèi)容 ✔就(jiù)是(shì)一(yī)個(gè)webview嵌入公衆号內★β (nèi)容的(de)網頁，在網頁內(nèi)下(xi€₹à)訂單的(de)過程中是(shì)無法通(tōng)過"☆ &webview的(de)api接口通(tōng)知(zh® ε§ī)小(xiǎo)程序調起微(wēi)信支付的(de)。 查看(kàn)微(wēi)信支✔‍付小(xiǎo)程序的(de)支付文(wén)檔，我們小(≤​♥₽xiǎo)程序如(rú)果要(yào)調用(yòng)微(wēi)信支付隻需要¥§(yào)得(de)到(dào)以下(xià)參數(shù)就(jiù)可(kě)以。
如(rú)圖：小(xiǎo)程序調用(yòng)微(wēi)信支>♣±付參數(shù)

以及示例代碼：

看(kàn)到(dào)這(zhè)些(xiē)一(yī)切就(jiù​&∞Ω)明(míng)朗了(le)，在小(xiǎo)程序端隻要(‍&yào)能(néng)通(tōng)過某種方式得(de)到(dào)web↑→>×view內(nèi)網頁下(xià)單後的(de)生(π'shēng)成的(de)相(xiàng)關參數(shù)就(jiù)能‌λ∑>(néng)調起微(wēi)信支付從(cóng)而實現(x™"​€iàn)webview組件(jiàn)內(nèi)網頁微(wēi)信支付。

實現(xiàn)方式和(hé)主要(yào)流程

1. 先說(shuō)明(míng)一(yī)下(xià)整個(gè)小(xiǎo)程&§序實現(xiàn)webview調用(yòng)支付的(de)代碼®Ω™結構如(rú)圖：

整個(gè)結構很(hěn)清晰、簡單，不(bù)做(zuò)過多(duō)解釋  ¶。微(wēi)信小(xiǎo)程序采用(yòng)的(de)MVVM的(de)模式。
xxxx.wxml類似于安卓activity的(de)xml文(wén)件(jiàn)。
xxxx.js類似于安卓中MVC模式的(de)控制(zhì)層。
xxxx.wxss類似于前端的(de)CSS樣式。我們目前幾乎沒用(yòng)到(dào)，×≤β因為(wèi)隻用(yòng)到(dào)了(le)小(xiǎo) δ™ 程序的(de)webview組件(jiàn)。

2. 原理(lǐ)分(fēn)析

我們來(lái)看(kàn)一(yī)下(xià)微(wēi)信小(xiǎo)程序支付的(de)✘✔§的(de)業(yè)務流程：

上(shàng)面已經提到(dào)如(rú)果需要(yào)小(xiǎo)程β♥♠序的(de)webview組件(jiàn)調起微(wēi)信支付，需要(yà→♥"≈o)網頁內(nèi)部統一(yī)下(xià)單得(de)到(dào)支付參數(shù↔✔)，然後通(tōng)過小(xiǎo)程序API調起微(wēi)信支付,如(rúασ♠)下(xià)：

wx.requestPayment(
{
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){},
'fail':function(res){},
'complete':function(res){}
})

那(nà)麽小(xiǎo)程序如(rú)何得(de)到(dà↓★‌o)支付參數(shù)呢(ne)，查看(kàn)webview的(de)AP↑¥ I文(wén)檔發現(xiàn) webview的(de)內(nèi)部網頁可(kě)以通(tōn ×✔g)過JSSDK的(de)該API 實現(xiàn)webview網頁內(nèi)部控< φ®制(zhì)小(xiǎo)程序。
wx.miniProgram.navigateBack 進行(xíng)小(xiǎo)程序頁面的(de)跳(tiào)轉比如(rú)我們的(de‍​♠)項目在 index.wxml 的(de) webvieπ★σ​w 網頁內(nèi)部使用(yòng)該API就(jiù)可(kě)以≈✔控制(zhì)小(xiǎo)程序從(cóng)index pa€ ¥δge 跳(tiào)轉到(dào)wxpay page。

3. 具體(tǐ)實現(xiàn)步驟

1 在index.wxml文(wén)件(jiàn)添加w'₽∞✘ebview組件(jiàn)，用(yòng)來(lái)裝載原公衆号裡(lǐ)面的(de)網頁內(®"nèi)容
<web-view src="https://www.wxapp-union.com/{××{url}}"></web-view>♦"γ ;
該url是(shì)index.js裡(lǐ)面data定義的(de)一(yī)個(gè)≈★變量``，方便通(tōng)過index.js的(de)setData方法對(duì)w∑♠ebview的(de)網頁進行(xíng)動态加載

2 新建wxpay目錄，并新建wxpay的(de)page頁面用(yòng)↕¥☆☆來(lái)處理(lǐ)支付邏輯。（該頁面目前是(shì)空(kōng)白(bᥥi)的(de)，功能(néng)上(shàng)分(fēn)析該頁面隻是(shì γ→)為(wèi)了(le)收到(dào)webview網頁的(de)支付參數(shù‌™φ¶)，從(cóng)用(yòng)戶使用(yòng)角度上(shàng)來(lái)說 →"(shuō)該頁面是(shì)一(yī)個(gè)支付頁面應該需要(yào)添加一(yī ‍↓€)些(xiē)用(yòng)戶交互的(de)，比如(rú)轉圈QAQ）βΩΩ®

3 webview網頁用(yòng)戶在生(shēng)成訂單後，選擇微(w•φēi)信支付即走微(wēi)信的(de)統一(yī)下(xià)單流程，生(shēng←₩→)成微(wēi)信支付的(de)參數(shù)和(hé)sgin。在web ✔σ×view網頁內(nèi)部通(tōng)過path攜帶參✔≤≠β數(shù)跳(tiào)轉到(dào)wxpay頁面，具體(tǐ)僞代碼實現(xiàn)如✘♣(rú)下(xià)(注釋很(hěn)清楚)：

//判斷是(shì)否是(shì)在wx小(xiǎo)程序環境
if(small_wx  && data.re<εsultCode=='success'){
  //點擊微(wēi)信支付後，調取統一(yī)下(xià)單接口生(shēn↓€♣♣g)成微(wēi)信小(xiǎo)程序支付需要(yào)的(de)支付參數(sh×$ù)
  var params = '?timestamp='+data.jsparams.timeStamp+'&nonceStr='+data.jsparams.nonceStr
               +'&'+data.jsparams.pkg+'&signType='+data.jsparams.signType
         ₹↓&      +'&paySign='+data.jsparams.paySign+'&orderId='+data.orderid+'&pType=0';
  //定義path 與小(xiǎo)程序的(de)支付頁面®±©的(de)路(lù)徑相(xiàng)對(duì)應
±↑☆
  var path = '/pages/wxpay/wxpay'+params;
  //通(tōng)過JSSDK的(de)api使小(σ"&xiǎo)程序跳(tiào)轉到(dào)指定的(de)小(xiǎo)程序頁面
₩φ₩•  wx.miniProgram.navigateTo({url: pa₽™♥th});				   			
  }

4 小(xiǎo)程序端wxpay頁面邏輯實現(xiàn)（wxpay.j ‍s）,webview內(nèi)的(de)網頁通(tōng)過wx.miniProgram.navigateTo({urβ≤$λl: path})攜帶參數(shù)使小(xiǎo)程序跳(tiào)轉到(dào)wxpay頁面。wxpay.☆εjs 對(duì)url中攜帶的(de)參數(shù)進行(xíng)處理   Ω(lǐ)，然後通(tōng)過wx.requestPayment調起微(wēi)信支付并對(duì)支付的(de)回調通(tōng)知(zhī)進行(xíng)★​↔處理(lǐ)，具體(tǐ)代碼實現(xiàn)如(r☆≠"•ú)下(xià)（注釋很(hěn)詳細不(bù)做(zuò)過多(duō)贅述）：→∞

onLoad: function (options) {
   var that = this;
$'♥   //頁面加載調取微(wēi)信支付（原則上(shàng)應該對(duì)options的(d​↓e)攜帶的(de)參數(shù)進行(xíng)校(xiào)驗）
   that.reques✘λ§tPayment(options);
 },
//根據 obj 的(de)參₽¥數(shù)請(qǐng)求wx 支付
 requestPayment: function (obj) {
   //獲取options的(de)訂單Id
   var ≤↑orderId = obj.orderId;
   //調起微(wēi)信支付
   wσ®‌÷x.requestPayment({
     //相(xiàng)關支付參數(shù)
     'timeStamp': obj.timestamp,
     'nonceStr': obj.nonceStr,
     'package': 'prepay_id=' + obj.prepay_id,
     'signType': obj.signType,
     'paySign': obj.paySign,
     //小(x§<iǎo)程序微(wēi)信支付成功的(de)回調通(tōng)知(zhī)
     'success': function (res) {
       //定義小(xiǎo)程序頁面集合
       var p&>ages = getCurrentPages();
      ♦↕ //當前頁面 (wxpay page)
       va§♦r currPage = pages[pages.length - 1];  
       /© /上(shàng)一(yī)個(gè)頁面 （index page） 
       var ​ ∑prevPage = pages[pages.length - 2];  
  '±↑     //通(tōng)過page.setData≈φ​方法使index的(de)webview 重新加載url  有(yǒu)點類似于後台刷新頁面
☆∑←
       //此處有(yǒu)點類似小(xiǎo)程序通(t♣←£<ōng)過加載URL的(de)方式回調通(tōng)知(zhī)後端 該訂單支$σ<σ付成功。後端邏輯不(bù)做(zuò)贅述。
         prevPage.setDat®¶↓€a({
           url: "https://xxxxxxxxxx.com/wx_isPay☆→↔ ment.jhtml?orderId=" + orderId  + '&ispay=0',
           
         }),
         //小(x×>iǎo)程序主動返回到(dào)上(shàng)一(yī)個(gè)頁面。即從(c★&∑óng)wxpay page到(dào)index page。此時(shí)ind∞®÷εex page的(de)webview已經重新加載了(le)url 了(le)
 ≥∏
         //微(wēi)信小(xiǎo)程序的(de)page 也(yě)​ 有(yǒu)棧的(de)概念navigateBack 相γ₹(xiàng)當于頁面出棧的(de)操作(zuò)
      ₹φ   wx.navigateBack(); 
     },
     //小(xiǎo•')程序支付失敗的(de)回調通(tōng)知(zhī)
     'fail': function (res) {
       console.lo←♦g("支付失敗"),
         console.log(res)¶&'
         var pages=getCu∏↓↕♣rrentPages();
         var cur€δ≤αrPage = pages[pages.length - 1]; <↕  
         var prevPage = pages[pages.length -↕  2];  
         console.log("準備修改數(shù)據")
         prevPage.setData→≠‍({
           url: "https://xxxxxxxxxx/wx_isPayment.jhtml?orderId¥ =" + orderId + '&ispay=0' ,
         }),
           console.log("準備結束頁面")
       wx.navigateBack(); 
     }
™®>
   })
 },

5. 微(wēi)信支付後的(de)回調通(tōng)知(zhī)，當wxpay頁面調用(₩‌βyòng)navigateBack的(de)時(shí)候回到(dào)index頁面的(de÷δ)時(shí)候webview 已經加載https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" +♦< ↕ orderId + '&ispay=0' 這(zhè)個(gè)網頁，後台實現(xiàn)相(xi₩‌àng)關邏輯。通(tōng)過orderId查詢該訂單是(shì)否支★•付成功。如(rú)果支付成功就(jiù)網頁重定向到(dào)支付成功的λ∑™(de)頁面，如(rú)果支付失敗還(hái)是(shì)待支付頁面。用(yò₩®ng)戶依舊(jiù)可(kě)以點擊微(wēi)信支付按鈕進∞$行(xíng)微(wēi)信支付。
6. 至此小(xiǎo)程序的(de)webview組件(jiàn)內(nèi)網頁就(jiù)可(kěε≥)以實現(xiàn)微(wēi)信支付了(le)。

see you agin

如(rú)果用(yòng)原生(shēng)小(xiǎo)程序組件(jiàn)實現(xiàn)商城≠$(chéng)支付就(jiù)沒這(zhè)麽麻煩，但(dàn)是(sh♣α‍ì)工(gōng)作(zuò)量會(huì)非常巨大(dà) π​§。直接把公衆号的(de)網頁移植到(dào)小(xiǎo)程序的(de)webview裡★→(lǐ)面，極大(dà)的(de)節省了(le)開(kāi)發時(shí)間(jiān)，對(≈✘π♦duì)于小(xiǎo)商戶來(lái)說(shuō)還(π hái)是(shì)非常方便的(de)。我們現(xiàn)在✘£≥也(yě)算(suàn)是(shì)偷懶把，畢竟投入不(bù♠≠)大(dà)、優先級不(bù)夠、先弄個(gè)東(dōn→÷®g)西(xī)出來(lái)可(kě)以用(yòng)，小(xiǎo)程序沒有(yǒu)一(yī&δ)個(gè)向服務端的(de)wx.request請(qǐng)求。但(dàn)是(shì)我內(nèi)心其Ω★✔∏實拒絕的(de)。。。。。因為(wèi)用(yòng)戶體(tǐ)驗和(h↕$‌é)産品角度都(dōu)很(hěn)low.........