小程序
一种运行在宿主APP的“用完即走”跨端应用
具备几个特点-提效、跨端、小体积、贴近原生体验、借用原生能力等等-视图与逻辑两个独立进程(很显著的技术特征)-擅长用户引流、功能明确的单一应用场景
如何实现
三层架构
视图层,也就是我们肉眼看到的界面
管理层,也就是宿主环境,比如Android、iOS
逻辑层,Android里的v8库,iOS里的jscore
技术储备
视图层
你得会基本的javascript、css、html,而且要学得不错,另外你还得会Android、iOS的原生UI知识,因为部分组件是原生组件,还涉及到同层渲染的事情
你得会一些主流框架的思想,比如react、vue等框架都会用到的vdom,数据驱动视图思想等,另外还有一些编译相关的知识,比如AST即抽象语法树,像现在主流小程序视图层都是自定义的模板,解析工作都是自己实现,也就是需要做词法、语法工作
再说组件相关,小程序组件是采用shadowdom实现,所以你还得会基于shadowdom实现一套组件
管理层
毫无疑问是两端的原生操作,对webview的操作需要很熟练,而且对于webview的布局属性得熟悉,因为里面涉及到一些设备信息,比如分辨率、设备宽高、安全区域等等
对于原生webview的管理,一个路由是一个webview,何时开启webview,如何根据指令更新对应webview的UI,以及对于路由栈的管理等等。对于Android还有多线程的管理工作,一个小程序是一个单独线程,对于iOS就没有这样的困扰
对于小程序拉取策略的管理,何时拉取、版本号判断、静默更新等等,如果当前端不支持小程序或对应版本的兼容策略
逻辑层
我们首先要建立一个认知逻辑,就是小程序的逻辑代码最后是什么样子,他能包含什么样的写法,不能有什么写法
小程序逻辑代码最后肯定是纯JavaScript,因为上面说到了最终运行的环境,Android-V8库,iOS在jscore,也就是符合ECMA的标准,即只要是ECMA的标准就能从定义层面跑起来
其次有关于js必须要有的API,不然实现某些场景的时候,总觉得别扭,比如setTimeout,但这个东西特么的是浏览器造出来的,但上面说的两个逻辑宿主都没有这个。怎么办?我们也造一个呗,不对是造一对,不能管杀不管埋,还有个clearTimeout。不过还有个好消息,jscore里面实现这两个方法比Android简单不少。
逻辑层还需要实现与管理层的通信工作,我们来描述一个场景:用户刚打开某个小程序,那打开的流程应该是,点击小程序icon,然后管理层加载小程序的配置,然后加载对应的文件在对应的宿主执行,那模板会在webview加载,对应的js逻辑会在各自平台的逻辑层执行,那第一个路由的加载就很关键了,由逻辑层发出加载新路由指令(首屏可以更快),管理层接到指令新开webview,与此同时路由的数据也随之而来,经过一些校验逻辑,渲染到webview,呈现到用户面前。
IDE
是不是还有个IDE没说,现在市场上的小程序都有自己的开发者工具,比如