深圳网站建设商家,wordpress移动端缓存,怎么做网站后缀识别符号才不会变,零食加盟店10大品牌前三名#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、全局配置1、全局配置文件及常用的配置项二、window1、小程序窗口的组成部分2、window 节点常用的配置项3、设置导航栏的标题4、设置导航栏的背景色5、设置导航栏的标题颜色总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第15篇文章; 今天开始学习微信小程序的第九天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、全局配置 前面已经介绍了WXSS模板语法-全局样式和局部样式通过栗子学习了WXSS模板语法样式之间的覆盖。接下来就来讲解一下小程序的全局配置。话不多说让我们原文再续书接上回吧。 1、全局配置文件及常用的配置项
ems; 小程序根目录下的 app.json 文件是小程序的全局配置文件决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。常用的配置项如下
配置项说明pages记录当前小程序所有页面的存放路径window全局设置小程序窗口的外观tabBar设置小程序底部的 tabBar 效果style是否启用新版的组件样式
ems; 前面已经学习过了pages和style属性现在就来学习另外两个重要属性window、tabBar。
二、window
ems; 用于设置小程序的状态栏、导航条、标题、窗口背景色。
1、小程序窗口的组成部分
ems; 小程序窗口一般由导航栏区域和页面主体区域组成如下图所示1 部分表示为导航栏区域2 部分表示为页面的主体区域用来显示wxml中的布局1和2之间还有一个背景区域默认不可见只有下拉才能显示。 window配置项只能对导航栏和背景区域进行配置不能对页面的主体区域进行配置。
2、window 节点常用的配置项 根据 window 节点配置项的作用可以对 window 中的属性进行分类
第一类、配置导航栏相关样式以 navigation 开头第二类、配置窗口背景相关样式以 background 开头第三类、控制页面效果 常用配置项如下表所示
属性名类型默认值说明navigationBarTitleTextString字符串导航栏标题文字内容navigationBarBackgroundColorHexColor#000000导航栏背景颜色如 #000000navigationBarTextStyleStringwhite导航栏标题颜色仅支持 black / whitebackgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式仅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局开启下拉刷新onReachBottomDistance Number50页面上拉触底事件触发时距页面底部距离单位为px
3、设置导航栏的标题 刚创建微信小程序的时候导航栏上的标题都是默认为 WeChat。现在要将默认标题修改为 我是夜阑的狗 具体操作为 app.json - window - navigationBarTitleText app.json
{window:{backgroundTextStyle:light,navigationBarBackgroundColor: #fff,navigationBarTitleText: 我是夜阑的狗, navigationBarTextStyle:black},
}通过修改 window 中的属性来修改导航栏上的标题实际效果如下图所示 4、设置导航栏的背景色 修改完导航栏上的标题之后接下来还可以对导航栏的背景颜色进行修改。现在要将导航栏背景色从默认颜色 #fff 修改为 #2b4b6b具体操作为 app.json - window - navigationBarBackgroundColor app.json
{window:{backgroundTextStyle:light,navigationBarBackgroundColor: #ff0000,navigationBarTitleText: 我是夜阑的狗, navigationBarTextStyle:black},
}通过修改 window 中的属性来修改导航栏背景颜色实际效果如下图所示 注意这个导航栏背景颜色只支持十六进制的颜色值不支持文本颜色值例如red、green等。
5、设置导航栏的标题颜色 看到上面的效果图红色背景黑色标题看起来很不美观所以可以对导航栏的标题文本颜色进行修改。现在要将导航栏标题颜色从默认 black 修改为 white具体操作为 app.json - window - navigationBarTextStyle app.json
{window:{backgroundTextStyle:light,navigationBarBackgroundColor: #ff0000,navigationBarTitleText: 我是夜阑的狗, navigationBarTextStyle:white},
}通过修改 window 中的属性来修改导航栏标题颜色很明显视觉效果好了很多个人观感实际效果如下图所示 注意 navigationBarTextStyle 的可选值只有 black 和 white 总结 感谢观看这里就是全局配置 window 中的导航栏设置介绍如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
