为实现小程序框架,都需要准备什么

小程序

一种运行在宿主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没说,现在市场上的小程序都有自己的开发者工具,比如


转载请注明:http://www.aierlanlan.com/cyrz/4948.html