搭建小程序项目架构，你需要注意什么？

What?小程序还需要搭建架构？你这用的是mpvue？相信小程序开发者们看到这标题都会发出这样的疑问。
不急，听我慢慢道来~~

前言

笔者已经半年没碰小程序了，但是微信生态在这里，小程序作为以前的主要工作技能，编码能力不能丢啊，周末有空必须搞搞老技能。
对于小程序，官方确实提供了一整套生态，它的能力全在api体现了。所以其实没有什么项目架构可言，除非你使用mpvue等第三方架构。
但是使用原生开发，其实还是有一些可优化的地方，我将把我认为可优化的点，记录在这篇文章中。

通过这篇文章你将了解到：基本项目结构、构建npm模块的重要性、第三方库的推荐、分包配置

项目结构

基本项目结构

构建npm模式

小程序的开发模式，简直跟Vue不要太类似。既然如此，对于前端开发工程师来说没有npm模块怎么说的过去？微信官方也明显意识到这个问题，在基础库版本 [2.2.1]后边支持使用第三方npm库。
构建npm步骤非常简单，官方教程已经说得很明白，具体见：npm构建。
这里我主要想说明为何我要构建npm，因为在以前我真的是纯原生开发，什么都没做优化的。主要原因是：一为了遵循官方社区的脚步；二构建npm有诸多好处：

1. 符合前端开发的习惯，更为高效；
2. 若是没有npm，我们在引用第三方库时，是需要把源码以本地文件导入，并且去除非必要代码以减少包体积，这在拉取源码的时候往往会出现不必要的错误和踩坑；
3. 通过研究源码和查阅相关资料，我发现使用npm后，微信也相应推出npm构建的优化，是一种类似webpack的打包原理。微信小程序会通过模块依赖分析npm包的主入口模块以及其依赖的所有模块，通过DEFINE函数创建一个模块对象，存储于MODS对象中，并且当一个npm包引用到其他npm并且与其他有重复时，小程序会将此重复模块提升为全局模块，使用到的地方使用全局require来引用，这样避免了重复打包。这也是在开发者工具中点击npm构建后，项目中会出现miniprogram_npm的原理，通过构建把一个原始的npm模块打包成一个index.js，在项目中require时，直接在miniprogram_npm中查找对应模块加载即可，减少包体积的同时又加快速度。

导入第三方库

构建完npm后，我们可以非常愉快的导入第三方库，正如前面所讲，小程序框架本身就没有什么特别高的可提升的地方，毕竟也就一个小小的程序，代码规范点就可以了。因此我只引用了vant-ui和flyoi库。

1. vant-ui：有赞UI组件不用赘述，用过的人都说香！

引用方法：npm i @vant/weapp -S --production
具体可见：https://vant-contrib.gitee.io/vant-weapp/#/quickstart#an-zhuang-miniprogram-api-typings

2. flyoi：fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库。我之所以引用是因为它提供标准的Promise API，并且通过判断Http Engine来实现多环境支持。简单来说就是：这个库可以在vue、小程序、h5中请求，并且使用方法完全一致！
   当然，这个库中针对小程序的也就是对wx.request进行包装（毕竟绕不开平台的约束。。。）；

引用方法：npm install flyio
具体可见：https://github.com/wendux/fly

这里还需要对flyoi进行下封装，添加请求和响应拦截器。官方也给出了代码，我多做了些加载框和状态码的判断。

const Fly = require("flyio/dist/npm/wx")
//引入api接口文件
const api = require('../config/api')

const fly = new Fly()

//获取本地存储token
let token = wx.getStorageSync('token')
//请求配置
const config = {
  method: "", //请求方法， GET 、POST ...
  headers: {
    token
  }, //请求头
  baseURL: '', // 请求基地址
  //Content-Type为“application/json”，默认为true
  parseJson: true,
  timeout: 30000 // 超时时间
}

var loading = true
fly.config = config

//添加请求拦截器
fly.interceptors.request.use((config, request) => {
  loading = config.loading == undefined ? true : false
  config.headers.token = wx.getStorageSync('token')
  if (loading) {
    wx.showLoading({
      title: config.loadingText ? config.loadingText : '正在加载...',
    })
  }
  return config;
})

//添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
  (response) => {
    loading ? wx.hideLoading() : ''
    if (response.data.code == 401) {
      wx.removeStorageSync('token')
    } else {
      return response.data
    }
  },
  (err) => {
    wx.showToast({
      title: '系统繁忙，请稍后再试',
      icon: 'none'
    })
    //发生网络错误后会走到这里
    return Promise.resolve(err)
  }
)

module.exports = {
  http: fly
}

页面调用示例如下：

http.post(api.xxx, {
      "code": this.data.wxcode
    }).then((res) => {
      if (res.code == 0) {

      } else {

      }
    }).catch((e)=>{
      print(e);
    })

构建分包&独立分包

为了控制用户加载小程序的时长，微信官方对小程序的包体积大小有这严格限制，这个限制不同的基础库都会有一些差别。微信官方也在尽力降低包体积的限制程度。
然而小程序项目可大可小，笔者之前的项目就曾超过微信官方的限制大小而无法发布，只能采取分包配置，但因为项目迭代了那么多个版本，各个页面耦合度都上来了，这个时候去拆模块就比较麻烦了。

• 分包
  因此新开项目，一定要做好分包的配置；小程序分包主要是通过配置页面路径，将各个页面分成多个包，小程序加载时只会先加载主包，当进入分包页面时，才会加载分包，这样用户进入小程序时就不至于等待太久，同时也节省了每次都要加载分包的资源损耗。

详细教程：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

分包配置

• 独立分包
  独立分包独立于主包和其他分包运行，这种我认为不是必须，要看需求定。这里我不做拓展，配置也是很简单的。

详细教程https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html

写在最后

小程序的学习成本真的是很低，但是一些小问题确实是需要提前去预判并且去做的，不然迭代中期进行修改确实很费命。。。另外，小程序模块化开发我推荐使用ES6 的CommonJS模块化；同时由于小程序没有mixin的特性，建议大家可以尝试引入，减少开发成本。这里我不多赘述，关于mixin可见文章：https://www.jianshu.com/p/bcd9c3084eb1
小弟班门弄斧，希望能一起学习进步！！！
希望大家多多指导我！

后会有期