微信小程序01:底部菜单(tabBar)

微信小程序01:底部菜单(tabBar),第1张

tips:

1.小程序底部菜单标签个数不少于2个,最多不超过5个。

2.可以在 阿里巴巴矢量图标库 找到你需要的图标。

3.小程序建议图标大小为81*81px

我这边选择的是64尺寸的png图片高咐弊,每一个图标选择两种颜色,分别对应未选中状态和选中状态,具体按照你们设计项目进行

tips:

1.建立项目图片文件夹简樱:images

2.在pages中建立相戚族对应的菜单栏目文件夹

3.配置app.json: tabBar配置

1.app.json中,"window":{}和"tabBar":{}是同级

2. 全局配置

3. 设置tabbar地址:wx.setTabBarBadge(Object object)

小程序的入口数量已达到50个(如有遗漏,欢迎大家补充)。为了方便大家理解,我们把小程序的50个细分入口分为以下七大类:

「发现」栏主入口(6个)

小程序自身入口(7个)

搜索栏(6个)

公众号入口(6个)

二维码/小程序码入口(10个)

微信场景内入口(9个)

其他入口(6个)

主入口:微信的搭型「发现」栏作为主入口,也拥有了6个细分入口:

微信「发现」栏小程序主入口

微信「小程序」服务通知

微信主页顶部置顶入口

Android 系统添加到桌面图标

微信「小程序」中「附近的小程序」列表

「附近的小程序」列表广告(LBS 推广功能)

小程序自身入口:在使用小程序的过程中,也会发现小程序的入口也是无处不在,我们将这些较为特别的7个细分入口归为一类。

前往小程序「体验版」的入口页

小程序 Profile 页

带 Share Ticket 的小程序消息卡片

「体验版」小程序绑定邀请页

从小程序咐枝弯跳转到另一个小程序

从另一个小程序返回

客服消息列表下发的小程序消息卡片

搜索栏:微信搜索栏的小程序入口越来越多,截止目前共有6个。

微信顶部搜索框

微信顶部搜索框下「历史小程序」入口

「发现」tab 小程序主入口下的搜索栏

「添加好友」搜索框的搜索结果页

Android 系统「发现」tab 中「搜一搜」

微信顶部搜索框搜索结果页中「使用过的小程序」列表

公众号入口:公众号最近与小程序的关联甚是密切,入口与场景也越越来越丰富,目前有6个。

公众号 Profile页「相关小程序」列表

公众号自定义菜单

关联模板消息

公众号文章

公众号文章「广告」(含小程序落地页广告)

公众号会话下发的小程序消息卡片

二维码/小程序码入口:小程序码与小程序二维码的出现,让小程序的传播与使用场景更加丰富。目前二维码和小程序码的入口有10个。

扫描二维码

长按图片识别二维码

手机相册选取二衡闷维码

扫描一维码

长按图片识别一维码

手机相册选取一维码

扫描小程序码

长按图片识别小程序码

手机相册选取小程序码

二维码收款页面(微信指定小程序)

微信场景内入口:小程序的入口无处不在,目前微信场景的入口已有9个。

好友会话中的「小程序消息卡片」

群聊会话中的「小程序消息卡片」

好友会话资料的「聊天小程序」

群聊会话资料的「聊天小程序」

微信钱宝「第三方服务」

微信支付完成页

支付完成消息

微信 WI-FI 状态栏

微信「卡包」会员卡入口

其他入口:除了微信里大家熟悉的功能入口,还有一些五花八门的小程序进入方式,充分体现了微信对于小程序使用的场景布局。以下是目前6个比较特别的入口。

从 App 分享到微信好友会话,自动转换的小程序卡片

摇电视

小程序顶部的音乐播放器菜单(音频类小程序点击可跳转,如「小睡眠」)

QQ 浏览器导航栏

QQ 浏览器关键词搜索小程序

iOS 11版本的原生相机可扫描小程序二维码

根据微信对小程序的重视程度,为了丰富小程序的使用场景以及培养更接地气的用户习惯,肯定会继续开放越来越多的小程序的入口。小程序的未来,是否也将如今日的公众号和微信支付般辉煌?值得期待!

1、首先新建一个微信小程序项目,在项目中找到app.json这个数据文件。

app.json:是新建项目郑拆闭中默认生成的一个配置文件

2、底部菜单的名称是tabBar,这个名称是跟window窗口同级的,所以在这个配置前加一个逗号即可,接着写入底部菜单的集合,注意括号的位置

tabBar里面的配置有,Color指的是底部菜单文本的默认颜色,selectedColor指的是聚焦选中的底部菜单文本的颜色,background指的是底部菜单的背景色,borderStyle指的是边距现实的风格颜色,喊裂list是配置页面路径,菜单文本,菜单图片元素的集合

3、list的元素讲解:底部菜单有多少个页面就设置多少个集御知合,以逗号分隔开。

pagePath指的是页面的路径,建议第一个跳转集合设置成小程序的首页,也就是index页面,iconPath指的没有选中聚焦底部菜单时小图标的路径,selectIconPath指的是选中底部菜单式的图标路径,texe则是菜单文本。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12464584.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存