让微信小程序开发如鱼得水的方法（微信小程序开发详细教程）

一直想写一篇关于微信小程序开发的相关文章总结和记录，结果一拖再拖。最近天气不错，找个空闲的下午输出这篇文章（好像和天气无关），开始吧！

注:默认情况下，本文中的开发人员对微信小程序的开发具有一定的语法基础。Applet开发文档

相关免费学习推荐:微信小程序开发

微信小程序总结

在微信小程序的开发过程中，我们不难发现，微信小程序为了方便开发者，封装了许多底层API，例如用于接口请求的wx.request（）、用于路由跳转和页面导航的wx.switchTab、wx.navigateTo等。虽然在一定程度上简化了开发，但项目的系统性建设还不够。因此，在将之前基于Vue开发项目的经验与我自己的开发习惯进行比较后，我总结了以下三点供参考:

1.全局变量和配置信息的统一管理；

2.封装路由卫士的相关API:Vue -路由器的router.beforeEach（）和router.afterEach（）真香；

3.接口请求进一步提取和封装公共信息；

4.封装接口的请求和响应拦截API:axios . interceptors . request . use（）API:axios。Axios用的interceptors.response.use（）都不错；

从以上四点出发，规范和优化微信小程序的初始化项目，可以大大提高开发效率和项目维护管理。封装的好处不仅体现在调用的方便上，还体现在管理的方便上。同时，公共操作是集中的，这大大减少了复杂和重复的代码。

一、项目初始化

新建一个微信小程序项目，并在该项目下创建以下目录和文件:

Config文件夹:可配置信息和变量的统一管理；ErroList.js:接口错误报告错误代码匹配列表文件；GlobalData.js:全局变量统一管理文件（相当于vuex）；Keys.js:可配置的系统信息管理文件（全局常量命名等。);Pages文件夹:小程序页面文件管理文件夹（每个页面一个子文件夹目录）；路由器文件夹:路由管理文件；Router.js:微信小程序五大路由导航API的封装；RouterConfig.js:页面路由名称和路径匹配配置文件；RouterFilter.js:路由预拦截封装；服务器文件:接口请求服务管理文件夹；api文件夹:请求请求封装管理和接口API配置管理文件夹；request . js:wx . request的Promise封装；Xxx.js:对应模块的接口管理文件；RequestFilter.js:接口请求和响应拦截封装文件；其他一切都是初始化默认文件；

第二，路由跳转和路由保护封装

1.路由跳转封装

微信小程序官方文档为开发者提供了五种路由跳转的api，每种API都有自己的特殊用法:

根据其用法，我们将路由api封装如下:微信小程序的路由跳转最终对应push、replace、pop、relaunch和switchTab；Routes对应于routeConfig.js中路由路径的配置；RouterFilter对应routerFilter.js文件，处理路由跳转前的逻辑；

RouteConfig.js（需要在添加每个页面后手动添加）:export const routes = { INDEX:“/pages/INDEX/INDEX & quot；测试:& quot/pages/test/test&quot，}导出默认值{...routes }；router filter . js:export default（）= & gt；{//路由跳转前的逻辑处理} router . js（router filter负责路由跳转前的公共操作处理，路由跳转后的公共操作在成功和失败中处理）:从“导入路由../路由器/路由器配置& quot；从& quot。/router filter & quot；/* * * wx . navigate to * @ param { route } path * @ param { parameter } params * @ param { event } events */const push =（path，params，events）=》{ router filter（）wx . navigate to（{ URL:routes

借鉴axios对请求的封装，以Promise的形式封装wx.request（）岂不是很美？

request.js:从& quot../request filter & quot；const app = getapp（）/* *接口请求封装* @ param { request method } method * @ param { requested url } URL * @ param { requested data } data */const request =（method，URL，data）》{//设置请求头constheader = {}//promise封装一个层，这样在调用时，直接使用then和catch接收返回新的Promise（（resolve，reject）=》{ wx . request（{...resolve（RES . data）}，fail（err）{ wx . show toast（{ title:‘网络异常，请稍后重试！’，mask: true，icon:‘none‘，持续时间:3000 }）}）}）}）}导出默认请求；以user.js为例:

从& quot导入请求。/request&quot；//获取用户OpenID导出const usr Infos = data =》request（& quot；帖子& quot，& quot/user/usrInfos & quot；、数据）；索引页面调用:

//index.js//从获取应用程序实例constapp = getapp（）import { usr info }../../服务器/API/用户& quotpage（{ onLoad:function（）{//获取用户信息usr info（{ uid:“xxxx & quot；}) .然后（res = & gt{ console . log（RES）}）。catch（err = & gt；{ console . log（err）} }）第四，接口的请求和响应拦截封装。

Axios。interceptors.request.use（）和axios。interceptors.response.use（）分别对应接口请求前的拦截和数据响应后的拦截；根据这一原理，我们还对微信小程序的响应进行拦截和封装，并统一管理和输出接口请求返回的错误:

request . js导入格式来自& quot../request filter & quot；const app = getApp（）const request =（方法，url，数据）= & gt{返回新承诺（（解决，拒绝）= & gt{ wx . Request（{ success（RES））{//对成功返回的请求if（RES . status code = = = 200）{//请求返回成功返回的if（RES . data &:& amp；RES . data . code = = = = & quot；成功& quot）{//后端成功处理了接口请求。将数据返回到调用place resolve（RES . data）//then receive } else {//后端对也请求判断并报告错误格式化程序错误（RES）//统一错误处理逻辑reject（RES . data）//catch receiving } } else { reject（RES . data）//catch receiving } }，Fail（err）{//请求失败，并出现错误wx . show toast（{ title:‘网络异常，稍后再试！’，mask: true，icon:‘none‘，持续时间:3000 }）}）}）}）}导出默认请求；请求过滤器。jsrequestfilter.js可以做很多错误处理。在这里，我们用一个简单的祝酒词来演示:

/* * * Format接口返回的后端错误* @ param {接口成功返回的数据} RES */constformatterror =（err =》{ wx . show toast（{ title:err . message，mask: false，icon:‘none‘，duration:3000 }）}导出默认formatError错误报告的统一处理需要明确的数据规则:

制定统一的错误报告代码管理标准；从前到后制定统一的接口请求数据返回格式；五。全球数据管理

数据的管理在小型项目的开发中并不那么重要，但随着项目越来越大，数据越来越多，一个好的数据管理方案可以有效地避免许多bug，这也是vuex能够在vue生态中占据一席之地的原因。遵循合理的数据管理原则，我们对封装数据进行严格封装，并分块管理子模块管理的配置:

globalData.js微信小程序中的GlobalData管理放在app.js的globalData属性中，当数据过多或app.js的逻辑过于复杂时，提取全局数据并单独管理确实是一个不错的方案:

导出默认{ host:& quot；http://www.wawow.xyz/api/test"，//接口请求的域名和接口前缀已确认:“& quot//是否已经存在确认实例current page:“& quot；}keys.jskeys.js属于个人发展中的惯用操作。通过集中管理，可以非常方便地调用、修改和维护项目中可能使用的一些常量名称:

导出默认{ TOKEN:& quot；令牌& quot，存储项目:& quot测试& quot全球参考和注册介绍app.js:

从& quot导入路由器。/router/router . js & quot；从& quot导入密钥。/config/keys & quot；从& quot导入全局数据。/config/global data & quot；//全局注册wx.router = routerwx。$ keys = keys//app . jsapp（{//Listener初始化onLaunch（options）{//获取小程序最初输入的页面信息，让launch infos = wx . getlaunchoptionsync（）//在全局数据管理中存储当前页面路由，页面代码逻辑中使用的this . global data . current page = launch infos . path }，//全局数据存储globalData: globalData}）可由app.globalData.host、wx调用。$KEYS。TOKEN

不及物动词摘要

上述关于微信小程序开发的方面都是在实践中学习和总结的，技术实现其实很容易，但个人认为，标准化项目建设的开展是一个项目的重要基础；完善的规范可以有效提高开发效率和开发者之间不必要的扯皮！合理的项目构建可以优化开发逻辑，提高代码逻辑的可读性，减少后期项目的管理时间，并赋予项目更大的可扩展性。

如需源代码，可关注微信官方账号Wow WEB回复“wxmp”获取；

欢迎讨论留言，做补充！

这几篇文章你可能也喜欢：

• 总结小程序开发中遇到的问题(小程序问题的解决方法)
• 微信小程序开发(1)介绍微信开发者工具和小程序框架(微信小程序开发工具教程)。
• 我们先来看看支付宝小程序和微信小程序开发的区别(支付宝小程序和微信小程序开发的区别)
• 让微信小程序开发如鱼得水（示例）（微信小程序开发教程2021）
• 开发微信小程序需要多少钱？价格贵吗？(微信小程序的开发一般要花多少钱？价格贵吗？)

本文由主机参考刊发，转载请注明：让微信小程序开发如鱼得水的方法（微信小程序开发详细教程） https://zhujicankao.com/114256.html