微信小程序——基础引入2

1.小程序页面

1.1页面创建与展示顺序

在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可自动创建对应的页面文件。

示例：创建一个list页面

---

1.2修改项目页面展示顺序

调整 app.json ->pages 数组中页面路径的前后顺序，即可修改项目页面的展示顺序。

示例：将刚才创建的list页面放在首页

---

2.页面渲染

        我们知道在网页开发中，用HTML构建网页的页面结构，用组件（如CSS、JavaSprit、模板）对HTML构建的内容进行修饰；微信小程序也有类似的，WXML类似HMTL，WXSS类似CSS。简单来说，渲染就是将写的代码转变成人眼能直观看到的。

2.1WXML

WXML （WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构。

2.1.1 WXML 与 HTML 的区别

区别点	WXML	HTML
标签名称	view，text，image，navigator	div，span，img，a
属性节点	<navigator url = "/pages/list/list"></ navigator>	<a href = "#">超链接</ a>
模板语法	数据绑定 列表渲染 条件渲染	/

---

2.2WXSS

WXSS （WeiXin Style Sheets）是一套样式语言，用于描述 WXML 的组件样式。

2.2.1 WXSS 与 CSS 的区别

（1）新增了 rpx 尺寸单位

> CSS中需要手动进行像素单位换算，例如 rem

> WXSS在底层支持新的尺寸单位 rpx ，在不同大小的屏幕上小程序会自动进行换算

（2）提供了全局的样式和局部样式

> 项目根目录中的 app.wxss 会作用所有小程序页面

> 局部页面的 .wxss 样式仅对当前页面生效 

（3）WXSS 仅支持部分 CSS 选择器

>  .class 和 #id

> element

> 并集选择器、后代选择器

> ::after 和 ::before 等伪类选择器

---

3.宿主环境

3.1定义

宿主环境（host environment） 指的是程序运行所必须的依赖环境。而手机微信是小程序的宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，如微信扫码、微信支付、微信登录、etc等。

注意：Android 系统和 ios 系统是两个不同的宿主环境，安卓版的微信 App 是不能在 ios 环境下运行的。

3.2内容

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

3.3通信模型

3.3.1通信的主体

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

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

3.3.2小程序的通信型

1. 渲染层和逻辑层之间的通信：由微信客户端进行转发
2. 逻辑层和第三方服务器之间的通信：由微信客户端进行转发

---

3.4运行机制

小程序启动过程：

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

页面渲染过程：

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

---

3.5组件

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快搭建出页面结构。

官方把小程序的组件分为了 9 大类，分别是：

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map 地图组件
7. canvas 画布组件
8. 开放能力
9. 无障碍访问

---

3.6API

小程序的 API 是由宿主环境提供的，通过这些丰富的小程序 API ，开发者可以方便的调用微信提供的能力，如获取用户信息、本地存储、支付功能等。

3.6.1类别

小程序官方把 API 分为如下 3 大类：

（1）事件监听

> 特点：以 on 开头，用来监听某些事件的触发

> 举例： wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

（2）同步API

> 特点1：以 Sync 结尾的API 都是同步 API

> 特点2：同步 API 执行的结果，可以通过函数直接返回值直接获取，如果执行出错会抛出异常

> 举例： wx.setStorageSync('key','value') 向本地存储中写入内容

（3）异步API

> 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete接受调用的结果

> 举例： wx.request( ) 发起网络请求，通过 success 回调函数接收数据