平凡也就两个字: 懒和惰;
成功也就两个字: 苦和勤;
优秀也就两个字: 你和我。
跟着我从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
后面用到了再补充讲解。
如果你有疑问或需要技术支持,关注公众号联系我吧~