上回说到, 公司决定开发小程序平台, 并委派你作为项目负责人, 编制开发路线图. 所以问题来了, 小程序的开发路线图, 应该是什么样的?
在制定开发路线图前, 我们要先梳理小程序的业务流程, 以及相关的技术点.
小程序业务流程
小程序的业务流程可以分为外围和内部两部分. 外围指的是业务方从创建小程序到在 App 上启动的一系列操作, 内部则是小程序在 App 上从启动到退出的全部过程, 这里我们分开讨论.
小程序外围流程
小程序外围流程主要分为两部分
首先是注册发布流程
sequenceDiagram
participant 用户
participant 小程序后台
participant IDE
Note over 用户,IDE: 创建小程序
用户 ->> 小程序后台 : 创建小程序, 获取app_id
用户->> IDE : 填写app_id, 在本地创建小程序
Note over 用户,IDE: 开发调试
IDE ->> IDE : 在IDE中开发调试小程序
IDE ->> 小程序后台: 上传小程序
小程序后台 ->> 小程序后台 : 创建上传记录
小程序后台 ->> IDE : 返回预览二维码
IDE ->> 用户 : 使用App, 扫码打开小程序
用户 ->> 用户 : 真机调试 & 预览
用户 ->> 小程序后台 : 提交审核
小程序后台 ->> 小程序后台 : 上线发布
需要实现以下模块&功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| - 后台
- 小程序注册接口
- 上传接口
- 提审接口
- 发布接口
- IDE
- 创建小程序
- npx miniprogram-cli create
- 编辑
- 打开已有项目
- 预览小程序
- npx miniprogram-cli start
- 小程序打包
- npx miniprogram-cli build
- 获取小程序信息
- 向后台上传小程序
- 登录后台, 获取上传 token
- miniprogram-cli
- 整合在 IDE 中
- 提供 create/start/build 功能
|
其次是启动流程
sequenceDiagram
participant App
participant IDE
participant 小程序后台
Note over IDE,小程序后台: 上传发布小程序
IDE ->> IDE : 编写/预览小程序
IDE ->> IDE : 构建生成小程序zip包/source-map
IDE ->> 小程序后台 : 向后台上传小程序zip包/source-map
小程序后台->> 小程序后台: 创建上传记录, 将包上传到cdn, 记录md5值
小程序后台->> 小程序后台: 根据上传记录创建发布申请/发布上线
小程序后台->> 小程序后台: 配置小程序推荐列表
Note over App,小程序后台: 移动端交互
App ->> 小程序后台 : 获取小程序广场配置
小程序后台 ->> App : 推荐小程序列表
小程序后台 ->> App : 最近使用的小程序
小程序后台 ->> App : 收藏的小程序列表
App ->> App : 点击小程序icon
App ->> 小程序后台 : 获取小程序详情(app_id)
小程序后台 ->> 小程序后台: 将该小程序添加到最近使用的小程序中
小程序后台 ->> App : 返回小程序信息/小程序cdn_url/md5
对应的, 是以下模块&功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| - App(Android & iOS)
- 小程序广场页(一般是聊天列表页下拉)
- 接口调用(获取小程序具体配置)
- 静态资源下载 & 校验
- 启动小程序
- 后台
- 根据预设条件判断 detail 接口返回值
- 符合条件返回小程序静态资源地址 & md5 校验值
- 不符合条件走异常流程
- 小程序未上线
- 小程序已下线
- 小程序已被屏蔽
- 所在平台未开通小程序
- 所在城市未开通小程序
- 所在用户组没有访问小程序权限
- 基础库版本过低
- 基础库版本过低, 降级到 h5 地址
- 基础库版本为特定值, 需要返回指定静态资源内容(锁版本)
|
调研期间我们先不考虑具体实现方案, 只整理完成小程序项目所需的前置技术点, 大致可以分为这么几类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
| # IDE 选型
- [ ] 构建 IDE 可选方案集
- [ ] VS Code 插件
- [ ] Electron + 代码编辑器
- [ ] 代码编辑器方案
- [ ] [monaco-editor](https://microsoft.github.io/monaco-editor/)
- [ ] [vscode-web](https://github.com/microsoft/vscode/blob/main/remote/web/package.json)
- [ ] [code-server](https://github.com/cdr/code-server)(第三方公司实现的 web 版 vscode)
- [ ] CodeMirror
- [ ] ace.js
- [ ] 订制 VS Code
- [ ] [Theia](https://theia-ide.org/)
- [ ] [阿里-开天 IDE-未公开发布](https://developer.aliyun.com/article/762768)
- [ ] 编写界面
- [ ] 创建小程序
- [ ] 登录小程序后台(以获取上传用的 token)
- [ ] 启动预览
- [ ] 启动构建
- [ ] 上传小程序包
- [ ] 类 chrome 的 DevTools
# cli 工具
- [ ] 制定/维护小程序项目模板
- [ ] 基于模板创建小程序项目(npx miniprogram create)
- [ ] 启动小程序开发环境(npx miniprogram start)
- [ ] 构建小程序安装包(npx miniprogram start)
- [ ] [进阶]打包输出 source-map, 支持监控线上错误/查看报错详情
# App
- [ ] 小程序启动流程设计
- [ ] 逻辑进程渲染进程间通信方案设计
- [ ] 小程序实现方案设定
- [ ] 页面切换如何实现
- [ ] 前进/返回效果
- [ ] 打开新页面效果
- [ ] 从 App 进入小程序/从小程序跳转到 App/从小程序跳转到 App 再返回小程序的交互过程 如何实现 / [进阶] 如果跳转到外部 App, 如何实现(微信小程序打开百度地图)
- [ ] schema 跳转方案
- [ ] 支付功能
- [ ] 本地静态缓存
- [ ] Native & js 通信方案实现
- [ ] js 如何调用 Native 中的接口
- [ ] Native 如何获取 js 中传入的参数
- [ ] Native 运行完成后, 如何通知 js. 期间控制流程切换的时序图如何设定
- [ ] js 如何获取 Native 中执行方法后的结果
- [ ] 实现非 ECMA 语法
- [ ] 实现 setTimeout
# 小程序后台
- 技术选型
- 项目方案(Express/koa)
- ORM 方案
- CDN 上传
- redis 库选择
- 日志记录
- 接口设计
- Mock 管理
- 文档管理
- 用户系统
- 注册/登录
- 项目权限管理
- root 用户
- 管理员
- 开发者
- 预览成员
- 小程序发布流程设计
- 上传->预览->提审->审核->发布
- 小程序项目配置
- 项目基础信息(logo/应用名/应用简介/etc)
- 降级策略
- 开城策略
- 注销应用
- [进阶]监控系统
- 数据清洗
- 数据存储(ES/mongodb)
- 错误查询
- source-map 解析
- 性能监控
- 订制数据项
- 上报/处理/分析数据项
# 小程序基础库(运行在逻辑进程中)
- [ ] API 设计
- [ ] 页面启动
- [ ] 页面切换
- [ ] 页面路由管理
- [ ] 路由参数读取
- [ ] 触发页面生命周期事件
# 小程序 webview-render(运行在渲染进程中)
- [ ] 订制渲染协议
- [ ] 向逻辑层转发 Dom 事件(支持冒泡)
- [ ] 单实例组件支持(例如地图组件)
# 组件库
- [ ] 技术方案选型
- [ ] React
- [ ] Vue
- [ ] [stencil](https://getstencil.com/)
- [ ] 特殊元素支持
- [ ] Canvas
# 其他问题
- [ ] 构建小程序预览环境
- [ ] 版本管理与同步
- [ ] alpha 版本与 正式版
- [ ] 管理小程序项目/小程序基础库/小程序 webview-render/小程序组件库/Native 小程序 sdk 之间版本对应关系
- [ ] bug 解决
- [ ] 逻辑进程引擎统一为 V8
- [ ] jsCore 中 setTimeout 的 bug
- jSCore 中执行 setTimeout 会直接清空当前微任务队列
- https://developer.apple.com/forums/thread/678277
|
其中, 最为关键的, 是这两个问题
- 在逻辑进程/渲染进程中, js 如何与 Native 进行通信 => 如果不能通信, 后续所有交互均无法进行
- 在逻辑层中运行的 js, 如何在渲染层生成对应 Dom 操作, 以更新界面, 与用户交互 => 这是小程序的核心问题. 如果不能完成逻辑层 js 到渲染层 Dom 的
惊险一跃, 整个小程序方案将会无从谈起
欲知这两个问题究竟要如何解决, 且听下文分解
参考资料
Taro Next H5 跨框架组件库实践(taro 使用 Stencil 的原因)
Electron 在 Taro IDE 的开发实践