What?小程序还需要搭建架构？你这用的是mpvue？相信小程序开发者们看到这标题都会发出这样的疑问。
不急，听我慢慢道来~~
前言
笔者已经半年没碰小程序了，但是微信生态在这里，小程序作为以前的主要工作技能，编码能力不能丢啊，周末有空必须搞搞老技能。
对于小程序，官方确实提供了一整套生态，它的能力全在api体现了。所以其实没有什么项目架构可言，除非你使用mpvue等第三方架构。
但是使用原生开发，其实还是有一些可优化的地方，我将把我认为可优化的点，记录在这篇文章中。
通过这篇文章你将了解到：基本项目结构、构建npm模块的重要性、第三方库的推荐、分包配置
项目结构
基本项目结构
构建npm模式
小程序的开发模式，简直跟Vue不要太类似。既然如此，对于前端开发工程师来说没有npm模块怎么说的过去？微信官方也明显意识到这个问题，在基础库版本 [2.2.1]后边支持使用第三方npm库。
构建npm步骤非常简单，官方教程已经说得很明白，具体见：npm构建。
这里我主要想说明为何我要构建npm，因为在以前我真的是纯原生开发，什么都没做优化的。主要原因是：一为了遵循官方社区的脚步；二构建npm有诸多好处：
- 符合前端开发的习惯，更为高效；
- 若是没有npm，我们在引用第三方库时，是需要把源码以本地文件导入，并且去除非必要代码以减少包体积，这在拉取源码的时候往往会出现不必要的错误和踩坑；
- 通过研究源码和查阅相关资料，我发现使用npm后，微信也相应推出npm构建的优化，是一种类似webpack的打包原理。微信小程序会通过模块依赖分析npm包的主入口模块以及其依赖的所有模块，通过DEFINE函数创建一个模块对象，存储于MODS对象中，并且当一个npm包引用到其他npm并且与其他有重复时，小程序会将此重复模块提升为全局模块，使用到的地方使用全局require来引用，这样避免了重复打包。这也是在开发者工具中点击npm构建后，项目中会出现miniprogram_npm的原理，通过构建把一个原始的npm模块打包成一个index.js，在项目中require时，直接在miniprogram_npm中查找对应模块加载即可，减少包体积的同时又加快速度。
导入第三方库
构建完npm后，我们可以非常愉快的导入第三方库，正如前面所讲，小程序框架本身就没有什么特别高的可提升的地方，毕竟也就一个小小的程序，代码规范点就可以了。因此我只引用了vant-ui和flyoi库。
- vant-ui：有赞UI组件不用赘述，用过的人都说香！
引用方法：npm i @vant/weapp -S --production
具体可见：https://vant-contrib.gitee.io/vant-weapp/#/quickstart#an-zhuang-miniprogram-api-typings
- 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
小弟班门弄斧，希望能一起学习进步！！！
希望大家多多指导我！
后会有期
网友评论