WXSS 模板样式
1. 什么是 WXSS
WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。
2. WXSS 和 CSS 的关系
WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。
与 CSS 相比，WXSS 扩展的特性有：
⚫ rpx 尺寸单位
⚫ @import 样式导入
WXSS 模板样式 – rpx
1. 什么是 rpx 尺寸单位
rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。
2. rpx 的实现原理
rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，
在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。
⚫ 在较小的设备上，1rpx 所代表的宽度较小
⚫ 在较大的设备上，1rpx 所代表的宽度较大
小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
3. rpx 与 px 之间的单位换算*
在 iPhone6 上，屏幕宽度为375px，共有 750 个物理像素，等分为 750rpx。则：
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1物理像素
官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
开发举例：在 iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。
WXSS 模板样式 – 样式导入
1. 什么是样式导入
使用 WXSS 提供的 @import 语法，可以导入外联的样式表。
2. @import 的语法格式
@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：
WXSS 模板样式 – 全局样式和局部样式
1. 全局样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
2. 局部样式
在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
注意：
① 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
② 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
全局配置
1. 全局配置文件及常用的配置项
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：
① pages
⚫ 记录当前小程序所有页面的存放路径
② window
⚫ 全局设置小程序窗口的外观
③ tabBar
⚫ 设置小程序底部的 tabBar 效果
④ style
⚫ 是否启用新版的组件样式
全局配置 – window
1.设置导航栏的标题
设置步骤：app.json -> window -> navigationBarTitleText
把导航栏上的标题，从默认的 “WeChat”修改为“苏永儿”，
2.设置导航栏的背景色
设置步骤：app.json -> window -> navigationBarBackgroundColor
需求：把导航栏标题的背景色，从默认的 #fff 修改为 #2b4b6b ，效果如图所示：
3.设置导航栏的标题颜色
设置步骤：app.json -> window -> navigationBarTextStyle
需求：把导航栏上的标题颜色，从默认的 black 修改为 white ，效果如图所示：
注意： navigationBarTextStyle 的可选值只有 black 和 white
4.全局开启下拉刷新功能
概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true
注意：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面！
5.设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为:
app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。
6.设置下拉刷新时 loading 的样式
当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步
骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。
注意： backgroundTextStyle 的可选值只有 light 和 dark
7.设置上拉触底的距离
概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤： app.json -> window -> 为 onReachBottomDistance 设置新的数值
注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可。
全局配置 – tabBar
1. 什么是 tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面
的快速切换。小程序中通常将其分为：
⚫ 底部 tabBar
⚫ 顶部 tabBar
注意：
⚫ tabBar中只能配置最少 2 个、最多 5 个 tab 页签
⚫ 当渲染顶部 tabBar 时，不显示 icon，只显示文本
3. tabBar 节点的配置项
4. 每个 tab 项的配置选项
配置 tabBar 选项
① 打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点
② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象
③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：
⚫ pagePath 指定当前 tab 对应的页面路径【必填】
⚫ text 指定当前 tab 上按钮的文字【必填】
⚫ iconPath 指定当前 tab 未选中时候的图片路径【可选】
⚫ selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
1. 页面配置文件的作用
小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
2. 页面配置和全局配置的关系
小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
网络数据请求
1. 小程序中网络数据请求的限制
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下
两个限制：
① 只能请求 HTTPS 类型的接口
② 必须将接口的域名添加到信任列表中
2. 配置 request 合法域名
需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口
配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
注意事项：
① 域名只支持 https 协议
② 域名不能使用 IP 地址或 localhost
③ 域名必须经过 ICP 备案
④ 服务器域名一个月内最多可申请 5 次修改
3. 发起 GET 请求
调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：
4. 发起 POST 请求
调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求，示例代码如下：