微信小程序底部导航栏是否可以自定义呢?

答案是:当然可以的。那都能做到哪些自定义设置呢?

  1. 可以改变小程序底部导航栏的导航数量
  2. 可以改变小程序底部导航栏的背景颜色和文字颜色
  3. 可以改变小程序底部导航栏的导航图标
  4. 可以改变小程序底部导航栏的导航页面

我们一一演示这四种自定义底部导航的方法和效果。

改变小程序底部导航栏的导航数量

首先登录聚分云商家平台 > 商城 > 商城风格 > 底部导航设置

微信官方规则规定:底部导航最多允许5个,最少允许2个。所以我们可以设置导航不显示,来关闭不想要的导航。

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图一篇教程完全搞懂微信小程序底部导航栏怎么设置插图1

保存设置,点击生成体验版本,查看效果:

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图2一篇教程完全搞懂微信小程序底部导航栏怎么设置插图3

可以看到只剩下 首页、兑换、我的。三个导航。设置成功。

改变小程序底部导航栏的背景颜色和文字颜色

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图4一篇教程完全搞懂微信小程序底部导航栏怎么设置插图5

可以改变底部菜单栏的文字默认颜色、选中颜色、背景颜色、边框颜色。效果如下:

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图6一篇教程完全搞懂微信小程序底部导航栏怎么设置插图7

可以看到底部导航栏的背景、文字颜色等已按照我们设置的显示了

改变小程序底部导航栏的导航图标

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图8一篇教程完全搞懂微信小程序底部导航栏怎么设置插图9

系统内置六套导航图标,仍在陆续添加中,可任意选择底部导航图标样式。改变效果如下:

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图10一篇教程完全搞懂微信小程序底部导航栏怎么设置插图11

可以看到上图中,图标已变更我们选择的适合宠物店、儿童相关的门店积分小程序图标。

可以改变小程序底部导航栏的导航页面

聚分云积分商城小程序默认导航页面如下:

  1. 首页
  2. 兑换
  3. 门店
  4. 优惠券
  5. 我的

这五个导航页面,可以设置不显示(上面已有教程演示),也可以用其他页面代替。有些商家不希望展示门店和优惠券,希望展示一些自己的活动海报,或者公司介绍。那么可以设置如下:

把位置三下拉,选中专题:

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图12一篇教程完全搞懂微信小程序底部导航栏怎么设置插图13

然后设置自定义名称:五一活动。 注:自定义名称最多四个字

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图14一篇教程完全搞懂微信小程序底部导航栏怎么设置插图15

然后保存设置,然后点击页面右上角的预览和发布小程序按钮,生成体验版本,预览一下效果如下:

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图16一篇教程完全搞懂微信小程序底部导航栏怎么设置插图17

我们可以看到上图中的底部导航栏的五一活动,和公司介绍,都已经展示出来了。

点击五一活动,进入专题页

点击公司介绍,进入推荐页

什么是专题页和推荐页?

商城创建成功后,系统默认生成了三个页面:首页(小程序首页)、专题页、推荐页。 这三个页面不能删除,可以任意装修成你想要的内容页面。

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图18一篇教程完全搞懂微信小程序底部导航栏怎么设置插图19

最重要的一步:如何让这些设置生效?

变更以上内容,都需要生成体验版本后,提交微信审核,审核通过后发布才可以真正生效。

第一步:先点击生成体验版本,如下图:

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图20一篇教程完全搞懂微信小程序底部导航栏怎么设置插图21

会弹出确认框,展示当前的小程序设置,确认无误后,点击生成体验版本按钮,如下图:

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图22一篇教程完全搞懂微信小程序底部导航栏怎么设置插图23

第二步:点击生成体验版本

点击上图中的生成体验版本后,就会出现下图提示生成成功,可以扫描小程序体验二维码预览。注意:只有小程序的管理员,以及小程序的体验成员才可以扫码预览。

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图24一篇教程完全搞懂微信小程序底部导航栏怎么设置插图25

第三步:点击提交审核并发布

扫码预览后,确认无误,和预期效果一致,则可以点击提交审核并发布了。如果审核通过,系统会自动发布。

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图26一篇教程完全搞懂微信小程序底部导航栏怎么设置插图27

点击提交审核后,会显示上图,审核时间大约在1~7个工作日之间。大多是1天。此时可以关掉此弹窗了。只需等待微信审核即可。

可选操作:撤回审核

如果还需要更改,或者不想提交审核,可以点击撤回审核按钮。

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图28一篇教程完全搞懂微信小程序底部导航栏怎么设置插图29

注意:微信官方规则:撤回审核操作是有次数限制。

一篇教程完全搞懂微信小程序底部导航栏怎么设置插图30一篇教程完全搞懂微信小程序底部导航栏怎么设置插图31