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


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控件的相对独立性
Sep 03 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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连接MySQL数据的操作要点
2015/03/20 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
Node.js模块加载详解
2014/08/16 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
python之import机制详解
2014/07/03 Python
Python 装饰器深入理解
2017/03/16 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python获取array中指定元素的示例
2019/11/26 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
学校就业推荐信范文
2014/05/19 职场文书
员工安全承诺书
2014/05/22 职场文书
客户答谢会活动方案
2014/08/31 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
生产现场禁烟通知
2015/04/23 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python