? I have always wanted to write a related article to summarize and record the development of WeChat mini programs, but I have been suffering from procrastination and have not started writing. The weather has been nice recently, so I found a free time. I will output this article in the afternoon (it seems to have nothing to do with the weather), then let’s get started!

Note: This article assumes that developers have a certain grammatical foundation in WeChat applet development. Mini Program Development Document

Related free learning recommendations: WeChat Mini Program Development

WeChat Summary of Mini Programs

? During the development process of WeChat Mini Programs, it is not difficult to find that WeChat Mini Programs have well encapsulated many underlying APIs for the convenience of developers, such as for interface requestswx.request(), wx.switchTab, wx.navigateTo···, etc. for routing jumps and page navigation. Although it simplifies development to a certain extent, it is still not enough for the systematic construction of project engineering. Therefore, after comparing my previous experience in developing projects based on Vue and my own development habits, I summarized the following 3 points for reference:

• 1. Unified management of global variables and configuration information;

• 2. Encapsulation of route guard related APIs: vue-routerrouter.beforeEach() and router.afterEach() are really good;

• 3. The interface requests public information for further extraction and encapsulation;

• 4. The request and response interception API of the encapsulated interface: axios.interceptors.request.use() and axios of axios. interceptors.response.use()Everyone who has used it says it is good;

Starting from the above four points, standardizing and optimizing the WeChat applet initialization project can greatly improve Development efficiency and project maintenance management. The benefits of encapsulation are not only reflected in the convenience of calling, but also in the convenience of management. At the same time, public operations are processed centrally, which greatly reduces complex and repetitive code.

1. Project Initialization

? Create a new WeChat applet project, and create the following directories and files under the project:

• config folder: Unified management of configurable information and variables;
  • erroList.js: Interface error reportingError codeMatching list file;
  • globalData.js:Global variablesUnified management files (equivalent to vuex);
  • keys.js: Configurable system information management files (global constant naming, etc.);
• pages folder: small Program page file management folder (one sub-folder directory for each page);
• router folder: routing management file;
  • router.js: WeChat applet5 A kind of routing navigationapi encapsulation;
  • routerConfig.js: page routing name and path matching configuration file;
  • routerFilter.js: route prefixinterceptionencapsulation ;
• servers file: interface request service management folder;
  • apis folder: request request encapsulation management and interface api configuration management folder;
    • request.js: Promise encapsulation of wx.request;
    • xxx.js: The interface management file of the corresponding module;
  • requestFilter.js: InterfaceRequest and response interceptionEncapsulation file;
##Others are initialization default files;

2. Route jump and route guard encapsulation

1. Route jump encapsulation

push, replace, pop, relaunch, switchTab

routes corresponds to the configuration of the routing path in routeConfig.js;

