微信小程序---全局配置及页面配置

向右看齐 2023-10-07 19:17 72阅读 0赞

> 这段时间有部分小伙伴在问有没有什么好的刷题网站  
> 在这里给大家推荐一款刷题网站[点击访问牛客网][Link 1]  
> 牛客网支持多种编程语言的学习，各大互联网大厂面试真题，从基础到拔高，快来体验一下吧！

## 学习笔记 ##

> 阿里云盘 : [https://www.aliyundrive.com/s/5Zrfw9EpKwa][https_www.aliyundrive.com_s_5Zrfw9EpKwa]  
> 提取码:37sc

## 全局配置 ##

### 全局配置文件及常用配置项 ###

![在这里插入图片描述][52eb3abd044842e8afc96583ec5f306d.png_pic_center]

## 全局配置—window ##

### 小程序窗口组成部分 ###

![在这里插入图片描述][a881a680a6c443bc88b87945ddf206d8.png_pic_center]

### 了解window节点常用的配置项 ###

![在这里插入图片描述][58a630d7c0f54717b045484618ef5f7b.png_pic_center]

### 设置导航栏的标题 ###

设置步骤：app.json => window => navigationBarTitteText  
需求:把导航条上的标题，从默认的“WeChat”修改为"黑马程序员",效果如图所示:  
![在这里插入图片描述][21cf7f0c05cb4b08ae19a49b6256b582.png_pic_center]

### 设置导航栏的背景色 ###

设置步骤：app.json => window => navigationBarBackgroundColor  
需求：把导航栏标题的背景色，从默认的 \#fff 修改为 \#2b4b6b ，效果如图所示：  
![在这里插入图片描述][d8424f05b42f4cf5bfef419c45af899c.png_pic_center]

### 设置导航栏的标题颜色 ###

设置步骤：app.json -> window -> navigationBarTextStyle  
需求：把导航栏上的标题颜色，从默认的 black 修改为 white ，效果如图所示：  
![在这里插入图片描述][6e6a3a83600f437b86283d5e27740c85.png_pic_center]

> 注意: `navigationBarTextStyle 的可选值只有 black 和 white`

### 全局开启下拉刷新功能 ###

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。  
设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 `true`

> 注意：`在 app.json 中启用下拉刷新功能，会作用于每个小程序页面！`

### 设置下拉刷新时窗口的背景色 ###

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为: app.json -> window -> 为 backgroundColor 指定16进制的颜色值 \#efefef。效果如下：  
![在这里插入图片描述][2e28b7aadbb4446d86e3dd38df4ec513.png_pic_center]

### 设置下拉刷新时loading的样式 ###

当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定`dark`值。效果如下：  
![在这里插入图片描述][d0945cc07e484c5fa497cb1045e13012.png_pic_center]

> 注意: `backgroundTextStyle 的可选值只有 light 和 dark`

### 设置上拉触底的距离 ###

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

设置步骤： app.json -> window -> 为 onReachBottomDistance 设置新的数值

> 注意：`默认距离为0，如果没有特殊需求，建议使用默认值即可。`

## 全局配置—tabbar ##

### 什么是tabbar ###

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

1.  底部 tabBar
2.  顶部 tabBar  
    ![在这里插入图片描述][8812c6eb8c3b412682027a147a6c6d33.png_pic_center]

> 注意：
> 
> 1.  tabBar中只能配置 `最少 2 个 、 最多 5 个` tab 页签
> 2.  当渲染 顶部 tabBar 时， 不显示 icon ，只显示文本

### tabbar的6个组成部分 ###

![在这里插入图片描述][424490e8be7c490897b47c4c35b115e0.png_pic_center]

### tabbar节点的配置项 ###

![在这里插入图片描述][c8d52f735383418387f36c59ac39085b.png_pic_center]

### 每个tab项的配置选项 ###

![在这里插入图片描述][0fcbbdfef81e4bb691489ee3d58d427b.png_pic_center]

## 页面配置 ##

### 页面配置文件的作用 ###

小程序中，每个页面都有自己的 .json 配置文件，用来对`当前页面`的窗口外观、页面效果等进行配置。

### 页面配置和全局配置的关系 ###

小程序中，app.json 中的 window 节点，可以`全局配置`小程序中`每个页面的窗口表现`。

如果某些小程序页面想要拥有`特殊的窗口表现`，此时，“`页面级别的 .json 配置文件`”就可以实现这种需求。

注意：当页面配置与全局配置`冲突`时，根据`就近原则`，最终的效果`以页面配置为准`。

### 页面配置中常用的配置项 ###

![在这里插入图片描述][c406ca0ef7644897a7001fe629ffd1b2.png_pic_center]

## 小结 ##

> 这一块内容其实就是页一些的简单样式配置，在我们熟悉的小程序中大家都能看到，这部分内容相对来说非常简单，不用去过多的记住，心里有一个大概即可，等项目开发需要的时候看看配置的属性即可！

[Link 1]: https://www.nowcoder.com/link/pc_csdncpt_qdxbzqj_qianduan
[https_www.aliyundrive.com_s_5Zrfw9EpKwa]: https://www.aliyundrive.com/s/5Zrfw9EpKwa
[52eb3abd044842e8afc96583ec5f306d.png_pic_center]: https://img-blog.csdnimg.cn/52eb3abd044842e8afc96583ec5f306d.png#pic_center
[a881a680a6c443bc88b87945ddf206d8.png_pic_center]: https://img-blog.csdnimg.cn/a881a680a6c443bc88b87945ddf206d8.png#pic_center
[58a630d7c0f54717b045484618ef5f7b.png_pic_center]: https://img-blog.csdnimg.cn/58a630d7c0f54717b045484618ef5f7b.png#pic_center
[21cf7f0c05cb4b08ae19a49b6256b582.png_pic_center]: https://img-blog.csdnimg.cn/21cf7f0c05cb4b08ae19a49b6256b582.png#pic_center
[d8424f05b42f4cf5bfef419c45af899c.png_pic_center]: https://img-blog.csdnimg.cn/d8424f05b42f4cf5bfef419c45af899c.png#pic_center
[6e6a3a83600f437b86283d5e27740c85.png_pic_center]: https://img-blog.csdnimg.cn/6e6a3a83600f437b86283d5e27740c85.png#pic_center
[2e28b7aadbb4446d86e3dd38df4ec513.png_pic_center]: https://img-blog.csdnimg.cn/2e28b7aadbb4446d86e3dd38df4ec513.png#pic_center
[d0945cc07e484c5fa497cb1045e13012.png_pic_center]: https://img-blog.csdnimg.cn/d0945cc07e484c5fa497cb1045e13012.png#pic_center
[8812c6eb8c3b412682027a147a6c6d33.png_pic_center]: https://img-blog.csdnimg.cn/8812c6eb8c3b412682027a147a6c6d33.png#pic_center
[424490e8be7c490897b47c4c35b115e0.png_pic_center]: https://img-blog.csdnimg.cn/424490e8be7c490897b47c4c35b115e0.png#pic_center
[c8d52f735383418387f36c59ac39085b.png_pic_center]: https://img-blog.csdnimg.cn/c8d52f735383418387f36c59ac39085b.png#pic_center
[0fcbbdfef81e4bb691489ee3d58d427b.png_pic_center]: https://img-blog.csdnimg.cn/0fcbbdfef81e4bb691489ee3d58d427b.png#pic_center
[c406ca0ef7644897a7001fe629ffd1b2.png_pic_center]: https://img-blog.csdnimg.cn/c406ca0ef7644897a7001fe629ffd1b2.png#pic_center