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


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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
js日期时间补零的小例子
Mar 05 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
javascript实现密码强度显示
Mar 18 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
在Mac下彻底卸载node和npm的方法
May 16 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
js+css实现全屏侧边栏
Jun 16 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 CLI实现简单的数据库实时监控调度
2009/07/01 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
基于jquery实现等比缩放图片
2014/12/03 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python序列操作之进阶篇
2016/12/08 Python
python判断输入日期为第几天的实例
2018/11/13 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python线程优先级队列知识点总结
2021/02/28 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
生产车间班组长岗位职责
2014/01/06 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
Python first-order-model实现让照片动起来
2022/06/25 Python
postgresql中如何执行sql文件
2023/05/08 PostgreSQL