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


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 Mobile 导航栏代码
Nov 01 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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之字符串变相相减的代码
2007/03/19 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
从零学Python之引用和类属性的初步理解
2014/05/15 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python 获取等间隔的数组实例
2019/07/04 Python
Python中SQLite如何使用
2020/05/27 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
生物技术毕业生自荐信
2013/10/23 职场文书
公司成立感言
2014/01/11 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python