zoukankan      html  css  js  c++  java
  • 微信小程序从零开始开发步骤(三)

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。

    我们先来看个我们要实现的底部导航栏的效果图:(三个导航图标示例,微信小程序最多能加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"
      }  
    }
    

    下一章:微信小程序从零开始开发步骤(四)微信小程序页面自定义分享onShareAppMessage

    文末福利:

    福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
    福利二:微信小程序入门与实战全套详细视频教程

    领取方式:
    如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!


    原文作者:祈澈姑娘
    原文链接:https://www.jianshu.com/u/05f416aefbe1
    创作不易,转载请告知

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。


  • 相关阅读:
    react 组件传值
    vue 子组件如何修改父组件data中的值??????????????????
    移动端的一些初始化 css 样式。。。
    centos7命令
    poi导出
    eclipse项目导入工作空间提示已存在问题
    maven jar包冲突问题
    layui下拉框渲染问题,以及回显问题
    两个线程交替运行——使用synchronized+wait+notify实现
    造成索引失效的情况
  • 原文地址:https://www.cnblogs.com/ting6/p/9725689.html
Copyright © 2011-2022 走看看