2.1 开发框架简介

开发框架有一个非正式的名称MINA,这个名称是MINA Is Not App的递归缩写。业界流行以递归缩写为名称的命名方法,类似的命名有GNU(GNU's Not Unix)、RPM(RPM Package Manager)、PNG(PNG's Not GIF)、PHP(PHP:Hypertext Preprocessor)等。之所以称MINA为非正式名称,是因为微信官方在早期文档中称之为MINA,后来删掉了这种说法,而且之后没有明确为开发框架命名。笔者猜想原因是商标问题,Apache MINA是一个能够帮助用户开发高性能和高伸缩性网络应用程序的框架,官方网站https://mina.apache.org/明确指出MINA是Apache基金会的注册商标,为避免误解,本章不采用MINA的名称。如无特殊说明,本书的开发框架特指小程序开发框架。

本节将介绍开发框架的底层实现、组成部分、生命周期、项目架构、路由等方面的内容。

2.1.1 底层实现

图2-1 小程序底层实现

小程序的底层实现可以用一句话概括:统一接口,不同实现,如图2-1所示。

小程序到微信采用统一的接口,开发者只需考虑框架的语法和规则,不用关心底层如何实现。例如,小程序需要用到重力感应功能,只需调用监听重力感应数据的wx.onAccelerometerChange接口,不用管iOS或Android如何实现重力感应功能。

微信到底层操作系统有不同的实现方法。同一个功能,底层操作系统提供的调用方法、返回结构都不尽相同,微信需要在不同操作系统平台实现该功能,做到具体实现对上层透明。

2.1.2 小程序与HTML 5的区别与联系

小程序和HTML 5有着紧密的关系,如两者遵循相同的语法规范、拥有相似的组件、都支持响应式布局,甚至小程序的框架与AngularJS、Vue.js拥有相似的功能(数据绑定、事件绑定、条件渲染、列表渲染、组件化、模块化)。不过两者还是有明显区别的。

1.开发语言不同

表2-1展示了HTML 5在开发语言上的差异。

表2-1 小程序与HTML 5的差异

小程序的WXML标签语言和WXSS样式语言并非标准的HTML 5和CSS 3。

2.组件封装不同

小程序独立出来很多原生App的组件。在HTML5需要模拟才能实现的功能,在小程序里可以直接调用组件,如预览图片、录音等功能。

3.执行效率不同

HTML 5和小程序的加载流程如图2-2所示。

图2-2

HTML 5在加载时受限于网络环境,需要顺序加载HTML、CSS、JS,然后返回数据,最后渲染页面,并显示在浏览器中。用户经常需要等待很长时间,体验会受影响。

相比之下,小程序的两个线程——Appservice Thread和View Thread会同时进行、并行加载,甚至Appservice Thread会更早执行。当视图线程加载完通知Appservice时,Appservice会把准备好的数据用setData的方法返回给视图线程。

小程序的这种优化策略可以减少用户的等待时间,加快小程序的响应速度。

2.1.3 小程序概览

小程序由以下5个部分组成。

  • App:指小程序整个项目。
  • window:用于设置小程序的状态栏、导航条、标题、窗口背景色。
  • 页面:一个App包含若干页面。微信规定,同时打开的页面最多不超过5个。
  • 组件:框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。这些组件是构成页面的基本元素。
  • 路由:不同页面之间的跳转称为路由。

小程序的生命周期如图2-3所示。

图2-3

可以看到,生命周期分为3个阶段:

第一阶段是App启动阶段,主要加载小程序window配置,注册程序和页面;第二阶段是Page启动阶段,主要完成页面资源加载、页面渲染、页面挂载;第三阶段是销毁阶段,主要完成页面隐藏、卸载和销毁。