uniapp小程序项目总结

[mominger]

项目架构

架构已在 博文 uniapp多端项目架构(20200519) 详细阐述

为何选择uniapp

实际上用原生开发小程序肯定比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)
  }

2. 表单验证

参考博文 表单统一校验 表单统一校验

3. 上传到华为obs

华为未提供小程序上传的sdk,但其论坛有篇 网友的上传文章
此文章是针对永久token的方式，而实际项目常常是临时token，因此注入临时token

• 3.1 核心改动
  
• 3.2 上传组件的结构
  
  如果上传失败，会尝试再重新走一遍整个请求
  h5 是同样的请求流程，但H5 有obs官方提供的sdk

4. static图片上传

通过node工程手动将static目录下的图片统一上传

mock环境不需上传，主要是在小程序开发工具调测
转测后，需在手机上模拟时，则需上传，因为static目录打到小程序里会导致主包过大，无法预览
此乃遗留问题， 正常应该时撰写webpack插件，自动上传图片

5. 上线

通过微信小程序工具点击上传，小程序管理后台提交审核(体验版/上线)

• 4.1
  
  注意上线前在dist里删掉static目录，因为static目录下的图片都会上传到obs，通过url引用。上传上去会占用主包大小。

遗留问题

指小程序项目需改进的地方

1. static目录 图片手工上传，需切换成webpack自动上传

注意static目录，webpack不会解析，需改成 assets目录

2. 配置应和代码分离

小程序的配置目前在 config目录设置

3. sentry没有线上环境

目前仅有 sentry dev环境

涉及源码

源码从项目剥离，并不完全一致