微信小程序框架分析：开发API特性调研

根据之前参与的一个尝试用web技术编程NativeUI项目的一些经验及遇到的问题，
对微信小程序参照开发文档及模拟器中的一些尝试，总结下看到的一些特性吧

本分析为最初版本的开发工具分析，仅供参考

整个小程序应用由多个Page(页面)组成，先从Page开始：

Page

• 分为两层：视图层（WXML(HTML变体) + WXSS(CSS变体)） + 逻辑层(跑在JsCore里的JavaScript)
• 除canvas外，逻辑层无任何直接操作视图层的API，仅通过 模板+"数据绑定" 来控制视图层

模板

• 模板功能
  • 类"HTML"的标签语言来描述视图
  • 类似vue、angular等，通过"指令"强化模板
  • 提供双大括号(Mustache)风格的"数据绑定"
• 组织管理
  • 提供了具有独立作用域的template来定义模板片断以供其他处的模板使用
  • WXML文件中可以引入其他WXML文件

其中模板功能方面具体来看：

标签指令

• 仅提供了'循环'与'条件'两种控制结构的指令：
  • wx:for、wx:if、wx:elif、wx:else

"数据绑定"

• 所有逻辑层对视图层的控制均仅通过"数据绑定"完成，包括动画
• 所有数据绑定均包裹在双大括号(Mustache)即{{ }}中
  • 支持在文本、也支持在属性值中使用。另外条件、循环指令中表达式也需由双大括号包裹
• 数据绑定为单向绑定
  • 模板可使用逻辑层通过接口指定的数据
    • 初始化时传入的数据对象，在初始化结束之后便再与视图层无任何关联
      • 即改变原数据对象上的属性也并始终不会更新至视图层
    • 更新数据需要显式地调用setData接口
      • 更新为局部更新，即本次未设置的数据值则沿用旧有值不改变
    • 视图层的处理应该是完全在native端(而非js端)完成，因此数据对象也未与js环境共享、需要手动调用接口设置才能更新
  • 支持部分简单表达式
    • 支持算数表达式、关系表达式、字符串连接表达式、三元表达式
    • 不能如angular、vue中支持函数/方法调用
• 用户输入的收集/获取：
  • 未提供类似angular、vue中的双向数据绑定，而是类似react的方式仅通过事件对象接收用户输入
• 此外相比其他类似的模板增强方案还增加了比较便捷的数据重组功能：
  • 可以在双大括号(Mustache)中将逻辑层提供的数据进行重组，构成新的数组或对象以方便使用

样式

事件

逻辑层到视图层的控制完全通过"数据绑定"，视图层至逻辑层的反馈则仅有视图元素的事件(没有任何类似DOM的对象模型/接口)

视图组件

印象比较深刻：组件相当地全面。看上去似乎是做了充分的准备、也相当地重视、真的预备要用小程序掀起一场波澜

本地能力

同视图组件一样，也很全面。

概览/框架

补充一下将Page(页面)组织成完整的小程序应用：

其他

• • 支持页面级及应用级的WXSS文件通过选择器指明样式，也支持元素内联style属性进行更高优先级的覆盖
  • 猜测布局渲染同样基于facebook的css-layout，以提供flex为主的布局
    • 但在css-layout提供的flex布局基础之上，结合native的文字排版提供了支持折行/多行的行内环境，从而支持了display: inline、display: inline-block，如下图：
      
      
      
      行内环境排版示例
    • 此外，小程序框架对样式非布局方面的处理应还有(css-layout中均未提供)：代理某些native元素的属性设置(如TextView的color)，并额外提供了边框与背景的绘制(如同@袁炜之前在o2o框架项目中所做)、子元素对父元素的样式继承等
      • 圆角支持同样仅在于绘制，而不会对子元素进行截断
        

  • 选择器方面
    • 只支持element、class、id及逗号选择器
    • 目前不支持后代等选择器，这样应该很大程度地减少了复杂度及性能消耗
    • 另外竟然额外支持了::before与::after两个伪元素选择器
  • 通过标签属性的方式在WXML中注册事件回调方法
  • 支持事件冒泡，即模拟了HTML中事件的冒泡阶段、但未模拟事件捕获阶段
  • 而是否阻止继续冒泡，必须在监听时就要确定
    • 通过bindxx为不截获冒泡，而通过catchxx为截获
    • 原因应是事件的派发也完全由native侧完成，故无法如web一样在js对事件处理的过程中设置是否阻止
  • 最基本的，封装了native中各常用组件，如View、Text、Image、Toast、ScrollView等
  • 并且提供了一些抽象层次更高的业务组件，像swiper(轮播组件)、progress(进度条)、icon(图标)、loading、navigator等
  • 表单方面，模拟了web下几乎所有的表单元素：form、input(支持text, number, idcard, digit, time, date)、checkbox、radio、button、label(同样具有代理焦点的功能)
  • 并提供了接口更友好的checkbox-group、radio-group、更适合移动场景的picker(列表选择器 支持普通列表,时间选择器,日期选择器)、slider(滚动选择器)、switch(开关)、action-sheet(上拉菜单)
  • 此外还提供了地图(虽然现在看还略微不是很完善，比如地图上自定义覆盖物的设置并不支持动态更新)
  • 并且~ 提供了完整API的canvas！从能力或说可能性上使开发者具备了任意绘制界面的可能性
    • 稍微想像一下：cocos2d-x基于h5 canvas的js版，应该不费很大周张就可以移植到微信小程序的canvas上~ 届时也许就可以使用cocos2d在微信小程序上开发游戏了
  • 网络上：支持https请求，并支持WebSocket
  • 媒体能力：相册、音视频播放与录制
  • 位置及移动速度信息（以后滴滴的微信版是不是会好用很多~）
  • 缓存文件读写、本地文件保存、设备信息、传感器监听、界面相关、以及微信开放的登录、支持、消息等接口等
  • 通过约定的目录结构来放置配置、页面JS、WXML、WXSS等文件
  • 通过配置来指明应用的基本信息
    • 核心配置为构成应用的各个页面(Page)的路径
      • 第一个页面被用作应用的首页，此后可通过API接口与navigator组件进行页面跳转
    • 此外还可配置其他如窗口、导航栏、底部多Tab内容等
  • 另外应用及各页面的生命周期中各节点均有提供回调，可分别在应用及各页面主js中注册时指明
  • 开发工具基于chrome调试工具改造，又与小程序本身有很好结合，非常好用
  • js支持CommonJS模块化
  • 元素支持data-开头的自定义属性，值可以在事件发生时随事件对象一同传递至回调方法中
    • 这样虽然没有DOM接口，却可以在事件处理时获取到视图相关的额外信息
  • 表单元素的change等事件、touch系列各事件、tap、longtap事件也全面支持