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


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 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
js中常用的Math方法总结
Jan 12 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 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
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python3.6数独问题的解决
2019/01/21 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Python加速程序运行的方法
2020/07/29 Python
Python日志器使用方法及原理解析
2020/09/27 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
什么是数据抽象
2016/11/26 面试题
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
上课玩手机检讨书
2014/02/08 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
班级口号大全
2014/06/09 职场文书
夏季药店促销方案
2014/08/22 职场文书
基层党员对照检查材料
2014/09/24 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