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

前面我们和大家分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。我们先来看个我们要实现的底部导航栏的效果图:(三个导航图标示例,微信小程序最多能加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推荐 黄金广告位招租... 更多推荐

相关推荐

  • 小程序心得分享:打造用户喜爱的应用秘诀

    小程序凭借其便捷的用户体验和轻量级的运行特性,成为企业连接用户、提高服务效率的重要工具。本文将分享打造用户喜爱的小程序的一些心得,揭示让小程序获得用户青睐的秘诀,并探讨如何通过专业的app开发服务解决小程序开发过程中遇到的问题。 首先,用户…

    2025年4月28日
    000
  • 如何判断我的小程序是否有市场需求?

    小程序因其便捷、快速、无需下载安装的特性,迅速获得了用户的广泛认可。然而,开发者在面对如何判断小程序是否具备市场需求时,需进行深入的思考。以下是一些实用的建议和方法。 首先,我们需要明确一点:市场需求不是凭空产生的,而是基于用户的真实需求和…

    2025年4月28日
    000
  • 小程序的哪些商业模式比较容易盈利?

    小程序已成为商家与用户互动的重要工具。由于其便捷、高效和低成本的优势,越来越多的企业和个人开发者被吸引。那么,哪些小程序商业模式更容易实现盈利呢?本文将结合当前市场情况,探讨几种常见且易于盈利的小程序商业模式。 一、电商类小程序 电商类小程…

    2025年4月28日
    000
  • 小程序后端搭建指南:打造专业级后端服务的秘诀!

    小程序凭借其便捷和易用性,迅速赢得了用户的喜爱。然而,要想在竞争激烈的市场中脱颖而出,仅靠吸引人的前端设计是不够的,背后需要一个强大、稳定且安全的后端服务支持。那么,如何打造一流的小程序后端服务呢? 构建小程序的后端是一个系统化的任务,需要…

    2025年4月28日
    000
  • 如何在微信平台上发布和管理我的小程序

    在微信平台上发布和管理小程序是一个多步骤、需要详细操作的过程,下面详细介绍如何在微信平台上完成这些任务。 首先需要明确的是,发布和管理小程序需要一定的技术知识和经验。如果你是第一次接触小程序,建议先进行一些基础学习和实践。 一、在微信公众平…

    2025年4月28日
    000
  • 内容付费模式如何在小程序中实现?

    内容付费模式已成为知识传播和服务交易的常见方式,尤其在小程序平台上,它不仅帮助内容创作者实现了价值转化,还为用户提供了更加个性化和专业化的服务。以下是内容付费模式在小程序中的实现路径,并探讨如何通过专业的app开发解决实现过程中可能遇到的问…

    2025年4月28日
    000
  • 如何利用小程序进行线上销售?

    亲爱的网友们,今天我将与大家探讨“如何利用小程序进行线上销售”的主题。如果你还在使用传统的线上销售方式,那么你需要继续阅读,更新你的网络销售工具库! 首先,让我们揭开这个“小程序”究竟是什么样的魔法工具。它是一种无需下载安装即可使用的应用,…

    2025年4月28日
    000
  • 小程序进阶:高级功能探索

    小程序因其便捷性和高效性,越来越受到企业和开发者的欢迎。从基本的信息展示到复杂的业务处理,小程序的功能不断创新和扩展。本文将深入探讨小程序的高级功能以及进阶开发策略,帮助那些已掌握基础知识的开发者或企业更好地利用这些高级功能,提升用户体验和…

    2025年4月28日
    000
  • Line小程序给我们带来了哪些意想不到的便利?

    大家好!在这个快节奏的时代,我们总是在寻找那些能让生活更便捷的小工具。今天,我要和大家聊聊一个在我们的日常生活中悄无声息却又越来越不可或缺的存在——line小程序。从最初的好奇尝试到现在的日常必用,line小程序给我们带来了意想不到的便利。…

    2025年4月28日
    000
  • 小程序在教育行业有哪些应用案例?

    小程序在教育领域的崛起,为教学和学习的互动开辟了新的平台和方式。本文旨在探讨并分析小程序在教育行业的多样化应用案例,及其如何通过专业的app开发来满足教育领域的特定需求。教育小程序案例不仅展示了技术如何推动教育的创新,也说明了小程序在提升教…

    2025年4月28日
    000

发表回复

登录后才能评论