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


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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
javascript轮播图算法
Oct 21 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
js实现京东轮播图效果
Jun 30 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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删除数组元素示例分享
2014/02/17 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
javascript随机变色实例代码
2019/10/15 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
前端如何实现动画过渡效果
2021/02/05 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python+mongodb数据抓取详细介绍
2017/10/25 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
十佳教师事迹材料
2014/01/11 职场文书
结婚邀请函范文
2014/01/14 职场文书
初中班主任评语
2014/04/24 职场文书
创优争先心得体会
2014/09/11 职场文书
村干部任职承诺书
2015/01/21 职场文书
食堂管理制度范本
2015/08/04 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python