跳到主要内容

小程序

如今,小程序已经成为可以与原生 APP、网站三足鼎立的存在。在国内互联网的人口红利加持之下,依托天然平台优势,小程序风光无限。

如果你已经掌握了 web 开发技术,开发小程序并不是一件难事。

  • 平台原生 IDE(例如微信开发者工具)
  • 跨端开发框架:例如 Taro、uniapp

整体架构

小程序与传统 web 单线程架构相比,是双线程架构。

渲染层和逻辑层由两个线程管理,逻辑层采用 JSCore 执行 js 代码,渲染层使用 webview 进行渲染。小程序有多个页面,所以渲染层存在多个 webview。

两个线程之间由 Native 层之间统一处理,无论是线程之间的通信,还是数据的传递,网络请求都是由 Native 层做转发。

双线程的好处不仅仅是一分为二而已,还有强大的 Native 层做背后支撑。Native 层除了做一些资源的动态注入,还负责着很多的事情,请求的转发,离线存储,组件渲染等等。

Good to know

由于实现原因与 iOS JavaScriptCore 限制,iOS 环境下的 Promise 是一个使用 setTimeout 模拟的 Polyfill。这意味

小程序的优点

  • 依赖于微信,可以快速获取用户

小程序的劣势

  • 小程序的性能不如原生 APP
  • 在 iOS 上,小程序不能独立运行,需要依赖宿主环境

跨端小程序框架是如何实现的

首先,小程序可以按语法分类或者实现原理分类。

从框架的语法来说,可以分为下面两类:

  • Vue 语法
  • React 语法 / 类 React 语法

主流的跨端框架基本遵循 React、Vue 语法,这也比较好理解,可以复用现有的技术栈,降低学习成本。

框架语法厂家
remaxreact蚂蚁金服
Taro nextreact京东
Taro 1/2类 react (nerve)京东
megalovue网易考拉
mpvuevue美团
uni-appvueHbuilder
chameloen类 vue滴滴

从实现原理上,开源社区的跨端框架大致分为下面两类:

  • compile time** 编译时**
  • runtime** 运行时**

compile time** 编译时**的跨端框架,主要的工作量在编译阶段。他们框架约定了一套自己的 DSL ,在编译打包的过程中,利用 babel 工具通过 AST 进行转译,生成符合小程序规则的代码。

这种方式容易出现 BUG ,而且开发限制过多。早期的 Taro 1.0 和 2.0 版本就是采用的这种方案,下文会有更具体的介绍。

而另外一种 runtime** 运行时模式**, 跨端框架真正的在小程序的逻辑层中运行起来 React 或者是 Vue 的运行时,然后通过适配层,实现自定义渲染器。这种方式比静态编译有天然的优势,所以 Taro 的最新 Next 版本和 Remax 采用的是这种方案。

编译时

Taro 1/2 在编译的时候,使用 babel-parser 将 Taro 代码解析成抽象语法树,然后通过 babel-types 对抽象语法树进行一系列修改、转换操作,最后再通过 babel-generate 生成对应的目标代码。

运行时

了解更多