微信小程序开发之Tabbar实例详解


Posted in Javascript onJanuary 09, 2017

微信小程序 Tabbar

1.下载微信小程序开发软件;

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

2.扫描二维码登录,在手机点击确认登录

微信小程序开发之Tabbar实例详解

3.新建一个项目,这里选择无APPID,如果需要填写APPID,需要到微信小程序里面注册,然后就可以获取APPID,填写项目名称,选择项目目录(注释:微信小程序不会自己创建主目录文件,所以自己先建立一个项目文件夹,然后选择存放到这个文件夹中),添加项目,就生成了一个项目工程,这是注意有一个单选单按钮,如果取消这个单选按钮,就会创建一个空的工程,我选择选中这个按钮;

微信小程序开发之Tabbar实例详解

4.然后得到一个新的工程,现在在下方要放一个tabbar,先新建一个image目录,点击目录右键->新建->目录

微信小程序开发之Tabbar实例详解

微信小程序开发之Tabbar实例详解

5.点击image文件夹->硬盘打开,将图片拉入次目录中,注意:图片大小限制为40kb,尺寸81px * 81px;

微信小程序开发之Tabbar实例详解

6。先看一下目录结构,程序有两个目录,一个pages和utils,其中pages里面又包含index和logs,这个两个目录是两个页面(第一个页面就是运行程序看到的,第二页面是点击我们的头像出来的),我们就要这两个页面作为tabbar两个页面;

点击点击app.json写tabbar控件;为了方便我把image放到了根目录下,选择image目录点击右键->硬盘打开->将Image目录copy到根目录下,删除原目录就可以了,代码如下:

微信小程序开发之Tabbar实例详解

方法说明:

color:未选择字体颜色

selectedColor:选择字体颜色

borderStyle:tabbar上方线的颜色white(仅支持白色和黑色)

backgroundColor:tabbar背景颜色

networkTimeout:设置网络超时时间

debug:设置debug模式开启

效果如图:

微信小程序开发之Tabbar实例详解

注意:list的页面不许在app.json的pages里面注册过;

微信小程序开发之Tabbar实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
JS解析XML实例分析
Jan 30 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
JavaScript中import用法总结
Jan 20 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 #Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 #Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 #Javascript
原生Javascript插件开发实践
Jan 09 #Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 #Javascript
详解网站中图片日常使用以及优化手法
Jan 09 #Javascript
jQuery实现表格元素动态创建功能
Jan 09 #Javascript
You might like
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
WordPress中"无法将上传的文件移动至"错误的解决方法
2015/07/01 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
季度思想汇报
2014/01/01 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
高二物理教学反思
2014/02/08 职场文书
公司投资建议书
2014/05/16 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript