局部配置和全局配置_06. 教你零基础搭建小程序(解读全局配置文件-tabBar字段)...

3fb156848a72cbb9e485fd2313fddf16.png

自从开始在知乎上发教程后,发现一个事情啊,

大家对于我写的教程,都在偷偷地收藏~~

但是,

却没有银点赞~

c23bb3483c54d6da83387c9169c5ba04.png

知乎这个平台吧,点赞的分量比收藏更大,

这里也不是要赞(我知道自己还能做的更好),

只是希望看了我文章觉得我写得还行的童鞋们,

给我点个赞,多多支持一下,让更多有需要的人看到~

谢谢大家了~~~

3a976f5668ec3907fc061ffb626853e7.png

咳咳,说正事,开始我们今天的小程序开发小课堂~~~

上一篇文章,我们一起掰扯了全局配置文件-window字段的相关知识,

大家看过的,再复习一下,没看过的点击下方链接!

相信自己:05. 教你零基础搭建小程序(解读全局配置文件-window字段)​zhuanlan.zhihu.com
57362638bbca689dda9a2fe92ab5ee81.png

还有没学过小程序开发的,想从头学习的,

安排!

点击下方小程序训练营,系统学习吧~~

小程序训练营​zhuanlan.zhihu.com
0cb4d3bb4de7535d6e274a08f92de689.png

话不多说(废话真多),今天一起来学习全局配置文件-tabBar字段吧~

(一) tabBar 字段的定义和功能

什么是tabBar 字段呢?

先来看一下,官方定义

448caa9f77c428228969d72fcd8a1565.png

in other words,

tabBar 字段就是负责创建一个标签页的效果。

啥意思涅?

我们打开某宝APP首页,首页下方的底部标签页面,

我们使用全局配置文件中的tabBar 字段,就是来实现类似 某宝 底部标签 的效果呈现。

34c2ade9cb9cfd8519001b867ca220c4.png

(二)认识 tabBar 字段 的 属性—— list 属性

  • list 属性的描述和组成部分

回到微信开发者工具 界面中,

tabBar 字段是长介样儿的

b5e808ceb128126cfff9a38308cd2053.png
list 属性 官方解释如下:

f13b8bb595fb33ebf54906ca5d1422d8.png

由上上图可看到,

list属性下包括4部分,

pagePath:页面路径 text:标题 iconPath:未被选中的页面路径 selectedIconPath:已选中的页面图标路径

艾瑞巴蒂,

我知道,我又在一本正经胡说八道了,

3839eb8b8989749c41b5165c79401ed8.png

好吧~

我们还是图文并茂吧~~

1、pagePath:页面路径

还是拿某宝来说吧, pagePath 这一行, 决定的就是, 点击下方菜单栏,要跳转至哪一个页面的路径。

0759f7a2e123a5c7d08fba0c07d8ab4d.png

2、text:标题

如上图所示, 某宝中,下方菜单 比如:微淘,消息,购物车等,都是 text

3、iconPath:未被选中的页面路径

iconPath : 点击某宝-购物车后, 可以看到下图菜单栏中未选中的页面的状态

85d6748db0ed58f9486de87df1493efc.png

4、selectedIconPath:已选中的页面图标路径

某宝中, 点击“首页”后, 下方菜单栏的页面路径

904a0e09d779f702aff2b104791a3bcb.png

f0a495acfbd7814bc0c07c37eb4c3aa5.png
了解完 tabBar 字段的list属性后, 我们可以发现, 要想在小程序中建立向某宝页面底部中一样的tab栏, 一要先在全局配置文件中的pages 字段中,新建各个子页面; 二是还要用到图标icon, 并将图标文件夹复制至开发者工具中建立的小程序项目目录下, 并且,icon文件夹与pages、utils文件夹同层级别, 如下图所示。

0d281327bb07a58c00afdb73f2759736.png

这里,本节课,需要用到这8个图标(想要的童鞋,私聊我哦~~)

039e57e230560fc1d31fa9ff64dc771a.png
  • tabBar 字段中的实操—— 建立小程序底部的tab栏

这是实操模板,手把手带你敲代码~~

1、pages 字段中新增tab栏各个子页面

步骤如下:

(1)将 index 页面(首页页面)放在最前面,如下图所示

