php开发微信小程序教程,从零开始开发微信小程序步骤(三)
前面我们和大家分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。我们先来看个我们要实现的底部导航栏的效果图:(三个导航图标示例,微信小程序最多能加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"
}
}
相关推荐:
php开发微信小程序教程,从零开始开发微信小程序步骤(三)相关推荐
- 微信小程序-计算器小程序《从零开始学微信小程序》
主界面的代码块 <!--pages/tabbar2/complexCalc/complexCalc.wxml--> <view class="container" ...
- 小程序教程1:初识小程序,快速搭建一个小程序项目
前言: 打算整理一个小程序系列的资料.如何快速搭建一个小程序项目,以及一个小程序项目应该有哪些内容. 相关资料: 微信公众平台微信公众平台,给个人.企业和组织提供业务服务与用户管理能力的全新服务平台. ...
- 表白小游戏教程:制作一个小游戏送给喜欢的TA(不会编程也能学会哦)
大家好哇~ 欢迎翻开波波和阿菌的长篇故事~ 不过捏,今天我们不讲故事,今天将由阿菌和大家分享一个小教程:教大家制作一个小游戏,可以用来送给喜欢的人.无须任何计算机专业基础,只要能操作电脑,并在初一的数 ...
- 微信小程序教程:注册微信小程序的操作步骤
为你们推出关于小程序这个项目 今天我们将来说一下关于小程序的一个内容: 在我们做小程序项目的时候,我们需要先做什么准备工作呢? 我们首先需要注册一个小程序,注册网址:mp.weixin.qq.com( ...
- ieda ts文件报错_Java开发平台IntelliJ IDEA教程:开发,运行和调试TypeScript源代码-IntelliJ IDEA系列教程:-慧都网...
Java开发平台开发,运行和调试TypeScript源代码 IntelliJ IDEA是Java语言开发的集成环境,IntelliJ在业界被公认为优秀的Java开发工具之一,尤其在智能代码助手.代码自 ...
- IOS开发系列之阿堂教程:构建开发IOS应用的虚拟机开发环境实践
说到IOS的开发,不能不说 到一个问题,如何配置和构建一个IOS的开发环境!我下面要说的主要是针对没有MAC Apple机的网友,如何安装和配置一个属于自己的IOS开发环境.如果已经有MAC 苹果机的 ...
- python五子棋程序教程_python实现五子棋小程序
本文实例为大家分享了python实现五子棋小程序的具体代码,供大家参考,具体内容如下 一.结合书上例子,分三段编写: wuziqi.py #coding:utf-8 from win_notwin i ...
- python开发音乐播放器教程_python开发简易版在线音乐播放器示例代码
在线音乐播放器,使用python的Tkinter库做了一个界面,感觉这个库使用起来还是挺方便的,音乐的数据来自网易云音乐的一个接口,通过urllib.urlopen模块打开网址,使用Json模块进行数 ...
- php开发之登录注册教程,PHP开发登录注册完整代码之注册PHP页面
创建我们的 reg.php 文件 此页面完成的功能如下 代码如下<?php session_start(); header("Content-type:text/html;charse ...
- 控制台编写JAVA程序教程_写一个java程序的步骤是什么?写java程序技巧
写Java程序是要按照步骤来的,这样才能写好一个java程序,那么接下来,我们就来给大家讲解一下写一个java程序的步骤是什么? (1)创建Java项目:"FileàNewàProjectà ...
最新文章
- skyline的用法
- 私.Modbus测试_ZC01_TCP方式
- lintcode:形状工厂
- Oracle常用字符串操作
- 电动葫芦使用注意事项(转载)
- javascript 获取图片原始尺寸
- [Android系列—] 2. Android 项目目录结构与用户界面的创建
- 实现字符级的LSTM文本生成
- sparkpython多线程_如何在PySpark(Spark流)中组合多个rdd?
- Qt界面显示OpenCV读取的图片
- 史上最全进入BIOS方法及U盘重装系统步骤详解
- word论文排版插件_word论文排版自动编号设置
- DLL注入 + VEH 的方式处理异常
- 13步设计出一个ITSM系统
- 高通驱动开发参考(二)
- 设计原则 - 单一职责原则
- 大一计算机虚拟机,虚拟机对电脑伤害大吗
- python 数学基础训练答案_四年级下册数学基础训练的答案人教版
- 如何将计算机声音改成音乐,win7系统把MP3音频转换成WAV格式的图文教程
- [4G5G专题-75]:流程 - 4G LTE无线接入网中运营商标识、基站标识、终端标识大全