Open mominger opened 3 years ago
架构已在 博文 uniapp多端项目架构(20200519) 详细阐述
实际上用原生开发小程序肯定比uniapp开发小程序好,因为多了一层对uniapp的适配 当初选型uniapp,是基于小程序和H5等多端同时研发,样式类似(微信端、华为WeLink一起上线)的缘故
针对部分业务功能做些说明 1. 小程序页面通信 小程序是基于PageModel(页面模型),即它由一张张页面构成。因此需要解决页面间通信的问题 1.1 onShow/onHide + localStorage 1.2 onShow/onHide + globalData globalData是小程序独有的全局共享数据 注意,它存于内存,而localStorage存于硬盘 1.3 相邻页面间的通信 通过getCurrentPages获取前一页面对象,获取其方法,注入数据刷新 1.3.1 核心方法 此方法也可以minxin形式注入给每个页面组件,这样调用更方便 1.3.2 在子页面(当前页面)向父页面(来源页)调用此方法进行传参 that.$mUtils.flushParentData({a:1}); 1.3.3 父页面(来源页)的methods里的flushData会接收到传递的数据 flushData(data){ console.log(data) }
针对部分业务功能做些说明
小程序是基于PageModel(页面模型),即它由一张张页面构成。因此需要解决页面间通信的问题
that.$mUtils.flushParentData({a:1});
flushData(data){ console.log(data) }
参考博文 表单统一校验 表单统一校验
华为未提供小程序上传的sdk,但其论坛有篇 网友的上传文章 此文章是针对永久token的方式,而实际项目常常是临时token,因此注入临时token 3.1 核心改动 3.2 上传组件的结构 如果上传失败,会尝试再重新走一遍整个请求 h5 是同样的请求流程,但H5 有obs官方提供的sdk
华为未提供小程序上传的sdk,但其论坛有篇 网友的上传文章 此文章是针对永久token的方式,而实际项目常常是临时token,因此注入临时token
通过node工程手动将static目录下的图片统一上传 mock环境不需上传,主要是在小程序开发工具调测 转测后,需在手机上模拟时,则需上传,因为static目录打到小程序里会导致主包过大,无法预览 此乃遗留问题, 正常应该时撰写webpack插件,自动上传图片
通过微信小程序工具点击上传,小程序管理后台提交审核(体验版/上线) 4.1 注意上线前在dist里删掉static目录,因为static目录下的图片都会上传到obs,通过url引用。上传上去会占用主包大小。
通过微信小程序工具点击上传,小程序管理后台提交审核(体验版/上线)
指小程序项目需改进的地方 1. static目录 图片手工上传,需切换成webpack自动上传 注意static目录,webpack不会解析,需改成 assets目录 2. 配置应和代码分离 小程序的配置目前在 config目录设置 3. sentry没有线上环境 目前仅有 sentry dev环境
指小程序项目需改进的地方
注意static目录,webpack不会解析,需改成 assets目录
小程序的配置目前在 config目录设置
目前仅有 sentry dev环境
涉及源码
源码从项目剥离,并不完全一致
项目架构
为何选择uniapp
业务功能
2. 表单验证
3. 上传到华为obs
4. static图片上传
5. 上线
遗留问题
涉及源码