b26dd1bb7f2b79bfda091e2ba6e8fd0a.png
(2)根据icon 文件夹中的后四个图标,编写每个图标的页面路径 home--首页 页面; img--图片预览 页面; my--个人中心 页面; search--搜索中心 页面 (3)点击“保存”键 四个页面的代码和呈现结果如下:

393ca0745df402d29601dfe1dd54b94c.png

2、tabBar 字段中新增四个子菜单栏

步骤如下:

(1)点击下图标识,将window 字段折叠

e1ad30752ebf8f6d65b480cf57db20d4.png
(2)window 字段后加入 tabBar 字段

ad1551e8146b5ae7e24ddf6c55b5181a.png
(3)在tabBar 字段中编辑 index (首页) 页面,代码修改如下:

a018a54761dce845ad4aa89061431bc3.png
首页 页面用到这两个图标,名称一定要写对哦~

ff26adb095c8136cfa239bdafef13a16.png
(4)点击保存, 发现调试器下面报错, 意为 tabBar 字段中要同时加入2个页面的路径

a834436bd8df36054bbba6dda925b635.png
(5) 在 "index" 路径后加“,”(如下图中的1) 复制 tabBar 字段中 "index" 代码(如下图中的2)

cf3dca862fd0736e3460162f6f6aa577.png
(6)将复制的代码修改成img(图片)页面,代码如下

9a1396354d0b30013d9a39a651660444.png
img(图片)页面用到这两个图标,名称一定要对上!

a9d3fead4aa3f64ca2cc100cf2424878.png
(7)按下”保存“键,小程序页面呈现如下 可以看到,”首页“是选中的状态,而图片菜单是未选中的

903595244dc58446848fe224c1555e6e.png
(8) 继续在下方,复制 tabBar 字段中 "index" 代码,修改成”个人中心“页面 和 ”搜索中心“页面的代码,如下图

ba51c10f917e4734fe9872c2bd1b40bc.png
(9)点击保存,看呈现界面的变化

6518d6dc4c969d39f4dd334dc421c70f.png

如上图所示,小程序现在的底部菜单栏颜色是很单调的。

我们可以应用 tabBar 字段中的其他颜色属性来调整颜色。

属性哪里找呢?

请点击下方链接,跳转至小程序官方指导文档中,
全局配置 | 微信开放文档​developers.weixin.qq.com
b3e9d926801077e4e1c96d2ac2ef5669.png

定位到 tabBar 字段 的属性介绍页面,如下图

aff3646f4f48e40ffc950e565fb47036.png

(三)认识 tabBar 字段 的 属性—— color 属性

我们修改菜单栏名称的颜色,这里用到的属性是 color

tabBar 字段中,与list同层级,敲入 color 属性的代码 修改颜色为"#0094ff"(蓝色)

fc0c73873090262a9903262aafaa20c4.png
菜单栏的字体颜色,变成蓝色~~

45cc10ec3dad6c149247c73addcc69db.png

(四)认识 tabBar 字段 的 属性——selected color 属性

修改选中菜单栏页面的字体颜色,我们用到selected color 属性

c668157fd79fc91cdbb389149edd820c.png

步骤如下:

在color 属性后,紧接着加入 selected color 属性, 颜色修改成橘黄色”ff9400“,保存,最后如下图, 被选中的页面(首页页面)的名称是橘黄色的

748cc4c9cfa021ecb1ce9197e3ae785f.png
敲黑板!!咚咚咚! 这里的颜色不能直接写 red, yellow等, 一定要是十六进制颜色! 细心的童鞋,会发现, 官方文档中也明确提到了。

86ee79597f8eb6ab3501ff466a3b0c8e.png

(五)认识 tabBar 字段 的 属性—— background color 属性

修改选中菜单栏页面的字体颜色,我们用到background color 属性

在selected color 属性后,紧接着加入 background color 属性, 颜色修改成红色”ff5433“,保存,最后如下图, 菜单栏的背景颜色变成红色。

f255350b7f9928bd1523802e354dd559.png

(六)认识 tabBar 字段 的 属性—— position 属性

改变菜单栏在页面中的位置,我们用到position 属性

菜单栏在小程序中是默认在底部的, 如果想要菜单栏呈现在 顶部,就要用到position 属性, 如下图所示,position 属性仅支持 顶部(top)和底部(bottom)两种

402cdd5a02041a3b9d1a01c9e64cb796.png
与list 属性同层级,加入position 属性, 代码如下图, 将菜单栏设置为在页面的顶部, 而且,大家也可以发现, 当菜单栏跑到顶部后,各个页面的图标都消失了 这是小程序的规定,大家指导就好了~~

d8f1d45fbf591dbf8846ec860339d9e1.png

tabBar 字段中还有一些本章未讲到的属性,大家课下自行实践哈~~

最后,我们再来总结一下,这章的内容

(一) tabBar 字段的定义和功能

(二)认识 tabBar 字段 的 属性—— list 属性

  • list 属性的描述和组成部分
  • tabBar 字段中的实操—— 建立小程序底部的tab栏

(三)认识 tabBar 字段 的 属性—— color 属性

(四)认识 tabBar 字段 的 属性——selected color 属性

(五)认识 tabBar 字段 的 属性—— background color 属性

(六)认识 tabBar 字段 的 属性—— position 属性

最后的最后,欢迎大家看完后给提点意见~ 如果觉得有帮助,希望得到一枚小小的赞~ 支持原创,鼓励我辛苦码字~~~ 谢谢啦~~~

bd8ee2bc02bef45155adf2466248ab57.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/527206.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python编程类型_Python 基础编程 数据类型(一)

Python 对象类型对象类型类型的类名描述Characterchr单字节字符,在字符串中使用Integerint32位整数Floatfloat双精度(64位)浮点数Long integerlong任意大的整数Complexcomplex复数Character stringstr有序(数组)字符集Dictionarydict键 / 值 对字典Tupletuple不可变…

mac系统在云服务器地址,mac如何登陆云服务器地址

mac如何登陆云服务器地址 内容精选换一换本章节指导用户获取云服务器的IP地址等网卡信息。进入弹性云服务器页面。进入云服务器详情页面。进入网卡详情页面。网卡详情页面进入虚拟IP详情页,即可根据云服务器网卡信息找到绑定的虚拟IP地址。本章节介绍如何使用弹性云…

时间转化_Excel常见时间日期函数全讲解,10个函数教你如何进行日期转化

在工作中我们经常会碰到一些需要转化或者计算时间日期的工作,这里就需要我们用到一些常见的Excel时间日期函数。今天我们就通过十个案例来教大家,如何在实际工作中对时间日期进行转化处理。函数一、显示当前日期函数TODAY()2018/10/10函数二、显示当前日…

线扫相机 编码器_面阵和线扫工业相机选型

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/snowbird13/article/details/64919984一. 面阵相机和镜头选型已知:被检测物体大小为A*B,要…

hdc mfc 画扇形图_MFC画图总结-DIB图形绘制

http://blog.sina.com.cn/s/blog_4c75bd8c0100zsw7.html绘制DIB图到到设备,明白一点。DIB设备无关图形向设备CDC上绘的话,肯定是须要经过图形pixel像素转换的,要转换成设备的颜色像素格式。參考这段说明:DIB的颜色信息储存在自己的颜色表中。…

alive的不生效 keep vue_webpack打包vue项目 keep-alive不生效

