A man must sharpen his tools before he sharpens them

1, first introduce the creation of small program, directory structure, subcontracting, subcontracting preloading

Create not to say, directory structure depends on the individual, radish green vegetables to love, their own configuration directory structure can be more familiar, more quickly improve the efficiency of development attach a copy of their own directory:

Let’s talk about subcontracting: The subcontract is to increase the volume of small programs, increase the small program running speed, load in the small program to avoid all one-time loading page cause caton, not user-friendly, use the subcontract preload can be specified in the user enters a page to load a subcontract, the content of the faster increase the speed of open, specific or go to a document Or watch app. Json file

In preloadRule, when entering a page of the applet, the framework automatically preloads the subcontracting that may be required, which increases the startup speed of subsequent subcontracting pages. Preloading the packageA when entering 'Pages /index/index'; When entering 'Pages /my/my', the subpackage is preloaded; Packages can be set to pre-download the root or name of the package upon entering the page. __APP__ indicates that the main package network can be set to all: unlimited network, wifi: only wifi pre-download independent subcontracting is not used, see the documentation for detailsCopy the code

2. Encapsulate request files and create API unified management files

1. Encapsulate the request.js request file

Now that the applets fully support asynchronous processing of promises, let’s further encapsulate wx.Request to achieve a global reference. To start with the code, create the request.js file in your utils folder

Copy code:

/ / formal version appid / / const baseUrl = "http://49.233.133.232:7001"; Const baseUrl = "http://127.0.0.1:7001"; const header = { "content-type": "application/json", }; // The default is "content-type": "application/x-www-form-urlencoded" const HTTP = ({url = "", param = {},... other } = {}) => { if (param.that ! = undefined) { let tips = ""; if (param.tips ! = null) { tips = param.tips; delete param.tips; } var that = param.that; that.selectComponent("#my_loading").onIsState(tips); delete param.that; } // If you do not need the success message returned from the background, you can customize the success message in the submission parameter. Add MSG to the parameter param. = undefined) { var msg = param.msg; delete param.msg; } else { var msg = ""; If you do not need the error message returned in the background, you can customize the error message in the submission parameter. Add err_msg to the parameter param and bring it to if (param.err_msg! = undefined) { var err_msg = param.err_msg; delete param.err_msg; } else { var err_msg = ""; } wx.getStorage({ key: "token", success(res) { header.token = res.data; }}); if (param.token ! = undefined) { delete param.token; header.token = param.token; } let timeStart = Date.now(); return new Promise((resolve) => { setTimeout(() => { wx.request({ url: getUrl(url), data: param, header: header, ... other, complete: (res) => { if (that ! = undefined) { that.selectComponent("#my_loading").onIsState(); // Disable loading} console.log(' time ${date.now () - timeStart} '); If (res.statusCode == 500) {wx.lin.showMessage({type: "warning", duration: 4000, content: "System error ~ please inform the administrator ",}); return; } if (res.statusCode == 404) {wx.lin.showMessage({type: "warning", duration: 4000, content: "System busy ~ please try again later ",}); return; } if (res.data.code == 505) {wx.lin.showMessage({type: "warning", duration: 4000, content: "Please authorize and try again ",}); wx.loginAlert(); } if (res.data.code == 200) {if (MSG! = "") { wx.lin.showMessage({ type: "success", duration: 2000, content: msg == "api" ? res.data.msg : msg, }); } } else if (res.data.code == 500 || res.data.code == 400) { if (err_msg ! = "") { wx.lin.showMessage({ type: "warning", duration: 4000, content: err_msg == "api" ? res.data.msg : err_msg, }); } } else if (res.data.code ! = 404 && res.data.code ! = 0) { wx.lin.showMessage({ type: "warning", duration: 2000, content: res.data.msg, }); } resolve(res.data); }}); }, 200); }); }; Const getUrl = (url) = > {the if (url. IndexOf (" : / / ") = = 1) {if (url. The search (/ v [0-9] {1, 2} /)! = -1) url = baseUrl_v2 + url; else { url = baseUrl + url; } } return url; }; // get const getMethods = (url, param = {}) => {return HTTP ({url, param,}); }; const postMethods = (url, param = {}) => { return http({ url, param, method: "post", }); }; const putMethods = (url, param = {}) => { return http({ url, param, method: "put", }); }; const deleteMethods = (url, param = {}) => { return http({ url, param, method: "put", }); }; module.exports = { baseUrl, getMethods, postMethods, putMethods, deleteMethods, };Copy the code

In the page JS that you want to use

const request = require('.. /.. /utils/request.js')Copy the code

Call the corresponding request methods separately for example:

Request.getmethods ('/ XXXXX ',param).then(res=>{// your business code})Copy the code

Or use async/await

async afunction (){
	let res = await request.getMethods('/xxxxx',param)
    console.log("res",res)
}
Copy the code

Create a public API management file

For unified API management, it is recommended to create the API folder in the file directory and create the corresponding module file, such as user center user.js.

const request = require(".. /utils/request.js"); const userInfo = () => return request.getMethods("/userinfo"); const userLogin = (param) => return request.getMethods("/xxxlogin",param); module.exports = { userInfo,userLogin };Copy the code

Import the corresponding module file on the page you want to use

Example:

const { userInfo,userLogin } = require(".. /.. /api/user"); userInfo().then((res) => { console.log("res", res); });Copy the code

Or use async/await:

async afunction (){
	let res = await userInfo(param)
    console.log("res",res)
}

Copy the code

There are a lot of if/else in request.js. Just kill them. I won’t deal with them hahaha

3. Component selection

There are a wide variety of UI components on the market, and choosing the right one for you is like holding a sword in your hand and excelling in daily development. Here is a personal introduction to familiar component libraries:

  • The official WeUI component library link: developers.weixin.qq.com/miniprogram…

    WeUI WXSS is a small program version of Tencent’s official UI component library WeUI, providing a user experience consistent with the style of wechat interface. But its component is single, style is not rich enough, it is difficult to do in the work take it to use ha ha (personal is a hand party)

  • IView Is a mini-program version of a library of high-quality vue.js-based components published by TalkingData.

    GitHub address: github.com/TalkingData…

    I did use the iVIEW-appellate component library in the early stage. However, I did not use it anymore when I tried to use some components that were not friendly to me

  • Vant Weapp

    Vant Appellate is a appellate version of Vant, a mobile Vue component library, that provides a consistent API to help developers quickly build appellate apps based on the same visual specifications. Advantages: various components, as well as business pages, take to use disadvantages: not good to modify, corresponding to their own UI page, modify up trouble, and a bit bloated

  • Lin UI

Lin UI is a component library based on the native syntax of wechat applet. Follow simple, easy-to-use design specifications. Advantages: Easy to use, unified specifications, rich documentation, strong scalability, support for third-party library framework Disadvantages: low fire

Lin-ui is the second component library for me to use, not to say that I limit myself to one component library and blame other component libraries. Personally, Lin-UI is a great help to those who are new to small programs and want to be familiar with component-based development. From the component code, we can see the sincerity of the wind in the Woods team. I’ve looked at the code for other components, and lin-UI, by contrast, is really beginner friendly, making it easy for veterans to make secondary modifications to match their own company’s UI design.

** is not a promise, but a recommendation

This is followed by some encapsulation of global components that need to be updated…