专栏首页小程序·云开发专栏关于小程序的基础库

关于小程序的基础库

作者:微信支付前端工程师 王贝珊

原文链接:https://godbasin.github.io/2018/09/23/wxapp-basic-lib/

小程序的基础库,它包含了哪些东西,以及载入、更新的机制又是怎样的呢。

小程序基础库的组成

基础库成分

关于基础库的成分,不得不提到我们之前说过的小程序渲染机制,参考 React 的 Virtual DOM。

image

**基础库除了处理 VD 的渲染问题,它还包括内置组件和逻辑层API,总的来说负责处理数据绑定、组件系统、事件系统、通信系统等一系列框架逻辑。**

小程序的基础库是 JavaScript 编写的,它可以被注入到渲染层和逻辑层运行。在渲染层可以用各类组件组建界面的元素,在逻辑层可以用各类 API 来处理各种逻辑。

同时,小程序的一些补充能力:自定义组件和插件,也有相应的基础代码,当然也需要添加到基础库里。

所以我们可以看到,**小程序的基础库主要是**:

  1. **提供 VD 渲染机制相关基础代码。(Exparser 框架)**
  2. **提供封装后的内置组件。**
  3. **提供逻辑层的 API。**
  4. **提供其他补充能力(自定义组件和插件等)的基础代码。**
基础库组成

Exparser 框架

**Exparser 是微信小程序的组件组织框架,内置在小程序基础库中,为小程序的各种组件提供基础的支持。**小程序内的所有组件,包括内置组件和自定义组件,都由 Exparser 组织管理。

Exparser 会维护整个页面的节点树相关信息,包括节点的属性、事件绑定等,相当于一个简化版的 Shadow DOM 实现。Exparser 的主要特点包括以下几点:

  1. 基于 Shadow DOM 模型:模型上与 WebComponents 的 ShadowDOM 高度相似,但不依赖浏览器的原生支持,也没有其他依赖库;实现时,还针对性地增加了其他 API 以支持小程序组件编程。
  2. 可在纯 JS 环境中运行:这意味着逻辑层也具有一定的组件树组织能力。
  3. 高效轻量:性能表现好,在组件实例极多的环境下表现尤其优异,同时代码尺寸也较小。

基于这个框架,内置了一套组件,以涵盖小程序的基础功能,便于开发者快速搭建出任何界面。同时也提供了自定义组件的能力,开发者可以自行扩展更多的组件,以实现代码复用。

内置组件

小程序基于 Exparser 框架,内置了一套组件,提供了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。

**内置组件在小程序框架里的定义是:在小程序架构里无法实现或者实现不好某类功能,使用组件内置到小程序框架里。**常见包括:

  • 开放类组件:如 open-data 组件提供展示群名称、用户信息等微信体系下的隐私信息,有 button 组件里 open-type 属性所提供分享、跳转 App 等敏感操作的能力
  • 视图容器类组件:如 movable-view 这种因双线程模型导致手势识别不好实现的组件(在双线程模型中,触摸事件从渲染层发出,派发到逻辑层,这中间是有一定的延时而导致视图跟随手指运动这类交互变得有些卡顿)

API

宿主环境提供了丰富的API,可以很方便调起微信提供的能力。

小程序提供的 API 按照功能主要分为几大类:网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口。

需要注意 API 调用大多都是异步的。

自定义组件

自定义组件是开发者可以自行扩充的组件。开发者可以将常用的节点树结构提取成自定义组件,实现代码复用。

在使用自定义组件的小程序页面中,Exparser 将接管所有的自定义组件注册与实例化。以 Component 为例:

  1. 在小程序启动时,构造器会将开发者设置的 properties、data、methods 等定义段,写入 Exparser 的组件注册表中。
  2. 这个组件在被其它组件引用时,就可以根据这些注册信息来创建自定义组件的实例。

Page 构造器的大体运行流程与之相仿,只是参数形式不一样。这样每个页面就有一个与之对应的组件,称为“页面根组件”。

在初始化页面时,Exparser 会创建出页面根组件的一个实例,用到的其他组件也会响应创建组件实例(这是一个递归的过程)。

插件

插件是对一组 js 接口、自定义组件或页面的封装,用于嵌入到小程序中使用。

插件不能独立运行,必须嵌入在其他小程序中才能被用户使用;而第三方小程序在使用插件时,也无法看到插件的代码。因此,插件适合用来封装自己的功能或服务,提供给第三方小程序进行展示和使用。

插件开发者可以像开发小程序一样编写一个插件并上传代码,在插件发布之后,其他小程序方可调用。小程序平台会托管插件代码,其他小程序调用时,上传的插件代码会随小程序一起下载运行。

小程序基础库机制

基础库的载入

在开发网页时,经常会引用很多开源的 JS 库,在使用到这些库所提供的 API 前,我们需要先在业务代码前边引入这些库。

同样道理,我们需要在启动 APP 之前载入基础库,接着再载入业务代码。由于小程序的渲染层和逻辑层是两个线程管理,而我们 **一般说起基础库,也通常包括 WebView 基础库(渲染层),和 AppService 基础库(逻辑层)。**

显然,所有小程序在微信客户端打开的时候,都需要注入相同的基础库。所以,**小程序的基础库不会被打包在某个小程序的代码包里边,它会被提前内置在微信客户端。**

将基础库内置在微信客户端,有两个好处:

  1. 降低业务小程序的代码包大小。
  2. 可以单独修复基础库中的Bug,无需修改到业务小程序的代码包。

小程序的启动

**在小程序启动前,微信会提前准备好一个页面层级用于展示小程序的首页。**这里就包括了逻辑层和渲染层分别的初始化以及公共库的注入。

小程序启动准备

**在小程序启动时,微信会为小程序展示一个固定的启动界面,界面内包含小程序的图标、名称和加载提示图标。此时,微信会在背后完成几项工作:下载小程序代码包、加载小程序代码包、初始化小程序首页。**

小程序启动过程

基础库的更新

小程序的很多能力需要微信客户端来支撑,例如蓝牙、直播能力、微信运动等,可以说,小程序基础库的迭代离不开微信客户端的发布。

为了避免新版本的基础库给线上小程序带来未知的影响,微信客户端都是携带上一个稳定版的基础库发布的。等到微信客户端正式发布后,小程序会开始灰度推送新版本的基础库到微信客户端里,在这个过程需要仔细监控各类异常现象以及开发者和用户的反馈,一般灰度时长为12小时,灰度结束后,用户设备上就会有新版本的基础库。如果存在重大Bug,那此次推送会被回退。

参考

结束语


本节大致结合了小程序的启动来讲了下小程序的基础库。其实很多都能在小程序开发指南里找到,只是文字太多又有些乱,看一遍未必能记住,但是第二遍又找不到了。

哈哈哈吐槽下小程序的文档,很详细就是有点容易找不到。

原文链接:https://godbasin.github.io/2018/09/23/wxapp-basic-lib/

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序的基础样式库-------WeUI

    honey缘木鱼
  • 关于小程序的一些基本常识

        a. 如果小程序需要与你的服务器进行数据交换,那么你就必须注册域名,即使是开发环境也需要;

    honey缘木鱼
  • 获取小程序基础库的N种方法

    小程序开发者都知道基础库是个很重要的东西。小程序这个最佳hybrid应用案例离不开它绝妙的底层基础库设计的支持。 如果你对基础库感兴趣,那第一步就是要去获取基...

    薛定喵君
  • 基础为本,小程序的基础功能

    微信小程序的玩法有很多种,在开发的时候可以选择的功能也很多样,可能有时候在策划开发方案的时候,面对这些玩法和多样化的功能时会迷茫,不知道选择哪种功能、哪种玩法、...

    微宝阁
  • 微信小程序基础

    小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不关心是否安装太多应...

    达达前端
  • 微信小程序基础

    查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

    达达前端
  • 小程序基础-组件

    ⽂本的<text>组件、表示图像的<image>组件、表示视图容器的 <view>组件,表示链接的<navigator>组件

    达达前端
  • 「小程序JAVA实战」小程序的基础组件(24)

    IT架构圈
  • 关于小程序的历史留存

    微信小程序有一个很重要,但是却经常被忽略的功能——使用历史自动留存功能。 该功能最直观的表现形式是,小程序的使用历史列表。而除此之外,还有两个人们可能不太会注意...

    企鹅号小编
  • 关于“小程序跳转小程序”功能调整

    即日起,若用户未点击小程序页面任意位置,则开发者将无法调用 wx.navigateToMiniProgram 接口自动跳转至其他小程序。

    花叔
  • 小程序基础库探究:说说formid生成的实现

    熟悉小程序的都知道,模板消息于2020年1月10日下线了,官方推荐用户使用订阅消息。现在已经是1202年了,探讨一下一个已经下线的功能的实现应该问题不大吧。

    薛定喵君
  • 小程序实践:基础内容icon,关于图标的5个实现方案等

    使用图片也可以达到同样的效果,但是图片如果像素不够,放大了之后效果会虚;还有,图片需要另外存储与加载,使用起来不如图标只使用一个名称方便;再者就是,接下来会看到...

    程序员LIYI
  • 小程序(2)- 基础样例

    基本这些配置就可以满足正常的开发,其他有一些比如request请求超时之类的,都采用默认即可

    小尘哥
  • 小程序-云开发基础

    最近在学习研究小程序的云开发,不得不令人惊叹,个人觉得如果把小程序比作是干柴,那么云开发就是一把烈火,助推了小程序,小游戏的野蛮生长

    itclanCoder
  • wx小程序--基础知识

    微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用,主要提供给企业、政府、媒体、其他组织或个人的开发者在微信平台上提供服务。

    eadela
  • Python简单基础小程序

    py3study
  • 微信小程序--关于加快小程序开发的几个小建议

    ​ 按照我们平常的开发习惯,创建一个新的页面,一般都会先创建文件夹,再创建对应page的形式,创建完成后,app.json中会自动注册该页面。实际上,我们还可...

    Kindear
  • 微信小程序底层机制:小程序基础库主要包括什么内容?

    小程序基础库采用双线程架构,一个是视图层线程,一个是逻辑层线程,两个线程协同工作,共同向上层提供了基础库能力。

    程序员LIYI
  • 微信小程序中的基础语法

    代码演示在微信小程序中的数据绑定思想,wx:if/wx:elif/wx:else,改变数据的方法this.setData({})使用,最终的结果是,让页面的显示...

    天天_哥

扫码关注云+社区

领取腾讯云代金券