Introduction, Background

I am currently working as an Android engineer. Before that, MY knowledge of front end and back end was basically blank, and I only had some contact with my friends when I needed to communicate with them in daily work projects. Please kindly point out any improper professional description and understanding of front end and back end.

At present, the main project of the department is an e-commerce project. The main business process of the whole project system was complete before I joined the company, and it was already in formal operation. However, due to various reasons, the platform was mainly operated on PC and wechat official account. Small programs actually come out quite early, but the priority for our current planning is actually very low. It wasn’t until November of ’17 that Miniprogram launched the Web-view component, hailed at the time as the Gospel of mobile e-commerce &&&&? $… Five thousand words are omitted here.

With the web-view that what the public number content, the official website, web pages have the domain name of the kind of direct can be thrown into the small program webview components, greatly reduced the development cost, is a shuttle…

About applets

Small program explanation of what not bala bala, directly on dry goods development documents do not explain too much micro channel small program

About applets Web-view components

The Web-view component is a container that can be used to host web pages. It automatically fills the entire widget page. Applets of personal type and overseas type are not supported. Web-view components have not been available for a long time, so there are many limitations to the current version. About webView configuration pointing to the link to go to the applet background configuration is good (webView is not configured to access) must support HTTPS as shown in the figure:

Sample code:


Implementation method and main process

  1. First explain the whole small program to achieve webView call payment code structure as shown in the figure:



xxxx.wxml



xxxx.js



xxxx.wxss

  1. The principle of analysis

Let’s take a look at the business process of wechat mini program payment:

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

So how does the applet get the payment parameters? Check the WebView API document to find that webView internal web pages can be realized through the JSSDK API webView internal control applet. Wx. MiniProgram. NavigateBack to small program page jump like our project in the index. The webview WXML web internal use this API can control applet from the index page jump to wxpay page.

  1. Concrete implementation steps

This url is a variable defined by data in index.js. It is convenient to dynamically load webView web pages through the setData method of index.js

2 Create a wxPay directory and create a WxPay page to process the payment logic. (The page is currently blank. Functionally, the page is only analyzed to receive payment parameters of the WebView page. From the perspective of user usage, the page is a payment page and some user interaction should be added, such as Circle QAQ)

3 WebView web page users choose wechat Pay after generating an order, i.e. go through the unified ordering process of wechat to generate wechat payment parameters and SGIN. Jump to wxPay page through path carrying parameters inside webView page, specific pseudocode implementation is as follows (notes are very clear) : this part is the back-end code, that is, the code of the internal page of the small program (.ftl file in Java project). My solution requires logical changes on the back end. Those who understand it should know that only after the ordering process of wechat pay is completed, the parameters required by wechat pay can be adjusted. This part is all implemented at the back end. Only the back-end order process is complete, and then determine whether a small program is a small program is the following code. Is not to continue to go public wechat payment

// Check if it is in the WX applet environmentif(small_wx  && data.resultCode=='success'){// After clicking wechat Pay, call up the unified ordering interface to generate the payment parameter required by wechat mini program payment 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'; // Define path to correspond to the path of the applet's payment page'/pages/wxpay/wxpay'+params; / / by JSSDK API makes small program to jump to the specified procedures page wx. MiniProgram. NavigateTo ({url: path}); }Copy the code

4 small program end wxpay page logic implementation (wxpay. Js), within webview page by wx, miniProgram. NavigateTo ({url: path} parameter carrying small program to jump to wxpay page. Wxpay.js processes the parameters carried in the URL, and then invokes wechat Pay via wx.requestPayment and processes the payment callback notification.

onLoad: function(options) { var that = this; RequestPayment (options); requestPayment(options); }, // wX pays requestPayment according to obj parameters:functionVar orderId = obj. OrderId; Wx. requestPayment({// related payment parameters'timeStamp': obj.timestamp,
     'nonceStr': obj.nonceStr,
     'package': 'prepay_id=' + obj.prepay_id,
     'signType': obj.signType,
     'paySign': obj. PaySign, // notification of successful wechat payment callback'success': function(res) {var pages = getCurrentPages(); Var currPage = pages[page.length-1]; Var prevPage = pages[page.length-2]; // The page. SetData method is used to make the index webview reload the URL, which is similar to the background page refresh. The back-end logic will not be described. prevPage.setData({ url:"https://xxxxxxxxxx.com/wx_isPayment.jhtml?orderId=" + orderId  + '&ispay=0'}), // The applet actively returns to the previous page. From wXPay page to Index Page. NavigateBack (); wx.navigateback (); wx.navigateback (); }, // The applet paid a failed callback notification'fail': function (res) {
       console.log("Payment failure"),
         console.log(res)
         var pages=getCurrentPages();
         var currPage = pages[pages.length - 1];   
         var prevPage = pages[pages.length - 2];  
         console.log("Ready to modify data")
         prevPage.setData({
           url: "https://xxxxxxxxxx/wx_isPayment.jhtml? orderId=" + orderId + '&ispay=0' ,
         }),
           console.log("Ready to close page") wx.navigateBack(); }})},Copy the code
  1. Wechat Pay is notified after a callback when wxPay page is callednavigateBackWhen you go back to the Index page, the WebView has already loadedhttps://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0'This page, the background implementation of the relevant logic. Check whether the order was paid successfully by using orderId. If the payment is successful, the page is redirected to the successful payment page, if the payment fails, the page is still waiting for payment. Users can still click the wechat Pay button to make wechat Pay.
  2. At this point, the webview component of the small program within the web page can realize wechat payment.

see you agin

If you use native applets to implement shopping mall payment is not so troublesome, but can be a huge amount of work. Directly transplant the public web page to the small program webview, greatly saving the development time, for small businesses is very convenient. We are also lazy now, after all, not enough investment, priority is not enough, first get something out to use, the small program did not make a request to the server side of the Wx. request. But my heart refuses… Because user experience and product perspective are very low………

Patch up the screenshot of the payment uh-huh

  • 1 The web page in webView has been placed successfully

Those familiar with development will know when this page appears. In fact, it is just an order generated by the back end, which has nothing to do with payment at this time (merchant orders generated in the wechat payment sequence diagram). At this point, the user clicks the wechat payment button, which is 5 in the sequence diagram to call the unified order API()– “generate the prepayment order —-” return the prepayment order information (prepay_id). 6 Generate the payment parameters of JSAPI page call and sign () return the payment parameters (prepay_id, PaySgin, etc.) in fact, the above are still wechat public account orders, generated payment logic only when the payment parameters are obtained, judgment is small program environment

var path = ‘/pages/wxpay/wxpay’+params;

// Redirect the applet to the specified applet page through the JSSDK API

wx.miniProgram.navigateTo({url: path});

This API passes the payment parameters to the WXPay Page page. At this point, the communication process is complete

Attached is the time sequence diagram of wechat official account payment for reference

  • 2 when the index WeChat payment order process is completed, through JSSDK wx. MiniProgram. NavigateTo API to pass data to the wxpay page page. When wxPay gets the parameters, verify that the parameters are correct and call wx.requestPayment to initiate wechat payment

How to contact me: Blog home page