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


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 相关文章推荐
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
SVG描边动画
Feb 23 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 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之第七天
2006/10/09 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
PHP.vs.JAVA
2016/04/29 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
python提取页面内url列表的方法
2015/05/25 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
党员志愿者服务倡议书
2015/04/29 职场文书
投资申请报告
2015/05/19 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
人事任命书范本
2015/09/21 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL