【小程序从0到1】宿主环境｜WXML｜WXSS｜JS逻辑交互

新建小程序页面

在pages数组中新增一个list项，保存后，开发者工具即可帮我们自动创建一个list文件夹，里面包含了四个文件：list.js / list.json / list.wxml / list.wxss。

修改项目首页

什么是WXML？

WXML和HTML的区别

1. 标签名称不同

1. 属性节点不同

1. 提供了类似于Vue中的模版语法

什么是WXSS？

WXSS和CSS的区别

1. 新增了 rpx 尺寸单位

1. 提供了全局的样式和局部样式

1. WXSS仅支持部分CSS选择器

小程序中的.js文件

.js文件的分类

1. app.js

1. 页面的.js文件

1. 普通的.js文件

宿主环境

什么是宿主环境？

小程序的宿主环境

众所周知，小程序并不是直接安装在手机操作系统上的，而是安装在手机微信内的，所以手机微信才是小程序的直接宿主环境。

小程序宿主环境包含的内容

1. 通信模型
2. 运行机制
3. 组件
4. API

通信的主体

小程序中通信的主体是渲染层和逻辑层，其中：

1. WXML模版和WXSS样式工作在渲染层
2. JS脚本工作在逻辑层

小程序中的通信模型分为两部分

1. 渲染层和逻辑层之间的通信
2. 逻辑层和第三方服务器之间的通信

小程序运行机制——启动的过程

1. 将小程序的代码包下载到本地
2. 解析app.json全局配置文件
3. 执行app.js小程序入口文件，调用App（）创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

小程序运行机制——页面渲染过程

1. 加载解析页面的.json配置文件
2. 加载页面的.wxml模版和.wxss样式
3. 执行页面的.js文件，调用Page()创建页面实例
4. 页面渲染完成

小程序组件