果酱小程序详细介绍:自定义底部菜单栏
前面介绍了果酱小程序实现了真正的内部链接跳转,然后还了实现卡片模板,这是目前所有 WordPress 小程序唯一实现自动内部链接跳转的。
果酱小程序的底部菜单栏是使用小程序的 Tabbar 组件实现的,微信小程序 Tabbar 组件是可以自定义字体默认和选中颜色,可以自定义菜单栏的图标。
所以下面介绍果酱小程序另外一个重大的功能:自定义底部菜单栏。这个功能让很多人在 WordPress 就可以自己自定义一套底部菜单栏的图标,无需重新重新发布小程序,就能完全展示自己小程序的风格。
底部菜单栏-基础设置
进入后台,点击「微信小程序」菜单下的「底部菜单栏」子菜单,首先就可以让你自定义底部菜单的默认颜色和选中颜色,还有背景颜色,上边框颜色:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/03/1616421884-image.png?imageMogr2/auto-orient/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
底部菜单栏-自定义图标
对于图标样式,果酱小程序已经内置了两套图标样式,分表的效果是:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/03/1616422344-image.png?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/03/1616422379-image.png?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
注意切换了图标样式之后,需要在最近小程序中删除小程序,再次进入才能看到效果:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/03/1616422434-image.png?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
如果选择自定义图标,点击「菜单栏」标签页:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/03/1616422820-image.png?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
点击每个菜单下的「设置」就可以设置每个菜单的图标和按钮文字:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/03/1616422702-image.png?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
最后提醒一下,修改了图标和按钮文字,做了任何修改之后,要在小程序中立刻看到效果,需要在最近小程序中删除小程序,再次进入才能看到效果:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/03/1616422434-image.png?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
果酱小程序有免费版本和收费版本,收费版支持小程序端直接发布文章,支持自定义首页模块,生成海报和分享到朋友圈,小程序扫码登录 WordPress 后台等,功能更加完善。长按下面的二维码体验:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2020/12/1607529423-6c59d807af52e86f52ab52e5d0d7ebd3.jpeg?imageMogr2/auto-orient/thumbnail/!430x430r/gravity/Center/crop/430x430/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
关注公众号「WordPress果酱」回复「果酱」即可获取免费版,收费版则需要联系微信号「chenduopapa」购买,每个小程序授权为500元,现优惠价300元。有需求请长按下面二维码:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2020/04/1587400941-36e81e30e6e2ca4d1d6bac7c73d24a7c.jpg?imageMogr2/auto-orient/thumbnail/!430x430r/gravity/Center/crop/430x430/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)