微信小程序開發之webview組件內網頁實現微信原生支付

時間 2019-11-17

原文原文鏈接

前言、背景

本人目前的工做崗位是安卓工程師，在這以前對於前端和後臺的知識基本是白紙，只是在平常的工做項目中有須要和小夥伴進行對接的時候接觸了那麼一丟丟，對於前端和後臺的一些專業描述和理解有不當之處還請各位指正。php

目前部門的主營項目是一個電商項目，在本人入職以前整個項目系統的主營業務流程已經完備，也已經在正式運營，不過由於各類緣由平臺主要是在PC端和微信公衆號進行運營。小程序其實出來的挺早的，可是優先級對於咱們目前的規劃來講其實仍是很低的。直到17年11月的時候小程序推出了web-view組件，在當時被譽爲移動電商的福音&&&&$$$...此處省略五千字。html

有了web-view那什麼公衆號內容、官網、網頁有域名的那種直接就能夠扔到小程序的webview組件了，極大的減小了開發成本，就是一把梭。。。。前端

關於小程序

小程序的解釋什麼的不巴拉巴拉，直接上乾貨開發文檔就不作過多解釋微信小程序java

關於小程序web-view組件

先奉上傳送門小程序 webview相關說明和API使用官方解釋：web-view 組件是一個能夠用來承載網頁的容器，會自動鋪滿整個小程序頁面。我的類型與海外類型的小程序暫不支持使用。 web-view組件開放時間並不久，因此目前的仍是有不少侷限性的。
關於webview配置指向的連接的去小程序後臺進行配置就好（不配置webview是訪問不了的）必須支持https 如圖：git

示例代碼： github

作過微信公衆號的童鞋應該都知道，在公衆號裏商家H5頁面內調用JSSDK就能夠實現微信支付功能。可是看過webview組件的API的文檔的童鞋應該知道：webview 裏面的網頁（公衆號遷移的網頁）是調用不了外部的微信支付what....... 雖然微信支付也確實是提供了小程序的微信支付API，可是由於咱們整個小程序的內容就是一個webview嵌入公衆號內容的網頁，在網頁內下訂單的過程當中是沒法經過webview的api接口通知小程序調起微信支付的。查看微信支付小程序的支付文檔，咱們小程序若是要調用微信支付只須要獲得如下參數就能夠。
如圖：小程序調用微信支付參數

以及示例代碼：

看到這些一切就明朗了，在小程序端只要能經過某種方式獲得webview內網頁下單後的生成的相關參數就能調起微信支付從而實現webview組件內網頁微信支付。

實現方式和主要流程

先說明一下整個小程序實現webview調用支付的代碼結構如圖：

整個結構很清晰、簡單，不作過多解釋。微信小程序採用的MVVM的模式。
xxxx.wxml相似於安卓activity的xml文件。
xxxx.js相似於安卓中MVC模式的控制層。
xxxx.wxss相似於前端的CSS樣式。咱們目前幾乎沒用到，由於只用到了小程序的webview組件。

原理分析

咱們來看一下微信小程序支付的的業務流程：web

上面已經提到若是須要小程序的webview組件調起微信支付，須要網頁內部統一下單獲得支付參數，而後經過小程序API調起微信支付,以下：

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

那麼小程序如何獲得支付參數呢，查看webview的API文檔發現 webview的內部網頁能夠經過JSSDK的該API 實現webview網頁內部控制小程序。
wx.miniProgram.navigateBack 進行小程序頁面的跳轉好比咱們的項目在 index.wxml 的 webview 網頁內部使用該API就能夠控制小程序從index page 跳轉到wxpay page。小程序

具體實現步驟

1 在index.wxml文件添加webview組件，用來裝載原公衆號裏面的網頁內容
<web-view src="{{url}}"></web-view>
該url是index.js裏面data定義的一個變量``，方便經過index.js的setData方法對webview的網頁進行動態加載後端

2 新建wxpay目錄，並新建wxpay的page頁面用來處理支付邏輯。（該頁面目前是空白的，功能上分析該頁面只是爲了收到webview網頁的支付參數，從用戶使用角度上來講該頁面是一個支付頁面應該須要添加一些用戶交互的，好比轉圈QAQ）微信小程序

3 webview網頁用戶在生成訂單後，選擇微信支付即走微信的統一下單流程，生成微信支付的參數和sgin。在webview網頁內部經過path攜帶參數跳轉到wxpay頁面，具體僞代碼實現以下(註釋很清楚)：這部分是後端代碼即小程序內部網頁的代碼（在java工程中爲 .ftl文件）。個人這個方案是須要後端進行邏輯更改的。看懂的朋友應該知道只有當後端微信支付下單流程完成後才能獲得調起微信支付須要的參數。這部分都是後端實現的。只有後端下單流程完成，而後判斷是否是小程序是小程序就是下面的代碼。不是就繼續走公衆號的微信支付

