本人第一次使用uni-app,目标是根据uni-app做一个小程序后台,小程序框架选用uni-app,但是uni-app毕竟是小程序框架,所以不存在vue-router,这种概念,对于全局的封装捉襟见肘,市面上没有太好的方法,基于自身经验,封装出一套自用框架,目前适用于小程序,H5没怎么加适配性代码
-
本篇文章只提关键点和注意事项,其余自行百度搜索哦,本篇以uni-app为基础,使用场景为微信小程序,进行举例
-
框架我提炼出来后放链接,现在先写一篇文章玩玩
-
关于脚手架搭建 还是用uni-app搭建 看团队需求,但是不影响使用
可以用其他,因为方便用iconfont
-
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毕竟是重点在小程序,这方面能力偏弱,但是我们仍可以弯道超车!
-
Vue中我们经常会这么做,因为return一个全新的页面的页面对象,而且这个页面对象是独一份,页面互不影响,既然是对象,我们可以是否代理生命周期等函数?用call apply? 在进入小程序时先进入我们代理的函数,处理完逻辑之后再对页面进行访问
那么我尝试拿到当前页面对象
-
this指针相当重要,会导致找不到页面的this