wxml如何转换为HTML,理解小程序

小程序坚持着 “无需下载、触手可及、用完即走”的设计理念和价值观，帮助用户缩短完成任务的时间。下面从以下几点进行总结。

总结是参考三清水老师的小册子，推荐大家去购买。写的很棒。

1. 小程序能做什么，不能做什么?

2. 小程序的执行环境

微信小程序是在微信的上下文中运行的，而不是在浏览器中运行的，所以浏览器特有的window对象、BOM和DOM等相关的API都不能使用。

同时，跟浏览器相关的操作，Cookie、Ajax请求(XMLHttpRequest)、DOM选择器、DOM事件、路由history、缓存、设备信息、位置等都不存在。

但是，微信小程序为我们提供了一套自己的API。

3. 小程序的布局信息

微信小程序中使用rpx作为长度单位，可以根据屏幕宽度进行自适应。

rpx是以小程序容器宽度 === 设备宽度 == 屏幕宽度 === 750rpx来做定义的。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

官方iPhone手机尺寸对照表格

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

4. 微信小程序与H5对比

在微信小程序中，一切皆组件(视图组件)。

运行环境

普通H5都是执行在浏览器的宿主环境，浏览器提供window、document等BOM对象；但是小程序是运行在微信上下文中的，没有BOM和DOM。因此在小程序中不能使用BOM 和DOM 提供的接口

路由

H5是通过URL进行访问的，小程序没有对外暴漏统一的URL路径进行访问。小程序是通过信道服务进行通信和会话管理，所以它不支持Cookie存储，访问资源使用 wx.request 而不是 ajax 的 xmlhttprequet API，小程序的 wx.request 请求不存在跨域的问题。

注意：

不要尝试修改页面栈，会导致路由以及页面状态错误

不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成

模块化

微信小程序在JS模块化上支持CommonJs，通过require加载，跟node.js类似。

样式

微信小程序的页面样式完全继承了CSS语法，支持FLEX布局

框架

微信小程序的整体框采用面向状态编程方式，状态管理从API来看采用类似Redux的设计方式；

单项数据绑定方式，当view在action操作后，只能通过action的业务处理来更新view。

5.小程序框架

微信小程序分为视图层和逻辑层，视图层在webview中渲染，主要负责页面的渲染工作，其中视图可以有多个，目前最多10个；

逻辑层在jscore中进行渲染，负责逻辑处理、全局状态管理、请求和接口调用，逻辑层全局只有一个(实际通过X5内核，另起一个JScore线程)。

微信小程序的视图层和逻辑层通过微信的JSBridge来实现通信。

逻辑层数据变化通过JSBridge通知视图层，视图层进行更新处理。视图层触发事件通过JSBridge将事件通知到逻辑层，逻辑层进行处理；

JSBridge提供的方法有invoke(调用native)、publish(消息分发)和subscribe。

因为在一个小程序中可以打开多个视图层(webview)，要保证从逻辑层发送的数据可以准确送到具体的某个webview中，

需要通过每webview 唯一标识符webviewID来实现。发送event的时候携带webviewID，然后逻辑层处理完对应的逻辑，

如果需要下发数据，则通过webviewID找到对应的webview。

6.小程序生命周期

小程序在启动时，会同时启动两个线程，一个负责页面渲染的webview，一个负责逻辑jscore。

逻辑层初始化后会将初始化数据(app.js中的global)通过JSBridge传递给渲染层进行渲染，渲染层webview渲染完页面之后又会跟逻辑层通信。

7.小程序WXML怎么转成HTML

WXML写完之后经过编译工具WCC转成可执行的JS。wcc和wcsc是小程序的wxml和wxss的编译工具，是二进制文件。

这个JS会接受一个path,将path的页面转换成一个virtual DOM。

这个virtual DOM 结构里面就会找到以 wx-*开头的tag,有了这个VDOM结构，就可以使用对应的tag创建HTML片段了。

以上内容主要是参看三清水老师的小册子写的。觉得写的不错，大家也可以去购买一起学习交流谢谢。