微信小程序 开发之全局配置


Posted in Javascript onMay 05, 2017

一.app.json

     使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等.

微信小程序 开发之全局配置

       注意在.json不能注释,否则会出错。

二.工具栏tabBar

    如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序

微信小程序 开发之全局配置

微信小程序 开发之全局配置

微信小程序 开发之全局配置

app.json中

{ 
 "pages": ["pages/index/index", 
    "pages/coming/coming", 
    "pages/search/search", 
    "pages/top/top" 
   ], 
 "window": { 
  "navigationBarBackgroundColor": "#47a86c", 
  "navigationBarTextStyle": "white", 
  "navigationBarTitleText": "小程序案例", 
  "backgroundColor": "#fff", 
  "backgroundTextStyle": "dark" 
 }, 
 "tabBar": { 
  "color": "#686868", 
  "selectedColor": "#47a86c", 
  "backgroundColor": "#fff", 
  "list": [{ 
   "pagePath": "pages/index/index", 
   "iconPath": "dist/images/popular_icon.png", 
   "selectedIconPath": "dist/images/popular_active_icon.png", 
   "text": "热映" 
  }, 
  { 
   "pagePath": "pages/coming/coming", 
   "iconPath": "dist/images/coming_icon.png", 
   "selectedIconPath": "dist/images/coming_active_icon.png", 
   "text": "待映" 
  }, 
  { 
   "pagePath": "pages/search/search", 
   "iconPath": "dist/images/search_icon.png", 
   "selectedIconPath": "dist/images/search_active_icon.png", 
   "text": "搜索" 
  }, 
  { 
   "pagePath": "pages/top/top", 
   "iconPath": "dist/images/top_icon.png", 
   "selectedIconPath": "dist/images/top_active_icon.png", 
   "text": "口碑" 
  }] 
 }, 
 "networkTimeout": { 
  "request": 10000, 
  "downloadFile": 10000 
 }, 
 "debug": true 
}

微信小程序 开发之全局配置

图标可以放在与pages同级,文件命名可是自定。

微信小程序 开发之全局配置

app.json中其他属性:可以查看官方文档。

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

Javascript 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
ExtJS 入门
Oct 29 Javascript
jsPDF导出pdf示例
May 02 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 #jQuery
微信小程序 图片上传实例详解
May 05 #Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 #Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 #Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 #Javascript
移动端web滚动分页的实现方法
May 05 #Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 #Javascript
You might like
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python单链表的简单实现方法
2014/09/23 Python
Python栈类实例分析
2015/06/15 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python 导入文件过程图解
2019/10/15 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
python中count函数知识点浅析
2020/12/17 Python
python文件路径操作方法总结
2020/12/21 Python
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
跟单文员岗位职责
2014/01/03 职场文书
高中生操行评语大全
2014/04/25 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