Make WeChat applet development a breeze (example)

 I have always wanted to write a related article to summarize and record the development of WeChat mini programs, but I have been procrastinating 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; {   ···  //路由跳转前逻辑处理}</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 {参数} 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 {参数} 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 {参数} 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页面跳转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 {请求传递的数据} data 
 */const request = (method, url, data) => {
  //设置请求头
  const header = {
    ···  }
  //promise封装一层，使得调用的时候直接用then和catch接收
  return new Promise((resolve, reject) => {
    wx.request({
      method: method,
      url: app.globalData.host + url, //完整的host
      data: data,
      header: header,
      success(res) {
        //对成功返回的请求进行数据管理和统一逻辑操作
        ···        resolve(res.data)
      },
      fail(err) {
        wx.showToast({
          title: '网络异常，稍后再试！',
          mask: true,
          icon: 'none',
          duration: 3000
        })
      }
    })
  })}export default request;

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

//index.js//获取应用实例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) {
        //对成功返回的请求进行数据管理和统一逻辑操作
        if(res.statusCode === 200){ //请求返回成功
          if(res.data && res.data.code === "SUCCESS"){ //后端对接口请求处理成功，返回数据给接口调用处
            resolve(res.data)  //then接收
          }else{		//后端对也请求判断后认为不合逻辑报错
            formatError(res)   //统一的报错处理逻辑
            reject(res.data) 	//catch接收
          } 
        }else{
          reject(res.data)		//catch接收
        }
      },
      fail(err) {		//请求不通报错
        wx.showToast({
          title: '网络异常，稍后再试！',
          mask: true,
          icon: 'none',
          duration: 3000
        })
      }
    })
  })}export default request;

/**
 * 对接口返回的后端错误进行格式转化
 * @param {接口成功返回的数据} 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: "" //是否已经有了confirm实例
  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({
  //监听小程序初始化
  onLaunch(options) {
    //获取小程序初始进入的页面信息
    let launchInfos = wx.getLaunchOptionsSync()
    //将当前页面路由存入全局的数据管理中
    this.globalData.currentPage = launchInfos.path  },
  ···  //全局数据存储
  globalData: globalData})

The above is the detailed content of Make WeChat applet development a breeze (example). For more information, please follow other related articles on the PHP Chinese website!