渲染机制
微信小程序的运行环境是微信，它的通信机制可以用下图简单表示
小程序运行时渲染页面时，过程大致如下：
- 解析 app.json 全局配置文件
- 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
- 渲染小程序首页
- 小程序启动完成
其中，小程序的首页渲染又可细分如下：
- 加载解析页面的 .json 配置文件
- 加载页面的 .wxml 模板和 .wxss 样式、执行页面的 .js 文件
调用 Page() 创建页面实例页面渲染完成
组件使用
微信小程序类似于vue+element开发网页，内部定义了一系列类似于element的组件。基于微信小程序的组件可以快速搭建出漂亮的页面结构。小程序的组件分为了 9 大类，分别是：
视图容器
- 基础内容
- 表单组件
- 导航组件
- 媒体组件
- map 地图组件
- canvas 画布组件
- 开放能力无障碍访问
其中，前四个是最基础也是使用频率最高的四个组件。
常用的视图容器类组件
view
普类似于 HTML 中的 div，是一个块级元素，常用来实现页面的布局效果。
scroll-view
注意，滚动条的出现需要在标签内指定参数
| 属性 | 类型 | 默认值 | 必填 | 释义 | 最低版本 |
|---|---|---|---|---|---|
| scroll-x | boolean | false | 否 | 允许横向滚动 | 1.0.0 |
| scroll-y | boolean | false | 否 | 允许纵向滚动 | 1.0.0 |
| upper-threshold | number/string | 50 | 否 | 距顶部/左边多远时，触发 scrolltoupper 事件 | 1.0.0 |
| lower-threshold | number/string | 50 | 否 | 距底部/右边多远时，触发 scrolltolower 事件 | 1.0.0 |
| scroll-top | number/string | 否 | 设置竖向滚动条位置 | 1.0.0 | |
| scroll-left | number/string | 否 | 设置横向滚动条位置 | 1.0.0 |
其他参数见官网：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
swiper 和 swiper-item
用于实现轮播图效果
需要显示的指定一些参数
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
| indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
| autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
| current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
常用的基础内容组件
text 组件的基本使用
通过 text 组件的 user-select 属性，实现文本是否可选效果：
tip：选择真机调试可以尝试此效果
rich-text 组件的基本使用
通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的结构：
