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


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 Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
js 处理URL实用技巧
Nov 23 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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与Mysql的一些简单的操作
2015/02/26 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
jquery操作select大全
2014/04/25 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
python基础之入门必看操作
2017/07/26 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python实现扫雷小游戏
2020/04/24 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
体育教师求职信
2014/05/24 职场文书
医学专业自荐信
2014/06/14 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
专家推荐信怎么写
2015/03/25 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
解析目标检测之IoU
2021/06/26 Python