微信小程序学习笔记4

1 rpx

rpx 是微信小程序独有的，用来解决屏适配的尺寸单位。

① 实现原理：

 

② rpx 与 px 之间的单位换算

 

2 样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

@import 后跟相对路径，用；表示语句结束。如：

3  全局样式

定义在 app.wxss 中的样式为 全局样式，作用于每一个页面。

4 局部样式

在页面的 .wxss 文件中定义的样式为 局部样式，只作用于当前页面。

注意：① 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。

           ② 当局部央视的权重大于等于全局样式的权重时，才会覆盖全局的样子。

5 全局配置

小程序根目录下的 app.json 文件是小程序的全局配置文件。常见的配置项如下：

① pages：记录当前小程序所有页面的存放路径。

② window：全局设置小程序窗口的外观。

③ tabBar：设置小程序底部的tabBar效果。

④ style：是否启用新版的组件样式。

6 全局配置之 Window 

 （1）window 节点常用的配置项

7 全局配置之 tabBar

tabBar 是移动端常见的页面效果，用于实现多页面的快速切换。

（1）小程序通常将其分为：

① 底部 tabBar (包含对应的图标）       ② 顶部 tabBar（不包含对应的图标）

---

· 注意：tabBar中只能配置最少2个、最多5个tab页签。

---

（2）tabBar 的 6 个组成部分:

---

（3）tabBar 节点的配置项：

---

（4）每个 tab 项的配置选项：

---

（5）举例：

8 页面配置

（1）页面配置中常用的配置项

 9 网络数据请求

（1）小程序中网络数据请求的限制

出于安全性，小程序官方对数据接口的请求做出了如下两个限制：

① 只能请求 HTTPS 类型的接口

② 必须将接口的域名添加到信任列表中

（2）配置 request 合法域名

登录微信小程序后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改 request 的合法域名

---

注意事项：

① 域名只支持 https 协议

② 域名不能使用 IP 地址或 localhost

③ 域名必须经过 ICP 备案

④ 服务器域名月供应最多可申请5次修改

（3）发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，如下：

 （4）发起 POST 请求

调用微信小程序的 wx.request() 方法，可以发起 POST 请求，如下：

 （5）在页面刚加载时请求数据

需要在页面的 onLoad 事件中调用获取数据的函数。如下：

 （6）跳过 request 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口，此时可以临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名校验。

---

注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

（7）关于 跨域 和 Ajax 的说明

10 注意

微信小程序模拟器不一定能正确显示与手机一致，故有时需真机查看才准确！