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


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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
Prototype Number对象 学习
Jul 19 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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错误信息方法的详解
2013/06/09 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
Vue触发式全局组件构建的方法
2018/11/28 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python字典简介以及用法详解
2016/11/15 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
python实现打砖块游戏
2020/02/25 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
RealTek面试题
2016/06/28 面试题
积极贯彻学习两会精神总结
2014/03/17 职场文书
负责人任命书范本
2014/06/04 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
三八节活动简报
2015/07/20 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
导游词之唐山景点
2019/12/18 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL