让微信小程序开发如鱼得水（实例）

让微信小程序开发如鱼得水（实例）
关于微信小程序开发一直想写一篇相关的文章总结和记录下，结果拖延症犯了迟迟没有下笔；今天就一起来看看吧。

  关于微信小程序开发一直想写一篇相关的文章总结和记录下，结果拖延症犯了迟迟没有下笔；这不最近天气不错，于是找一个空闲的下午将这篇文章输出下（好像跟天气没啥关系），那我们就开始吧！

注意：本文默认开发者对微信小程序开发有一定语法基础。小程序开发文档

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

微信小程序小结

  在接触的微信小程序开发过程中，不难发现微信小程序为了方便开发人员入手对很多底层api进行了很好的封装，比如针对接口请求的wx.request()，针对路由跳转和页面导航的wx.switchTab、wx.navigateTo···等。虽然在一定程度上简化了开发，但是对于项目工程的系统化构建还是不够的，因此本人在对比以前基于Vue开发项目的经验和自身的开发习惯，总结出如下3点可供参考：

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

2、封装路由守卫相关api：vue-router的router.beforeEach()和router.afterEach()真的香；

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

4、封装接口的请求和响应拦截api：axios的axios.interceptors.request.use()和axios.interceptors.response.use()用过的都说好；

从上述四点出发，对微信小程序初始化工程进行规范优化，能够很大程度提高开发效率和进行项目维护管理。封装的好处不只体现在调用的方便上，也体现在管理的方便上，同时，公共操作集中处理，很大程度减少繁杂重复代码。

一、项目初始化

   新建微信小程序项目，在项目下新建如下目录和文件：

config文件夹：统一管理可配置的信息和变量；

erroList.js：接口报错错误码匹配列表文件；

globalData.js：全局变量统一管理文件（相当于vuex）；

keys.js：可配置系统信息管理文件（全局常量命名等）；

pages文件夹：小程序页面文件管理文件夹（每个页面一个子文件夹目录）；

router文件夹：路由管理文件件;

router.js：对微信小程序5种路由导航api的封装；

routerConfig.js：页面路由名称和路径匹配配置文件；

routerFilter.js：路由前置拦截封装；

servers文件件：接口请求服务管理文件夹；

apis文件夹：request请求封装管理和接口api配置管理文件夹；

request.js：对wx.request的Promise封装；

xxx.js：对应模块的接口管理文件；

requestFilter.js：接口请求和响应拦截封装文件；

其他都是初始化默认文件；

二、路由跳转和路由守卫封装

1、路由跳转封装

  微信小程序官方文档为开发者提供了5种路由跳转的api，每一种都有其特殊的用法：

  根据其用法，我们对路由api进行如下封装：微信小程序路由跳转最后对应push、replace、pop、relaunch、switchTab；routes对应routeConfig.js中路由路径的配置；routerFilter对应routerFilter.js文件，对路由跳转之前的逻辑进行处理；

routeConfig.js（每次新增页面后需要手动添加）：export const routes =   {    INDEX: "/pages/index/index",    TEST: "/pages/test/test",  }export default {...routes};