微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面。
需要什么:
微信小程序账户
电脑一台
电脑安装微信开发者工具软件
不懂可以参考文章:
微信小程序初章-注册微信小程序账户及安装微信小程序开发者工具篇
开始操作:
1:打开电脑浏览器打开输入“微信公众平台”,登陆注册好的微信小程序账户。
2:桌面新建一个文本文档,将Appid复制到文本文档保存(如果不知道文本文档是什么请关闭电脑),省的每次都需要登陆查看。
3:打开安装好的“微信开发者工具“,扫码登陆账户。
4:新建或者打开原来的项目
5:需要在app.json中添加代码,即可实现底部菜单的添加
6:每个菜单按钮都需要两个图标图片。
7:需要将图标图片保存到新建的目录中,选择右上角的详情,打开本地目录的打开。
8:新建一个images目录,将图标素材复制到里面
素材下载地址:
https://www.lanzous.com/i68xv8b
或
https://www.lanzous.com/i68xv8b
阿里图标素材库:
https://www.iconfont.cn/collecti***/detail?cid=29
或
https://www.iconfont.cn/collecti***/detail?cid=29
9:新建并保存图标图片后返回微信开发者工具,即可看到看刚才创建的image文件夹及图标图片
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" }
11:其中单个按钮代码为这些
{ "pagePath": "pages/movie/movie", "iconPath": "images/07.jpg", "selectedIconPath": "images/8.jpg", "text": "电影" }
需要几个按钮就添加几段代码,末尾不需要逗号结束
12:接下来自行更改按钮文字及图标图片路径
解释下代码意思:
13:回顾刚才images路径:在根目录创建的images文件夹,所以app.json代码中iconpath与selectdlconpath路径为“images/图标图片名称+图片格式(jpg/png)”
14:编辑好好确定没错后点击上方编译查看是否生效或是否有错
15:下方没报错,左侧模拟器即可显示效果。
如果是这样的报错即为图片路径出错
如果是这样的报错即为app.json中逗号结尾问题,删除多余逗号即可。
正确代码:
本期的微信小程序怎么添加底部菜单按钮到此结束,不知道你学会没??
微信小程序怎么添加底部菜单按钮相关推荐
- php 微信创建客服,如何给微信小程序内添加客服按钮
这次给大家带来如何给微信小程序内添加客服按钮,给微信小程序内添加客服按钮的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自定义 大 ...
- 微信小程序自定义tabbar底部菜单
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景. 在自定义 tabBar 模式下,为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配 ...
- vue微信小程序uniapp添加悬浮菜单
在项目中可能会有一些页面需要加一个悬浮按钮,提供一些额外的菜单 本项目通过uniapp来演示如何将一个按钮悬浮在页面右下角 有需要的话需要把view标签替换成div 效果: 想直接看全部代码不想看各种 ...
- 微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮 弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消 提示:您选择了菜单{ ...
- 微信小程序 界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件 点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
- 微信小程序如何隐藏右上角分享按钮
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序右上角有个转发按钮 可以分享转发当前页面到群或者微信好友. 右上角胶囊按钮>转发 转发可以配置转发是路径参 ...
- 微信小程序怎么添加到主屏幕将微信小程序放到手机桌面?
微信小程序在一些场景下使用还是非常方便,如果遇到需要经常使用的微信小程序,将该微信小程序添加到手机桌面上,下次直接点击打开将更方便. 例如:草柴微信小程序很多人每天都在用免费领取美团外卖红包优惠券.饿 ...
- 微信在线客服 php,微信小程序中添加联系在线客服功能
这次给大家带来微信小程序中添加联系在线客服功能,微信小程序中添加联系在线客服功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自 ...
- # 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动 一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
最新文章
- linux c语言文件属性,Linux C获取文件属性
- hbase java api 两种方式
- scala spark 埋点统计_spark—1:WordCount(Python与Scala对照)
- python所有变量更新_PYTHON:使用python变量更新MULTIPLE COLUMNS
- js map对象遍历_前端测试题:有关于js中跨域请求的说法,错误的是?
- java 管理系统登陆完毕后关闭窗口_【求助】登录窗口登录成功后隐藏窗口
- ES6新特性_ES6模板字符串---JavaScript_ECMAScript_ES6-ES11新特性工作笔记007
- iOS 10 不提示「是否允许应用访问数据」,导致应用无法使用的解决方案
- 高岭土吸附阳离子_高岭石对金属阳离子的吸附特性研究
- ACL2020 | 什么时候值得用BERT上下文嵌入
- git还原所有更改,拉取远程分支到本地
- 黑马程序员提供得教程
- matlab中邮递员问题实例,中国邮递员问题的求解实例.doc
- 动态链表头插法 和 动态尾插法
- unity shader中关于Tags的整理
- 黑马程序员---其他对象
- Python实用脚本实践
- ftp登录成功,无法取得列表
- XPC connection interrupted
- Tableau可视化设计案例-05Tableau进阶
热门文章
- Android Room 数据库最佳入门教程
- 看懂影片标题,各种电影视频格式标题的含义
- 移动端判断手机横竖屏状态及加载相应样式或内容的解决方案
- suse报:passwd: Module is unknown passwd: password unchanged 或 passwd: Permission denied
- 天蝎项目整机柜服务器技术规范v1.01,第九章 天蝎项目整机柜服务器技术规范v1.01.pdf...
- input发送a.jax_Java EE 7和JAX-RS 2.0
- 常用的RGB颜色值参考表
- echarts地图功能实现及坐标定位
- 研究B站个人收藏中已失效的视频
- ID卡、IC卡,RFID卡,NFC卡的简单介绍