//判斷是不是在wx小程序環境
if(small_wx  && data.resultCode=='success'){
  //點擊微信支付後，調取統一下單接口生成微信小程序支付須要的支付參數
  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 與小程序的支付頁面的路徑相對應
  var path = '/pages/wxpay/wxpay'+params;
  //經過JSSDK的api使小程序跳轉到指定的小程序頁面
  wx.miniProgram.navigateTo({url: path});				   			
  }
複製代碼

4 小程序端wxpay頁面邏輯實現（wxpay.js）,webview內的網頁經過wx.miniProgram.navigateTo({url: path})攜帶參數使小程序跳轉到wxpay頁面。wxpay.js 對url中攜帶的參數進行處理，而後經過wx.requestPayment調起微信支付並對支付的回調通知進行處理，具體代碼實現以下（註釋很詳細不作過多贅述）：

onLoad: function (options) {
   var that = this;
   //頁面加載調取微信支付（原則上應該對options的攜帶的參數進行校驗）
   that.requestPayment(options);
 },
//根據 obj 的參數請求wx 支付
 requestPayment: function (obj) {
   //獲取options的訂單Id
   var orderId = obj.orderId;
   //調起微信支付
   wx.requestPayment({
     //相關支付參數
     'timeStamp': obj.timestamp,
     'nonceStr': obj.nonceStr,
     'package': 'prepay_id=' + obj.prepay_id,
     'signType': obj.signType,
     'paySign': obj.paySign,
     //小程序微信支付成功的回調通知
     'success': function (res) {
       //定義小程序頁面集合
       var pages = getCurrentPages();
       //當前頁面 (wxpay page)
       var currPage = pages[pages.length - 1];  
       //上一個頁面 （index page） 
       var prevPage = pages[pages.length - 2];  
       //經過page.setData方法使index的webview 從新加載url  有點相似於後臺刷新頁面
       //此處有點相似小程序經過加載URL的方式回調通知後端 該訂單支付成功。後端邏輯不作贅述。
         prevPage.setData({
           url: "https://xxxxxxxxxx.com/wx_isPayment.jhtml?orderId=" + orderId  + '&ispay=0',
           
         }),
         //小程序主動返回到上一個頁面。即從wxpay page到index page。此時index page的webview已經從新加載了url 了
         //微信小程序的page 也有棧的概念navigateBack 至關於頁面出棧的操做
         wx.navigateBack(); 
     },
     //小程序支付失敗的回調通知
     'fail': function (res) {
       console.log("支付失敗"),
         console.log(res)
         var pages=getCurrentPages();
         var currPage = pages[pages.length - 1];   
         var prevPage = pages[pages.length - 2];  
         console.log("準備修改數據")
         prevPage.setData({
           url: "https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0' ,
         }),
           console.log("準備結束頁面")
       wx.navigateBack(); 
     }
   })
 },
複製代碼

微信支付後的回調通知，當wxpay頁面調用navigateBack的時候回到index頁面的時候webview 已經加載https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0' 這個網頁，後臺實現相關邏輯。經過orderId查詢該訂單是否支付成功。若是支付成功就網頁重定向到支付成功的頁面，若是支付失敗仍是待支付頁面。用戶依舊能夠點擊微信支付按鈕進行微信支付。
至此小程序的webview組件內網頁就能夠實現微信支付了。

see you agin

若是用原生小程序組件實現商城支付就沒這麼麻煩，可是工做量會很是巨大。直接把公衆號的網頁移植到小程序的webview裏面，極大的節省了開發時間，對於小商戶來講仍是很是方便的。咱們如今也算是偷懶把，畢竟投入不大、優先級不夠、先弄個東西出來能夠用，小程序沒有一個向服務端的wx.request請求。可是我心裏其實拒絕的。。。。。由於用戶體驗和產品角度都很low.........

補上支付的截圖嗯哼

1 webview內的網頁下單成功

熟悉開發的小夥伴應該知道出現這個頁面的時候。其實只是後端生成了一個訂單而已，這個時候和支付尚未一毛錢關係（微信支付時序圖中的生成商戶訂單）。此時用戶點擊微信支付按鈕即爲時序圖中的 5 調用統一下單API()---》生成預付單----》返回預付單信息（prepay_id）. 6 生成JSAPI頁面調用的支付參數並簽名（）返回支付參數（prepay_id, paySgin等） 以上其實都仍是微信公衆號的下單，生成支付邏輯 只有當獲得支付參數後，判斷是小程序環境才經過