uni-app底层改造,铸就小程序更强能力.md
初衷
本人第一次使用uni-app，目标是根据uni-app做一个小程序后台,小程序框架选用uni-app,但是uni-app毕竟是小程序框架，所以不存在vue-router,这种概念，对于全局的封装捉襟见肘，市面上没有太好的方法，基于自身经验，封装出一套自用框架，目前适用于小程序，H5没怎么加适配性代码
本篇文章只提关键点和注意事项，其余自行百度搜索哦，本篇以uni-app为基础，使用场景为微信小程序，进行举例
框架我提炼出来后放链接,现在先写一篇文章玩玩
项目目录
关于脚手架搭建 还是用uni-app搭建 看团队需求，但是不影响使用
- apis - assets - components - mini-admin (用于替换小程序公用模块) - pages - servers - static - store - utils ... 复制代码
UI框架选型
可以用其他，因为方便用iconfont
uview
uni-app之我见
生命周期问题
onLaunch 在众多小程序中都是不支持异步的，简而言之，如果在onLaunch写了异步，会和页面的onLoad有一个顺序问题，onLauch中的异步可能先于页面onLoad执行，也可以晚执行
uni-app 小程序生命周期页面调用顺序为onLoad,onShow,mounted, 意味着先启动小程序页面本身，再做JS对页面的渲染
分包设计
此处根据逻辑设计，因为tabbar页面必须在主包，所以主包放5个页面， 所有其余页面根据功能放分包
特殊的执行环境
分热启动冷启动
无dom环境，需提前写入view，因为是沙盒环境，浏览器环境的方法统统不支持,Blob,File等都要kao
如何进行底层改造?
小程序需要如下能力
权限体系,不同于传统小程序，需要支持对指定页面支持游客模式，对页面进行权限判断
页面缓存，第一次进页面调用api 下载图片，再次进入直接调用缓存图片，提高体验
页面埋点，页面埋点，在离开时收集所有埋点并统一发送
支持对二进制文件上传(小程序无File Blob等API)
基于上述需求，需要一个统一的入口，在进入页面之前(即onLoad)之前提前处理好逻辑，当页面加载完毕，再进行当前页面的接口渲染，比如在onShow进行接口渲染，在onReady拿到缓存的页面图片
在Vue中有vue-router这个功能库，可以在页面进入之前进行功能性判断，而uni-app毕竟是重点在小程序，这方面能力偏弱，但是我们仍可以弯道超车!
页面改造
export default {
}复制代码Vue中我们经常会这么做，因为return一个全新的页面的页面对象，而且这个页面对象是独一份，页面互不影响,既然是对象，我们可以是否代理生命周期等函数？用call apply？ 在进入小程序时先进入我们代理的函数，处理完逻辑之后再对页面进行访问
那么我尝试拿到当前页面对象
const miniPage = function(config) {
return new MyPage(config);
};
export default miniPage({
data(){
return{}
}
})复制代码this指针相当重要，会导致找不到页面的this
function MyPage(config){
console.log(config)
}复制代码在打印的confing中可以看到当前页面的生命周期，直接在页面中用变量缓存生命周期，然后在进行自己的操作，然后释放
有几个重点需要注意
此处我在重新定义了onLoad ,onShow, 需要在当前页面，定义好onLoad,onShow,哪怕你什么都不做，否则call方法找不到当前页面的方法，会报错
function MyPage(config) {
console.log(config,'----config')
let _this = this;
this.lifetimeBackup = {};
const LIFETIME_EVENTS = ["onLoad", "onShow", "mounted"]; // 这一步的步骤是告诉Vue需要改造哪些生命周期, 并把需要改造的生命周期提前放到lifetimeBackup
LIFETIME_EVENTS.forEach((event) => {
_this.lifetimeBackup[event] = config[event];
config[event] = function() {};
});
config.onLoad = function(options) {
let that = this;
let LIFETIME_EVENTS_COPY=['onLoad','mounted']; // 此处是真实要变更的生命周期，不要在此处加onShow等无意义的生命周期，会导致执行两次生命周期方法
//执行步骤1
init(that).then((res) => {
LIFETIME_EVENTS_COPY.forEach(event => {
_this.lifetimeBackup[event].call(that, options);
config[event] = _this.lifetimeBackup[event];
})
});
};
config.onShow = function(options) {
let that = this;
_this.lifetimeBackup['onShow'].call(that, options);
config['onShow'] = _this.lifetimeBackup['onShow'];
};
config.onHide = function() {};
return config;
}复制代码此处我定义了一个init方法,是一个Promise回调，是的，等init方法执行完之后，再恢复页面的生命周期的执行顺序，这时就可以做到 onLaunch->onLoad->onShow 的方法，而当小程序在运行过程中，始终保持执行完init方法再执行页面生命周期的行为，基于此，我们可以赋予小程序更多的功能
底层改造完毕，增强小程序
权限设计和游客模式举例
具体直接参照vue-router等设计,在meta加功能点即可
设计一个route文件夹，以index.js为总入口，建议以分包为文件名，然后汇总到index
import subPackagesA from './subPackagesA.js'
const base=[{
path:'pages/login/index',
meta:{
isChecking:false,
}
}]
const routes=[
...base,
...subPackagesA,
...subPackagesB
]
export default routes复制代码在上面代码步骤1中，有一个init函数，在init执行完毕后才执行onLoad页面方法，此方法应该是一个Promise方法，比如调用接口，执行异步方法时执行完毕后 再进行页面逻辑
以login页面为例
在此处通过getCurrentPages可以拿到当前路由的路径，路径匹配之后通过数组的find方法找到自己定义的路由里的meta字段,
if(!currRoute.meta.isCheck){
resolve()
}else{
// 执行全局逻辑
getUserInfo().then(res=>{
resolve()
})
}复制代码如此，就达到了一个游客模式的功能
埋点设计
有时候我们觉得小程序需要埋点，产品人员要对业务端小程序功能的使用程度进行调研，对页面和功能点都需要埋点,此时我们可以在onHide做一些操作
利用onHide和Store 达到数据的拿取
以页面的route为key 维护一个数组,数组匹配后，然后再指定页面的meta字段，比如isCheckPoint,如果满足指定条件就可以在onHide进行埋点的统一收发
还有很多功能可以实现
基于页面增强，其实很多能力都可以迎刃而解，就不一一举例了。。懒
改造的同时需要注意什么
毕竟多端适配，还需要很多的特定判断，比如getCurrentPages的__route__,在H5就不行，需要灵活配置
easycom这个文件匹配很操蛋，注意分包主包不要重复
...
结语
小程序我只经历过原生时代，这次uni-app改造 让我感叹有些面试只要uni-app精通实在很low，其实改造前我也没有uni-app的经验，但是我仍然相信一通百通。。更何况是小程序这种轮子货，其实还是要多注意对基础的运用。
作者：笑笑先生
链接：https://juejin.cn/post/7023296584326594573