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


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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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 危险函数全解析
2009/09/09 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP编写RESTful接口
2016/02/23 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
Python中列表(list)操作方法汇总
2014/08/18 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
详解重置Django migration的常见方式
2019/02/15 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
Numpy数组的广播机制的实现
2020/11/03 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
C#面试问题
2016/07/29 面试题
初中体育教学反思
2014/01/14 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
配置Kubernetes外网访问集群
2022/03/31 Servers