项目会使用tab功能,进而需要对页面数据进行缓存。在本地开发的时候,能够正常缓存,但是在使用webpack打包后,上传至服务器发现缓存失效,导致有些业务出错。路由代码:module.exports (file: string) > { …

回旋滚动_中频炉电动旋转轴承,管道回旋轴承,电炉旋转轴承

中频炉电动旋转轴承,管道回旋轴承,电炉旋转轴承,,管道旋转轴承自带双边法兰,在集尘罩管道做法兰和主管道的法兰连接,旋转轴承可以360度旋转,除尘器管道轴承可以同时承受较大的轴向、径向负荷和倾覆力矩。除尘器旋转轴承…

dao层如何调用对象_你的项目应该如何正确分层?

你好,欢迎收听极客视点。 说起应用分层,大部分人都会认为这不是很简单嘛,就Controller、Service、Mapper三层。但在“简单”背后,很多人并没有将各层级的职责划分清楚。比如在很多代码中,Controller比Service还多&…

combobox 如何让text居中_MFC 中ListBox 与 ComboBox 中的文本如何实现水平居中与垂直居中 - 小众知识...

MFC 中, ListBox 与 ComboBox 中的项在设置了高度的情况下如何实现文本的水平居中与垂直居中???ListBox 与 ComboBox 中的数据均为动态添加文本内容含有数字、英文、中文void CMyComboBox::DrawItem(LPDRAWITEMSTRUCT lpDrawItemS…

android 子module混淆_Android 多模块打包混淆填坑记

最近有个 sdk 的项目使用了多模块(Module)开发,然后提供 jar 包给接入者使用,要求大部分类是混淆过的,保留几个接口,Android Studio 能够导出 aar 文件,对于导出 jar 却要大费一番周折。我在网上找到这个比较靠谱的解决…

mysql索引_MySQL索引介绍和实战

索引是什么MySQL官方对索引的定义为:索引(Index)是帮助MySQL高效获取数据的数据结构。可以得到索引的本质:索引是数据结构,索引的目的是提高查询效率,可以类比英语新华字典,根据目录定位词语如果没有目录呢&#xff0c…

mysql自增字段_MySQL自增字段的常用语句

学习MySQL数据库,MySQL自增字段是最基础的部分之一,下面为您介绍一些MySQL自增字段的常用语句,希望对您学习MySQL自增字段能些许帮助。1、创建表格时添加: create table table1(id int auto_increment primary key,...)2、创建表格…

mysql安装需要注意什么意思_mysql 安装过程及注意事项

1.1. 下载:我下载的是64位系统的zip包:下载zip的包:下载后解压:D:\软件安装包\mysql-5.7.20-winx641.2. 配置环境变量:变量名:MYSQL_HOME变量值:E:\mysql-5.7.20-winx64path里添加:%…

mysql 语句检查_mysql查询语句

一、简单查询1.最简单查询(查所有数据)select * from 表名 注意:* 代表所有列,并不是代表所有行例:select * from test2.查询指定列select 列名,列名 from 表名例:select code,name from test3.修改结果集的列名 asselect 列名 …

mysql索引 物理文件_MySQL体系结构之物理文件

一、MySQL日志文件mysql日志文件及功能:日志文件功能错误日志记录启动、停止、运行过程中mysqld时出现的问题通用日志记录建立客户端连接和执行的语句二进制日志记录更改数据的所有语句,还用于复制慢查询日志记录执行时间超过long_query_time秒的所有查询…

mysql每次查询1000条数据库_30多条mysql数据库优化方法,千万级数据库记录查询轻松解决...

1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,Sql 代码 : select id from t where …

mysql count转字符串_MySQL字符串函数

把字符串转成小写mysql> select sex,LCASE(job) from string_test where jobDUCK;------------------| sex | LCASE(job) |------------------| 1 | duck |------------------1 row in set (0.00 sec)3,FIND_IN_SET(str,strlist)4,FIELD(str,str1,str…

gitlab 端口_安装Gitlab-注意端口

文档本身并没有什么特殊,安装也很简单,只是修改端口这里如果有需要的可以看一下安装Gitlab[rootdeploy ~]# sudo yum -y install gitlab-ce默认端口是8080,避免冲突还是修改一下[rootlocalhost ~]# cat /etc/gitlab/gitlab.rb |grep 192.168.…

MySQL read-c_技术分享 | MySQL C API 参数 MYSQL_OPT_READ_TIMEOUT 的一些行为分析

作者:戴岳兵MYSQL_OPT_READ_TIMEOUT 是 MySQL c api 客户端中用来设置读取超时时间的参数。在 MySQL 的官方文档中,该参数的描述是这样的:MYSQL_OPT_READ_TIMEOUT (argument type: unsigned int *)The timeout in seconds for each attempt t…

mysql出现core dumped_mysql-为什么我遇到分段错误(核心已转储)?

这是我要运行的代码.它可以编译,并且工作良好,直到昨天.#include #include int main(int argc, char **argv){MYSQL *conn;MYSQL_RES *result;MYSQL_ROW row;int num_fields;int i;conn mysql_init(NULL);mysql_real_connect(conn, "hostname", "username"…