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


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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 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
Home Coffee Roasting
2021/03/03 咖啡文化
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
python连接池实现示例程序
2013/11/26 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
如何在python中使用selenium的示例
2017/12/26 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
django在开发中取消外键约束的实现
2020/05/20 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
综治宣传月活动总结
2014/04/28 职场文书
员工工作表现自我评价
2015/03/06 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
2016年安全月活动总结
2016/04/06 职场文书
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技