从零开始开发微信小程序步骤(三)

前面我们和大家分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。我们先来看个我们要实现的底部导航栏的效果图:(三个导航图标示例,微信小程序最多能加5个)。

从零开始开发微信小程序步骤(三)

1. 图标准备

阿里图标库  http://www.iconfont.cn/collections/show/29

在这个网站上下载一些自己要用到的图标,比如人员头像,home主页等一些常用的图标,直接点击下载保存到本地,修改一下命名。也可以使用UI准备好的图标。

从零开始开发微信小程序步骤(三)

回到项目里,新建一个images文件夹,将刚刚下载好的图标放在文件夹底下备用,将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了。

从零开始开发微信小程序步骤(三)

从零开始开发微信小程序步骤(三)

2. 添加配置文件

我们找到项目根目录中的配置文件 app.json 加入如下配置信息(app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。)

   "tabBar": {  "color": "#a9b7b7",  "selectedColor": "#11cd6e",  "borderStyle": "white",  "list": [    {      "selectedIconPath": "images/1.png",      "iconPath": "images/2.png",      "pagePath": "pages/index/index",      "text": "首页"    },    {      "selectedIconPath": "images/1.png",      "iconPath": "images/2.png",      "pagePath": "pages/logs/logs",      "text": "日志"    },    {      "selectedIconPath": "images/1.png",      "iconPath": "images/2.png",      "pagePath": "pages/test/test",      "text": "测试"    }  ]}

登录后复制

从零开始开发微信小程序步骤(三)

以上只是基础的部分,当然了小程序的官方文档提供了更多的丰富的组件和样式
参考文档:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

OK,结束,保存 编译  就可以实现小程序的经典的底部导航效果了

==============
附录:一份完整代码(可忽略不计)

从零开始开发微信小程序步骤(三)

图片.png

{  "pages":[        "pages/index/index",        "pages/category/category",        "pages/topic/topic",                "pages/user/user",        "pages/logs/logs"  ],  "window":{        "backgroundTextStyle":"light",        "navigationBarBackgroundColor": "#000",        "navigationBarTitleText": "WeiCMS",        "navigationBarTextStyle":"white"  },  "tabBar": {    "color": "#8c8c8c",    "selectedColor": "#f4645f",    "backgroundColor": "white",    "list": [{      "pagePath": "pages/index/index",      "text": "首页",      "iconPath":"images/48.png",      "selectedIconPath":"images/48.png"    },     {      "pagePath": "pages/category/category",            "text": "分类",      "iconPath":"images/48.png",      "selectedIconPath":"images/48.png"    },    {      "pagePath": "pages/topic/topic",            "text": "话题",      "iconPath":"images/48.png",      "selectedIconPath":"images/48.png"    },    {      "pagePath": "pages/user/user",            "text": "我的",      "iconPath":"images/48.png",      "selectedIconPath":"images/48.png"    }      ],    "position": "bottom"  }  }

登录后复制

相关推荐:

从零开始开发微信小程序(一)

从零开始开发微信小程序(二)

微信小程序简单介绍

以上就是从零开始开发微信小程序步骤(三)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/1518072.html

(0)
上一篇 2025年2月18日 05:33:28
下一篇 2025年2月18日 05:33:42

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 黄金回收需要经过哪些程序?

      事实上,黄金价格是相对透明的,我们可以在各种在线渠道上看到每日实时黄金价格报告。例如,新浪财经,或者支付宝和微信上的黄金回收小程序,也可以看到当天的黄金回收。价格与当日上海黄金交易所的价格相同。虽然黄金的回收是明显的,但许多人并不知道黄…

    用户投稿 2025年5月23日
    1800
  • 黄金回收什么价,黄金回收包括哪些步骤?

    黄金回收什么价,黄金回收,是金制品或含金制品的回收。回收的基本目的是实现或重用。定价时,主要基于其黄金内容和国际基本交易价格确定,然后折扣商家的利润点来提供报价。黄金回收什么价,首先,在回收的过程中,大家应该尽量选择专业的黄金回收公司,因为…

    2025年5月22日
    1600
  • 今天黄金回收价多少,黄金加工有哪些步骤?

      今天黄金回收价多少,黄金是一种贵金属,并发现和开发人类最早的金属之一。如何与杂质黄金变色。黄金的颜色与杂质含量的变化:白银和铂金可以使金亮的颜色;铜能使金较深的颜色。胶体金示出了根据其分散和微粘合结构的程度不同的颜色。   一般来说,加…

    2025年5月18日
    1600
  • 黄金回收的步骤,9999黄金换999划算吗?

    9999黄金换999不,划算足金999和足金9999,他们俩之间的纯度有一些区别的。足金999也就是所谓的千足金,它的黄金纯度是99.9%,而足金9999就是所谓的万足金,它的黄金纯度是99.99%,他们之间相差了0.09%的纯度,在这一方…

    2025年5月16日
    1500
  • 黄金回收步骤,9999黄金能买吗?

    9999黄金又称为万足金代表金含量到达了99.99%,假如是用于黄金保值投资完整能够放心购置。假如是用来做黄金首饰佩戴则不引荐了,由于金子纯度越高就越容易变形,在雕琢加工方面就会费事许多,而千足金跟万足金相比仅仅差了0.09%,一点差距就可…

    2025年5月16日
    1600
  • 金店回收黄金吗,黄金清洗有哪些步骤?

    金店回收黄金吗,黄金清洗第一步是去掉黄金首饰表面的污垢,这样才能对首饰进行下一步的清洗,只要用阐幽究竟的肥皂水清洗,就能把表面的污垢清洗掉,然后对首饰表面的黑色进行清洗,只需要2克食盐、漂白粉8克、清水60毫升,就能搭配成独特的“首饰清洗剂…

    2025年5月16日
    1500
  • 目前黄金回收价格多少?黄金回收步骤是哪些?

      想必大家都很关心黄金回收的价格?今年的黄金价格也是涨了又落,不少人选择这个时候购入黄金,黄金保值性很高,必要时变现,那对于黄金回收又有哪些步骤呢?黄金回收(通常也称回收黄金),就是对黄金制品或者含金物品进行回收,其回收的基本目的是或变现…

    2025年5月16日
    1700
  • 浏览器如何启用java小程序

    首先确认电脑已经安装了java程序,可以在开始菜单的”所有程序”中找到它 如果你的java安装已经很长时间了,建议先进行更新;如果是新安装的则直接切换到”安全”选项,并勾选“启用浏览器中的Ja…

    2025年5月3日 编程技术
    000
  • 要编译java程序需要使用什么命令

    要编译java程序需要使用javac命令。使用方法是:1、打开命令提示符,进入到Java文件所在目录下;2、执行【javac 文件名.java】命令,回车。此时,Java文件所在目录下就会生成一个class文件。 编译java程序需要使用j…

    2025年5月3日 编程技术
    000
  • UniApp实现小程序与原生应用的无缝衔接

    uniapp是一款跨平台的开发框架,可以将小程序与原生应用进行无缝衔接。本文将介绍如何利用uniapp实现小程序与原生应用的衔接,并给出相应的代码示例。 UniApp是一种基于Vue.js框架的开发工具,它的特点是可以统一开发和管理H5、小…

    编程技术 2025年5月1日
    000

发表回复

登录后才能评论