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

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

 

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

 

1 window全局配置

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

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

 

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

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

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

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

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

 

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

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

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

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

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

 

2 tabBar全局配置

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

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

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

 

2.1 配置全局底部tabBar样式

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

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

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

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

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

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

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

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

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

     

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

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

3 其他配置

    详见官网：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

      后面用到了再补充讲解。

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