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


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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
Javascript 实用小技巧
Apr 07 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
Jul 08 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
js实现验证码干扰(静态)
Feb 22 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
实用函数5
2007/11/08 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP闭包实例解析
2014/09/08 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
python实现textrank关键词提取
2018/06/22 Python
python和c语言哪个更适合初学者
2020/06/22 Python
python 实用工具状态机transitions
2020/11/21 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
生物科学专业自荐书
2014/06/20 职场文书
七夕活动策划方案
2014/08/16 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
节约用电通知
2015/04/25 职场文书
表扬信格式模板
2015/05/05 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
总经理聘用协议书
2015/09/21 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers