微信小程序-入门到入土-01

最新推荐文章于 2022-07-29 15:06:22 发布

原创最新推荐文章于 2022-07-29 15:06:22 发布 · 318 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #js #app

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文解析了微信小程序的全局配置及tabBar设置，介绍了如何通过pages数组添加页面并自动生成文件夹，以及如何设置导航条和tabBar的样式，包括颜色、文字、图标等属性。

了解小程序的目录结构：
在这里插入图片描述

全局配置：
在这里插入图片描述
①在pages数组中添加“pages/demo1/demo01”+Ctrl+s保存后会自动生成一个页面文件夹
②要想优先显示该页面文件夹，只需要将该字段按要求放于做上面即可

在这里插入图片描述
①：navigatorBar即导航条是指：

②：“navigationBarTitleText”: " 导航条名称",这里是：CSU班费缴纳平台
③： “navigationBarBackgroundColor”: “#99FF00”, 导航条颜色
④： “navigationBarTextStyle”:“black”, 导航条标题颜色可选黑白
⑤： “enablePullDownRefresh”: true, 可否下拉刷新
⑥：“backgroundColor”: “blue” 下拉部分的颜色
⑦：“backgroundTextStyle”:“dark”,刷新圆点颜色可选：dark、light
如图示：在这里插入图片描述

二. tabBar设置
效果：

在这里插入图片描述
在app.json文件中的window下创建“tabBar”

添加“list：里面的几个变量分别是
①：pagePath：保存的是页面地址
在这里插入图片描述

②：text：图标下面的文字
在这里插入图片描述
③：iconPath:图标的相对路径（未点击的灰色图标）

附上常用图标网站：https://www.easyicon.net/1178751-Student_Hat_icon.html
④：SelectediconPath：被点击的彩色图标
⑤：注意tabBar的list内必须含有两个以字段
在这里插入图片描述
其他更多API，有兴趣的可查询官网深入学习！