Corresponds to the routerFilter.js file, which processes the logic before route jump; routeConfig.js (needs to be added manually after each new page): <pre class="brush:php;toolbar:false">export?const?routes?=? ??{ ????INDEX:?&quot;/pages/index/index&quot;, ????TEST:?&quot;/pages/test/test&quot;, ??}export?default?{...routes};</pre>routerFilter.js: <pre class="brush:php;toolbar:false">export?default?()?=&gt;?{ ??···??//路由跳轉(zhuǎn)前邏輯處理}</pre>router.js (routerFilter is responsible for processing public operations before routing jumps, and processing public operations after routing jumps in success and fail):

import?routes?from?"../router/routerConfig";import?routerFilter?from?"./routerFilter"/**
?*?對wx.navigateTo的封裝
?*?@param?{路由}?path?
?*?@param?{參數(shù)}?params?
?*?@param?{事件}?events?
?*/const?push?=?(path,?params,?events)?=>?{
??routerFilter()
??wx.navigateTo({
????url:?routes[path]?+?`?query=${JSON.stringify(params)}`,
????events:?events,
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}/**
?*?對wx.redirectTo的封裝
?*?@param?{路由}?path?
?*?@param?{參數(shù)}?params?
?*/const?replace?=?(path,?params)?=>?{
??routerFilter()
??wx.redirectTo({
????url:?routes[path]?+?`?query=${JSON.stringify(params)}`,
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}/**
?*?對wx.navigateBack的封裝
?*?@param?{返回的層級}?number?
?*/const?pop?=?(number)?=>?{
??routerFilter()
??wx.navigateBack({
????delta:?number,
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}/**
?*?對wx.reLaunch的封裝
?*?@param?{路由}?path?
?*?@param?{參數(shù)}?params?
?*/const?relaunch?=?(path,?params)?=>?{
??routerFilter()
??wx.reLaunch({
????url:?routes[path]?+?`?query=${JSON.stringify(params)}`,
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}/**
?*?對tabbar的封裝
?*?@param?{路由}?path?
?*/const?switchTab?=?(path)?=>?{
??routerFilter()
??wx.switchTab({
????url:?routes[path],
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}module.exports?=?{
??push,
??replace,
??pop,
??relaunch,
??switchTab}

Global registration of the encapsulated routing api in

:

import?router??from?"./router/router.js"//全局注冊wx.router?=?router

//index頁面跳轉(zhuǎn)test頁面?gotoTest(){
???wx.router.push("TEST")}

3. Interface request Promise encapsulation

?For the same project, many parameters in the WeChat applet api

are the same , if used directly, these repeated parameters need to be copied over and over again. Although copying is very simple, when a parameter changes, all interfaces need to be found and modified one by one, which is laborious to maintain and uncomfortable to watch;

import?formatError?from?"../requestFilter"const?app?=?getApp()/**
?*?接口請求封裝
?*?@param?{請求方式}?method?
?*?@param?{請求的url}?url?
?*?@param?{請求傳遞的數(shù)據(jù)}?data?
?*/const?request?=?(method,?url,?data)?=>?{
??//設(shè)置請求頭
??const?header?=?{
????···??}
??//promise封裝一層，使得調(diào)用的時(shí)候直接用then和catch接收
??return?new?Promise((resolve,?reject)?=>?{
????wx.request({
??????method:?method,
??????url:?app.globalData.host?+?url,?//完整的host
??????data:?data,
??????header:?header,
??????success(res)?{
????????//對成功返回的請求進(jìn)行數(shù)據(jù)管理和統(tǒng)一邏輯操作
????????···????????resolve(res.data)
??????},
??????fail(err)?{
????????wx.showToast({
??????????title:?'網(wǎng)絡(luò)異常，稍后再試！',
??????????mask:?true,
??????????icon:?'none',
??????????duration:?3000
????????})
??????}
????})
??})}export?default?request;

import?request?from?"./request";//?獲取用戶openidexport?const?usrInfos?=?data?=>?request("POST",?"/user/usrInfos",?data);

//index.js//獲取應(yīng)用實(shí)例const?app?=?getApp()import?{?usrInfos?}?from?"../../servers/apis/user"Page({
??onLoad:?function?()?{
????//獲取用戶信息
????usrInfos({
??????uid:?"xxxx"
????})
??????.then(res?=>?{
????????console.log(res)
??????})
??????.catch(err?=>?{
????????console.log(err)
??????})
??}})

import?formatError?from?"../requestFilter"const?app?=?getApp()···const?request?=?(method,?url,?data)?=>?{
??···??return?new?Promise((resolve,?reject)?=>?{
????wx.request({
??????···??????success(res)?{
????????//對成功返回的請求進(jìn)行數(shù)據(jù)管理和統(tǒng)一邏輯操作
????????if(res.statusCode?===?200){?//請求返回成功
??????????if(res.data?&&?res.data.code?===?"SUCCESS"){?//后端對接口請求處理成功，返回?cái)?shù)據(jù)給接口調(diào)用處
????????????resolve(res.data)??//then接收
??????????}else{		//后端對也請求判斷后認(rèn)為不合邏輯報(bào)錯(cuò)
????????????formatError(res)???//統(tǒng)一的報(bào)錯(cuò)處理邏輯
????????????reject(res.data)?	//catch接收
??????????}?
????????}else{
??????????reject(res.data)		//catch接收
????????}
??????},
??????fail(err)?{		//請求不通報(bào)錯(cuò)
????????wx.showToast({
??????????title:?'網(wǎng)絡(luò)異常，稍后再試！',
??????????mask:?true,
??????????icon:?'none',
??????????duration:?3000
????????})
??????}
????})
??})}export?default?request;

/**
?*?對接口返回的后端錯(cuò)誤進(jìn)行格式轉(zhuǎn)化
?*?@param?{接口成功返回的數(shù)據(jù)}?res?
?*/const?formatError?=?(err?=>{
??wx.showToast({
????title:?err.message,
????mask:?false,
????icon:?'none',
????duration:?3000
??})}export?default?formatError;

export?default?{
??···
??host:?"http://www.wawow.xyz/api/test",?//接口請求的域名和接口前綴?
??hasConfirm:?""?//是否已經(jīng)有了confirm實(shí)例
??currentPage:?""
??···}

export?default?{
??···??TOKEN:?"token",
??STORAGEITEM:?"test"
??···}

import?router??from?"./router/router.js"import?keys?from?"./config/keys"import?globalData?from?"./config/globalData"//全局注冊wx.router?=?router
wx.$KEYS?=?keys//app.jsApp({
??//監(jiān)聽小程序初始化
??onLaunch(options)?{
????//獲取小程序初始進(jìn)入的頁面信息
????let?launchInfos?=?wx.getLaunchOptionsSync()
????//將當(dāng)前頁面路由存入全局的數(shù)據(jù)管理中
????this.globalData.currentPage?=?launchInfos.path??},
??···??//全局?jǐn)?shù)據(jù)存儲
??globalData:?globalData})

The above is the detailed content of How to develop WeChat mini programs like a duck in water. For more information, please follow other related articles on the PHP Chinese website!