Desenvolvimento de pequenos programas diferentes

Em relação ao desenvolvimento do miniaplicativo WeChat, sempre quis escrever um resumo e registro de um artigo relacionado. Como resultado, cometi uma procrastinação e não o escrevi; este não é o clima recentemente, então encontrei uma tarde livre para publicar este artigo (parece estar relacionado ao clima Não importa)!

Nota: Este artigo presume que o desenvolvedor tem uma certa base gramatical para o desenvolvimento de miniaplicativos WeChat.

Mini Resumo do Programa

  No processo de desenvolvimento do miniaplicativo WeChat que contatamos, não é difícil descobrir que o miniaplicativo WeChat encapsula muitas apis de baixo nível para a conveniência dos desenvolvedores, como solicitações de interface wx.request(), saltos de roteamento e navegação de página wx.switchTab、wx.navigateTo···. Embora o desenvolvimento seja até certo ponto simplificado, não é suficiente para a construção sistemática da engenharia de projeto. Portanto, comparei minha experiência anterior com base em projetos de desenvolvimento Vue e meus próprios hábitos de desenvolvimento e resumi os seguintes 3 pontos de referência:

• 1. Gerenciamento unificado de variáveis ​​globais e informações de configuração;

• 2, api pacote de roteamento guarda relacionado: vue-routerem router.beforeEach()e router.afterEach()realmente incenso;
• 3. A interface solicita que as informações públicas sejam extraídas e empacotadas posteriormente;
• 4. O pedido e resposta intercepção API da interface de encapsulamento: ambos os axiosones axios.interceptors.request.use()e os axios.interceptors.response.use()mais usados são boas;

Partindo dos quatro pontos acima, padronizar e otimizar o projeto de inicialização do miniaplicativo WeChat pode melhorar muito a eficiência do desenvolvimento e o gerenciamento de manutenção do projeto. Os benefícios do encapsulamento não se refletem apenas na conveniência da invocação, mas também na conveniência do gerenciamento.Ao mesmo tempo, o processamento centralizado de operações comuns pode reduzir muito o código complicado e repetitivo.

1. Inicialização do projeto

   Crie um novo projeto de miniaplicativo WeChat e crie os seguintes diretórios e arquivos no projeto:

• pasta de configuração: gerenciamento unificado de informações e variáveis ​​configuráveis;
  • erroList.js: Erro de interface 错误码correspondente ao arquivo de lista;
  • globalData.js: 全局变量arquivo de gerenciamento unificado (equivalente a vuex);
  • keys.js: Arquivo configurável de gerenciamento de informações do sistema (nomenclatura global constante, etc.);
• Pasta de páginas: pasta de gerenciamento de arquivos de páginas de mini-programas (um diretório de subpasta para cada página);
• pasta do roteador: arquivos de gerenciamento de roteamento;
  • router.js: 5种路由导航encapsulamento da API do miniaplicativo WeChat ;
  • routerConfig.js: nome de roteamento da página e arquivo de configuração correspondente ao caminho;
  • routerFilter.js: pré- 拦截encapsulamento de roteamento ;
• arquivo de servidores: pasta de gerenciamento de serviço de solicitação de interface;
  • pasta apis: solicitar gerenciamento de pacote e pasta de gerenciamento de configuração de API de interface;
  • request.js: on wx.requesto Promisepacote;
  • xxx.js: o arquivo de gerenciamento de interface do módulo correspondente;
  • requestFilter.js: 请求和响应拦截arquivo do pacote de interface ;
• Outros são arquivos padrão inicializados;

Dois, salto de rota e encapsulamento de proteção de rota

1. Encapsulamento de salto de rota

  A documentação oficial do miniaplicativo WeChat fornece aos desenvolvedores 5 tipos de apis para roteamento de saltos, cada um com seu próprio uso específico:

  De acordo com seu uso, encapsulamos a API de roteamento da seguinte maneira: O salto de roteamento do miniaplicativo WeChat é o último correspondente push、replace、pop、relaunch、switchTab; routescorresponde à configuração do caminho de roteamento em routerFilterrouteConfig.js ; corresponde ao arquivo routerFilter.js, processando a lógica antes do salto de roteamento;

routeConfig.js (precisa ser adicionado manualmente após cada nova página):

export const routes = 
  {
    INDEX: "/pages/index/index",
    TEST: "/pages/test/test",
  }
export default {...routes};

routerFilter.js ：

export default () => {
  ···
  //路由跳转前逻辑处理
}

router.js (routerFilter é responsável pelo processamento de operações públicas antes do salto de rota, e as operações públicas após o salto de rota são processadas com sucesso e falha):

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
}

2. Registro global e uso

