微信小程序开发教程4：全局配置和页面配置

比眉伴天荒 2022-12-19 00:58 389阅读 0赞

平凡也就两个字: 懒和惰;  
成功也就两个字: 苦和勤;  
优秀也就两个字: 你和我。  
跟着我从0学习JAVA、spring全家桶和linux运维等知识，带你从懵懂少年走向人生巅峰，迎娶白富美！  
关注微信公众号【**IT特靠谱** 】，每天都会分享技术心得~

# 微信小程序开发教程4：全局配置和页面配置 #

# 1 window全局配置 #

window窗口全局配置用于设置小程序的状态栏、导航条、标题、窗口背景色。下图来源于官方文档，标识了导航栏，下拉刷新窗口和页面区域。

![0e2e87a7fb10046ee1906c36a7d8512c.png][]

常用的window全局配置属性如下。 其中红色框为配置顶部导航栏样式的属性，蓝色框为配置下拉刷新窗口的样式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70][]

### 1.1 配置全局顶部导航栏样式 ###

全局设置导航栏样式如下：

（1）顶部导航栏的背景：粉红色

（2）导航栏标题文字设：掌上生活超市

（3）导航栏标题文字颜色：黑色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 1][]

### 1.2 配置全局下拉刷新背景样式 ###

全局设置下拉刷新窗口样式如下：

（1）开启全局下拉刷新，开启成功后下拉才会出现下拉刷新窗口

（2）下拉窗口背景颜色：灰白色

（3）下拉窗口"..."加载样式颜色：黑色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 2][]

## 2 tabBar全局配置 ##

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

![77b15f8ca34dc5f8997f602d30b894b3.png][]

tabBar常见的全局样式属性如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 3][]

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 4][]

### 2.1 配置全局底部tabBar样式 ###

我们在小程序底部创建4个tabBar，从左至右依次为：首页、分类、购物车和我的。其他样式如下：

（1）设置tabBar的背景颜色为：灰白色

（2）设置tabBar的字体颜色为：黑色

（3）文字默认颜色：黑色

（4）文字选中颜色：粉红色

（5）新增4个tabBar，并指定文本、选中和未选中图标，并给tabBar设置选中跳转的页面。

首先，我们需要创建除首页（home）以外的3个page页面：categroy、cart和mine。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 5][]

然后，添加4个tabBar，并设置tabBar样式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 6][]

上面除了tabBar的图标没有配置，我们需要在"阿里巴巴iconfont"矢量图标库中找到合适的图标，然后下载即可！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 7][]

可以指定下载某种颜色的图标，和图片类型。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 8][]

下载后，将图标拷贝到项目的icons目录下(该文件夹需要新建)。最后再配置4个tabBar的iconPath和selectedIconPath，编译后就可以看到小程序底部导航栏的图标啦！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 9][]

## 3 其他配置 ##

详见官网：[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]

## 4 页面配置 ##

页面配置基本上同全局配置。每一个小程序页面也可以使用 `.json` 文件（如：home.json）来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖全局配置`app.json` 的 `window` 中相同的配置项。页面属性配置详见官网：[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]

后面用到了再补充讲解。

如果你有疑问或需要技术支持，关注公众号联系我吧~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 10][]

[0e2e87a7fb10046ee1906c36a7d8512c.png]: /images/20221120/deb8ce6eaed24c3ebec12ad61ab4cb4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70]: /images/20221120/dc2e146c27ed4c5197da5a6c259933d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 1]: /images/20221120/acd39d1c4f4a449c8c39f5773d3a0486.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 2]: /images/20221120/6101da42a10c437b9dba9e46c3ac03e5.png
[77b15f8ca34dc5f8997f602d30b894b3.png]: /images/20221120/7f2c16b231b64c44ac5e5c6a211ca5dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 3]: /images/20221120/517d949269e141f1a58fe67f3662ddfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 4]: /images/20221120/13cb4dbe1df444db8b25eef5bcf1e39b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 5]: /images/20221120/c54905781cc34dd3ab23b88d487fa43c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 6]: /images/20221120/c0a3560960214e249bf63e72eb7b9cb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 7]: /images/20221120/c97707e8facd407f9010a78c005ef8a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 8]: /images/20221120/a70395a3687847f48047297e96ad9241.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 9]: /images/20221120/8e56e8d9ab9f4620a7b51da13debfb58.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 10]: /images/20221120/613fb2d197824a528dfa5ef21b09d732.png