Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge of how to make Mini Program. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

1 Analysis of the framework of Mini Program

Everyone says that Mini Program has a good experience, that is, it is ready to use, and the page startup speed and fluency are much better than the H5 rendered by ordinary Webview. I think this problem needs to be considered from several aspects. First of all, putting aside the design and optimization of the business level of the product is the characteristics of the design and implementation of the underlying framework of Mini Program.

When we create or open a Mini Program project (take the singing bar competition Mini Program as an example), we can see the project structure shown in the following figure.

Mini Program entry file is app.js, global style file is app.wxss, global configuration file is app.json, and each page is divided into view wxml,wxss and logical js, file configuration json, etc. From here we can see that the upper framework of Mini Program is roughly divided into view layer and logic layer.

Mini Program uses the MINA framework, the view layer is mainly used to render the page structure, the App Service layer is used for logical processing, data requests, interface calls, they run in two threads, the whole Mini Program has only one App Service, and it is resident in memory throughout the life cycle of Mini Program. The View layer mainly uses WebView rendering, while the App Service logical layer runs using JSCore.

In terms of communication, View and AppService communicate with each other through dual threads, mainly through JSBridage in the system layer. AppService notifies View of data changes, and the method of expression is setData, which triggers View page updates, and View notifies AppService of the triggered events for business processing.

What we want to say here is that Mini Program does not have a DOM structure, so how does view layer render? that is, the node tree structure of WXML in pages will be converted into JS objects in the runtime environment for rendering. This is also one of the major reasons why Mini Program experience is better than ordinary sharing pages, omitting a lot of browser DOM operations, and rendering and parsing between JS operating environments.

2 sing bar Mini Program ground floor building

Then again, based on a good framework, what did we actually do when we built the bottom layer of Sing Bar Mini Program?

First of all, we did not build and transform the pure Native layer, but encapsulated the API layer mentioned above, especially in terms of the transformation of network requests and the login process started by Mini Program, our front-end team tried to do some layering and optimization.

In terms of network request

First of all, in terms of network request optimization, the request interface provided by Wechat is basically like this:

Wx.request ({url: 'test.php', / / is only an example, not the real interface address data: {x:', y:'}, header: {'content-type':' application/json' / / default}, success: function (res) {console.log (res.data)}})

Does it feel like some kind of request pattern before? yes, it is the old $.ajax. At this time, we think of the callback hell of ajax. If there are many requests on the page, the order of the requests is limited, and instantly there are all kinds of nesting, which can be said to be from request to ignorance.

So in order to solve the callback hell and optimize the request code logic at the same time, while encapsulating wx.request, we introduced async/await syntax sugar into Mini Program development, using the regenerator module from facebook (please stamp: https://github.com/facebook/regenerator for details). After async and await functions are compiled by babel, the regenerator-runtime module is used to provide functional implementation. on the one hand, Mini Program supports the compilation of ES6 syntax.

During the implementation, a single public method is used to encapsulate the promise of wx.request.

/ / wechat.js const request = (url,options) = > {return new Promise ((resolve, reject) = > {wx.request ({url: url, method: options.method, data: Object.assign ({}, options.data), header: options.header, success: resolve, fail: reject})})}

After that, we write the processing logic related to the request in our upper common library.

/ / changba.js const regeneratorRuntime = require ('. / regenerator-runtime.js') const wechat = require ('. / wechat') const URI = 'xxx' const requestAPI = async (url,opt) = > {const app = getApp () let options = Object.assign ({data: {}}, opt) if (/ ^\ / api\ / (. +) $/ .test (url)) {url = URI + url;} if (! options.method) {options.method =' POST' } let header = {'Content-Type':' application/x-www-form-urlencoded'} options.header = options.header | | header; / / all APIs except login method should be added to sessionInfo, that is, session_key if (! url.includes ('/ checkCode')) {options.data ['sessionInfo'] = app.globalData.sessionkey;} let isTimeout = false; try {const ree = await wechat.checkSession () encrypted at the backend. } catch (error) {isTimeout = true;}; try {if (isTimeout) {let aaa = await login (app);} wx.showLoading ({title: 'loading'}) Const res = await wechat.request (url,options) if (res & & res.statusCode) {if (res.statusCode! = 200) {if (wx.hideLoading) {wx.hideLoading ()} wx.showModal ({content: wechat.errMsg (res.statusCode). Message | 'request failed Please try again, title: 'hint' ShowCancel: false})} else {if (res.data & & res.data.code = 1) {if (wx.hideLoading) {wx.hideLoading ()} return res.data} else { / / xxx other business logic processing}} catch (error) {console.log ('request exception information:' + error) if (wx.hideLoading) {wx.hideLoading ()} wx.showModal ({content: 'request information exception' Title:', showCancel: false})}}

In the above encapsulation process, in addition to taking into account operations such as request timeout and checking user identity, you can also add other business processing logic such as session expiration, which is also the advantage of building your own requests to match and modify them according to your own business needs.

However, after going through such two layers of encapsulation, in the process of writing the business logic code, you can send the request at a glance, achieving clear logic and easy writing. Friends who are used to fetch and axios should prefer this way.

Async getdata () {let self = this; let cb_getdata = await app.changba.requestAPI ('/ api/xxx', {data: {id: self.data.id}}); if (cb_getdata & & cb_getdata.code = 1) {/ / xxx}} above is all the content of this article, thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.