No app.jsroteamento do registro global api encapsulado:

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

Usado na lógica da página:

//index页面跳转test页面 
gotoTest(){
   wx.router.push("TEST")
}

Três, encapsulamento de promessa de solicitação de interface

  Para o mesmo projeto, wx.request()muitos parâmetros na API do miniaplicativo WeChat são iguais. Se você usá-lo diretamente, precisará copiar esses parâmetros repetidos várias vezes. Embora a cópia seja simples, você precisa encontrar todas as interfaces quando um parâmetro muda. Modificando um por um, requer muito esforço para manter e é desconfortável olhar para ele;

  Tirar lições do axiosencapsulamento de solicitações não seria bonito wx.request()encapsular em uma Promiseforma:

request.js ：

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;

Uso específico

Tome user.js como exemplo:

import request from "./request";

// 获取用户openid
export const usrInfos = data => request("POST", "/user/usrInfos", data);

Chamada de página de índice:

//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)
      })
  }
})

Quarto, o pacote de interceptação de resposta e solicitação de interface

  axiosO axios.interceptors.request.use()e, axios.interceptors.response.use()respectivamente, correspondem ao processamento de interceptação antes da solicitação de interface e ao processamento de interceptação após a resposta de dados; de acordo com este princípio, também interceptamos e encapsulamos a resposta do miniaplicativo WeChat e gerenciamos uniformemente a saída do erro retornado pela solicitação de interface:

request.js

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;

requestFilter.js

Você pode fazer muito processamento de erros em requestFilter.js, aqui está uma demonstração simples de processamento de notificação:

/**
 * 对接口返回的后端错误进行格式转化
 * @param {接口成功返回的数据} res 
 */
const formatError = (err =>{
  wx.showToast({
    title: err.message,
    mask: false,
    icon: 'none',
    duration: 3000
  })
}

export default formatError;

O tratamento unificado de erros requer regulamentos de dados claros:

• Formule um padrão de gerenciamento de código de erro unificado;
• Desenvolva um formato de retorno de dados de solicitação de interface unificada para front-ends e back-ends;

Cinco, gerenciamento de dados globais

  O gerenciamento de dados não é tão importante no desenvolvimento de pequenos projetos, mas conforme o projeto fica maior e mais dados, uma boa solução de gerenciamento de dados pode efetivamente evitar muitos bugs. Isso também é vuex pode estar em vue Razões para um lugar na ecologia. Aderindo ao princípio de gerenciamento de dados razoável, encapsular resolutamente os dados encapsulados e gerenciar resolutamente a configuração do gerenciamento de submódulo:

globalData.js

O gerenciamento de dados global app.jsno WeChat applet é colocado no globalDataatributo Quando há dados demais ou o app.js lógica é muito complicado, é realmente uma boa solução para extrair os dados globais e gerenciá-lo separadamente.:

export default {
  ···
  host: "http://www.wawow.xyz/api/test", //接口请求的域名和接口前缀 
  hasConfirm: "" //是否已经有了confirm实例
  currentPage: ""
  ···
}

keys.js

Keys.js é uma operação habitual no desenvolvimento pessoal. Alguns nomes constantes que podem ser usados ​​no projeto são gerenciados centralmente aqui, o que é muito conveniente para chamar, modificar e manter:

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

Referência global e registro

Apresente app.js:

import router  from "./router/router.js"
import keys from "./config/keys"
import globalData from "./config/globalData"
//全局注册
wx.router = router
wx.$KEYS = keys

//app.js
App({
  //监听小程序初始化
  onLaunch(options) {
    //获取小程序初始进入的页面信息
    let launchInfos = wx.getLaunchOptionsSync()
    //将当前页面路由存入全局的数据管理中
    this.globalData.currentPage = launchInfos.path
  },
  ···
  //全局数据存储
  globalData: globalData
})

usar

Código da lógica na página por app.globalData.host, wx.$KEYS.TOKENchamada maneira;

Seis, resumo

  Os aspectos acima do desenvolvimento do miniaplicativo WeChat são todos aprendidos e resumidos na prática. A realização técnica é realmente muito fácil, mas eu pessoalmente acho que o desenvolvimento da construção de projeto padrão é a base importante de um projeto; especificações perfeitas podem ser eficazes Melhore a eficiência do desenvolvimento e não é essencial entre os desenvolvedores 扯皮! A construção de projeto razoável pode otimizar a lógica de desenvolvimento, melhorar a legibilidade da lógica do código, reduzir o tempo de gerenciamento de projetos posteriores e dar ao projeto maior escalabilidade.

  Sejam todos bem-vindos para discutir, deixar recado e fazer suplementos!