微信小程序怎么添加底部菜单按钮

原创 麻木  2019-09-18 22:36:13  阅读 193 次 评论 2 条

麻木博客
摘要:

效果图:

image.png


继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面。

需要什么:

  • 微信小程序账户

  • 电脑一台

  • 电脑安装微信开发者工具软件

不懂可以参考文章:


开始操作:

1:打开电脑浏览器打开输入“微信公众平台”,登陆注册好的微信小程序账户。

image.png


2:桌面新建一个文本文档,将Appid复制到文本文档保存(如果不知道文本文档是什么请关闭电脑),省的每次都需要登陆查看。

image.png

image.png


3:打开安装好的“微信开发者工具“,扫码登陆账户。

image.png


4:新建或者打开原来的项目

image.png


5:需要在app.json中添加代码,即可实现底部菜单的添加

image.png


6:每个菜单按钮都需要两个图标图片。

image.png


7:需要将图标图片保存到新建的目录中,选择右上角的详情,打开本地目录打开

image.png


8:新建一个images目录,将图标素材复制到里面

image.png

image.png

素材下载地址:

麻木博客此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“麻木博客”或者“mamublog”或者微信扫描右侧二维码都可以关注本站微信公众号。

此处内容需要评论后才能查看。
点击去评论



阿里图标素材库:

麻木博客此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“麻木博客”或者“mamublog”或者微信扫描右侧二维码都可以关注本站微信公众号。


此处内容需要评论后才能查看。
点击去评论


9:新建并保存图标图片后返回微信开发者工具,即可看到看刚才创建的image文件夹及图标图片


image.png


10:开始输入代码,app.json中的”window代码下添加以下代码:

"tabBar": {
"color": "#121f2f",
"selectedColor": "#3a6ea5",
"backgroundColor": "#fff",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/movie/movie",
"iconPath": "images/07.jpg",
"selectedIconPath": "images/8.jpg",
"text": "电影"
},
{
"pagePath": "pages/movie/movie",
"iconPath": "images/02.jpg",
"selectedIconPath": "images/01.jpg",
"text": "影片"
}
]
},
"sitemapLocation": "sitemap.json"
}



image.png


11:其中单个按钮代码为这些


{
"pagePath": "pages/movie/movie",
"iconPath": "images/07.jpg",
"selectedIconPath": "images/8.jpg",
"text": "电影"
}

需要几个按钮就添加几段代码,末尾不需要逗号结束

image.png


12:接下来自行更改按钮文字图标图片路径


image.png


解释下代码意思:

image.png



13:回顾刚才images路径:在根目录创建的images文件夹,所以app.json代码中iconpathselectdlconpath路径为“images/图标图片名称+图片格式(jpg/png)

image.png

image.png


14:编辑好好确定没错后点击上方编译查看是否生效或是否有错

image.png


15:下方没报错,左侧模拟器即可显示效果。

image.png

image.png


如果是这样的报错即为图片路径出错

image.png


如果是这样的报错即为app.json中逗号结尾问题删除多余逗号即可。

image.png


正确代码:

image.png


本期的微信小程序怎么添加底部菜单按钮到此结束,不知道你学会没??

麻木博客

打赏 支付宝打赏 微信打赏
本文地址:https://www.mamublog.cn/post/72.html
版权声明:本文为原创文章,版权归 麻木 所有,欢迎分享本文,转载请保留出处!

站点广告专区

麻木博客
麻木博客

发表评论


表情

评论列表

  1. 麻木站长
    麻木站长  @回复

    欢迎留言!

  2. xt
    xt  @回复

    电商专用快递网站www.dh5u.com单号无忧