微信小程序设置底部菜单栏

微信小程序底部菜单栏的创建过程。

操作方法

  • 01

    要创建底部菜单栏,首先创建好我们底部菜单栏需要跳转的页面,这里值演示2个,一个首页,一个我的。

  • 02

    打开app.json页面,在window下写下面的代码 "tabBar": { "color": "#bfbfbf", "selectedColor": "#d81e06", "list": [ { "pagePath": "pages/index/index", "text": "首 页", "iconPath": "/images/m12.png", "selectedIconPath": "/images/m11.png" }, { "pagePath": "pages/wode/wode", "text": "我 的", "iconPath": "/images/m13.png", "selectedIconPath": "/images/m14.png" } ] }

  • 03

    首先我们设置底部菜单点击前和点击后文字的颜色,最好和图片一个颜色。 图中红色为选中前,绿色为选中后。

  • 04

    我们填写一下点击跳转的路径和选项的名字, pagePath为点击后跳转的路径, text为这个选项的名字。

  • 05

    填写点击前的图标和点击后的图标,这里我们每个选项用两个颜色图标,可以去找矢量图,尺寸大约在64像素左右。 iconPath为点击前的图标, selectedIconPath为点击后的图标。

  • 06

    目前菜单栏最多支持5个选项,下面用两张图看一下完成的效果。点击之前是灰色的,点击之后是红色,跳转到对应的页面。

微信APP
(0)

相关推荐

  • 如何给微信小程序设置开通直播功能

    今天给大家介绍一下如何给微信小程序设置开通直播功能的具体操作步骤.1. 打开电脑上的浏览器,进入百度,输入微信公众平台进行搜索2. 然后在结果中,进入官网,然后登录小程序后台3. 登录之后,在打开的页 ...

  • 如何为微信小程序设置服务器地址?

    腾讯要求微信小程序使用到的域名都需要在公众平台中进行设置(可以说是一种备案).那么如何为微信小程序设置服务器域名地址呢? 操作方法 01 首先用小程序账号登陆微信公众平台.然后点击左下角的" ...

  • 如何给微信中的百度网盘小程序设置使用百度账号登录

    我们在使用微信中的百度网盘小程序的时候,想要使用百度账号进行登录,该怎么操作呢?今天就跟大家介绍一下如何给微信中的百度网盘小程序设置使用百度账号登录的具体操作步骤.1. 打开手机上的微信APP,进入主 ...

  • 怎么设置微信小程序收款通知?微信小程序收款通知设置方法

    微信小程序收款通知可以进行设置了,这个功能最新上线,不少小伙伴们不清楚怎么设置的,就让小编给大家详细的讲讲设置方法,想知道的就一起来看看吧. 微信小程序收款通知设置方法介绍 微信共上线了微信支付公众号 ...

  • 微信小程序怎么设置启动页面?

    微信小程序可以设置到启动页面上,这样就不用每次都去发现标签下再进入小程序,一步步的这样麻烦的操作了.跟着小编一起做,学会设置微信小程序的启动页面.这样可以避免每次重复去找常用的小程序. 1.开始我们先 ...

  • 如何给微信的QQ小程序设置开启悬浮窗

    我们想要给微信中的QQ小程序,设置悬浮窗,该怎么操作呢?今天就跟大家介绍一下如何给微信的QQ小程序设置开启悬浮窗的具体操作步骤.1. 首先打开手机上的微信APP,然后找到腾讯QQ的小程序点击进入.2. ...

  • 微信小程序中的浮窗怎么设置开启

    我们在使用微信小程序的时候,想要看聊天消息,还得退出小程序,然后再查看消息,比较不方便,如果设置了小程序浮窗就可以很方便的查看消息了,今天就跟大家介绍一下微信小程序中的浮窗怎么设置开启的具体操作步骤. ...

  • 微信小程序客服怎么设置绑定微信客服?

    现在小程序功能越来越强大了,从原来的模板消息到现在的公众号文章添加小程序,一步步走向了人性化,那么微信小程序客服最多能添加几个呢?怎么添加?一起看下. 1.进入注册好的微信小程序后台,点击进入[客服消 ...

  • 如何设置微信小程序权限(微信小程序授权管理在哪里)

    在微信小程序开发的过程中,一个项目可能由多人共同完成.由于每个人的工作内容不同,因此需要对其进行权限管理.通过开发者权限来使用开发者工具完成小程序的开发,开发完成后通过开发管理来实现版本发布及上线.1 ...