*.json文件在小程序开发中必不可少,从 app.json 开始认识小程序中的配置文件*.json

app.json 为小程序必须文件,它不仅作为配置文件管理着小程序的UI还充当着路由器的功能;

一、pages

用来配置小程序的页面,该配置项必填,接收一个数组,数组元素为字符串(这便是小程序的路由设置)。

注:该配置项数组第一个元素必须为小程序起始页既首页。

二、window

这个配置项是用来设置小程序的状态栏、导航条、标题、窗口背景色。

该配置项有6个属性:

  1. backgroundTextStyle 这个属性我的理解是设置窗口内容的样式的,官方给出的标准说明是下拉背景字体、loading 图的样式。(目前仅接收 dark 和 light 两个值
  2. navigationBarBackgroundColor 它是用来设置导航栏背景颜色。(接收十六进制颜色值
  3. navigationBarTitleText 这个属性是显示导航栏标题内容的,开发者可以根据自己的需要来进行设置。(接收字符串
  4. navigationBarTextStyle 它是用来导航栏标题颜色的。(目前仅接收 black 和 white 两个值
  5. backgroundColor 这个属性是设置窗口的背景色的,它需要输入的也是十六进制颜色值的。(接收十六进制颜色值)(注意:该属性并不是页面的背景色,而是下拉时看到的窗口背景色。页面的背景色在*.wxss文件中设置page选择器
  6. enablePullDownRefresh 这个属性是设置是否开启下拉刷新,默认为 false。(接收布尔值)(注意: 在这个配置文件(app.json)中如果关闭了下拉刷新,当你在你自己开发的页面中想要设置下拉刷新也是行不通的,也就是说如果你想要在以后页面中使用下拉刷新这个功能,就必须保证这个配置文件中的这一项设置是打开的
  7. onReachBottomDistance 这里设置页面上拉触底事件触发时距页面底部距离,单位为px。

来看看在小程序中navigationBar、background、page分别对应哪些位置。

三、tabBar

这个配置项是用来配置页面底部的tab栏的,开发者可以根据自己的需求来进行配置。

该配置项有六个属性:

  1. color:设置tab上的文字默认颜色。(接收十六进制颜色值
  2. selectedColor:设置tab上的文字选中的颜色。(接收十六进制颜色值
  3. backgroundColor:设置tab的背景颜色。(接收十六进制颜色值
  4. borderStyle:设置边框的颜色。(目前仅接收 black 和 white 两个值
  5. position:设置tabBar的位置,仅有 top 和 bottom 两个值。(注意:当tabBar位置为top时不显示icon图片
  6. list:配置tabBar的每一个按钮,该值为一个对象数组且配置该项至少要两个对象,至多只能有五个对象。

list作为对象数组其元素有四个属性:

  1. pagePath:这个定义的是页面的路径,该属性必不可少且必须定义在pages中存在的页面路径。
  2. text:设置的是按钮上的文字。
  3. iconPath:是定义icon图片的路径,这个属性定义的图片大小不超过40kb。
  4. selectedIconPath:定义的是当选中按钮之后显示的图片,同样图片的大小不能超过40kb。

以下为tabBar的示意图

四、networkTimeout

它是用来设置各种网络请求的超时时间的(单位是毫秒)官方给出了四个属性分别四个API的超时时间;

  1. request => wx.request   (请求超时)
  2. connectSocket => wx.connectSocket  (WebSocket连接超时)
  3. uploadFile => wx.uploadFile  (上传超时)
  4. downloadFile => wx.downloadFile  (下载超时)

五、debug

它可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发 。 可以帮助开发者快速定位一些常见的问题;

其值为布尔类型;

以上为小程序全局配置 app.json 的配置介绍;然而每个页面都可以有自身独立的配置文件 *.json 该文件配置只能配置 app.json 中的 window 配置项的内容,页面配置将覆盖全局配置(也就是page.json将覆盖app.json中window的配置)。

微信小程序笔记<二>认识app.json的更多相关文章

  1. 微信小程序:全局配置app.json

    微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...

  2. 微信小程序--getLocation需要在app.json中声明permission字段

    在微信小程序开发中,需要获取用户所在地理位置,结果提示‘getLocation需要在app.json中声明permission字段’ 这是因为开发者需要填写获取用户地理位置的用途说明. 具体解决方法: ...

  3. 微信小程序笔记<三>入口app.js —— 注册小程序

    小程序开发框架在逻辑层使用的语言就是JavaScript,所以想玩小程序JavaScript的基本功一定要扎实.但小程序基于js做了一些修改,以方便开发者更方便的使用微信的一些功能,使得小程序更好的贴 ...

  4. 微信小程序错误——mpvue小程序:未找到 app.json 中的定义的 pages "pages/XXX/XXX" 对应的 WXML 文件

    背景 在刚开始学习开发小程序时,使用微信开发工具在app.json建立页面,写好配置文件名称后,应该会自动生成页面的4个文件,结果没有生成文件,反而报错:mpvue小程序:未找到 app.json 中 ...

  5. 微信小程序:页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  6. 微信小程序通过api接口将json数据展现到小程序示例

    这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧实现知乎客户端的一个重要知识前提就是,要知道怎么通过 ...

  7. 微信小程序配置二

    tabBar 客户端窗口底部的tab页面切换,只能配置最好两个.最多5个tab 属性说明: 属性 类型 必填 默认值 描述 color HexColor 是 tab上的文字默认颜色 selectedC ...

  8. 前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

  9. 微信小程序笔记(二)

    微信小程序环境搭建与开发工具介绍 2-1 开篇介绍及下载工具 1.开发工具下载地址:   http://t.cn/RVKH0HS 2.下载安装对应版本:win32,win64,mac; 2-2 小程序 ...

随机推荐

  1. Java WebService 简单实例[转载]

    [注意,本文转载自  http://hyan.iteye.com/    ] 一.准备工作(以下为本实例使用工具) 1.MyEclipse10.7.1 2.JDK 1.6.0_22 二.创建服务端 1 ...

  2. phpmailer使用qq邮箱、163邮箱成功发送邮件实例代码

    以前使用qq邮箱.163服务器发送邮件,帐号直接使用密码,现在不行了,得使用授权码,简单记录下 1.首先开通POP3/SMTP服务,qq邮箱——帐号——设置,找到POP3/SMTP点开启,输入短信会有 ...

  3. js控制html5 【video】标签中视频的播放和停止

    需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...

  4. Linux环境下查看线程数的几种方法

    1.cat /proc/${pid}/status 2.pstree -p ${pid} 3.top -p ${pid} 再按H,或者直接输入 top -bH -d 3 -p  ${pid} top ...

  5. java锁在等待唤醒机制中作用

    等待的线程放在线程池wait().notify().notifyall()都使用在同步中,因为要对持有监视器(锁)的线程操作.所以要使用在同步中,因为只有同步才具有锁. 为什么这些操作的线程的方法要定 ...

  6. Flask--异常处理

    异常处理: abort(404)-捕获HTTP抛出的统一状态码 @app.errorhandler-捕获全局异常错误码,捕获异常错误 @app.route("/demo4") de ...

  7. ALGO-11_蓝桥杯_算法训练_瓷砖铺放(递归)

    问题描述 有一长度为N(<=N<=)的地板,给定两种不同瓷砖:一种长度为1,另一种长度为2,数目不限.要将这个长度为N的地板铺满,一共有多少种不同的铺法? 例如,长度为4的地面一共有如下5 ...

  8. Neo4j 第三篇:Cypher查询入门

    本文转载自:https://www.cnblogs.com/ljhdo/p/5516793.html Neo4j使用Cypher查询图形数据,Cypher是描述性的图形查询语言,语法简单,功能强大,由 ...

  9. SQL注入漏洞解决方法

    本文只指针编码层次的SQL注入漏洞解决方法,例子代码是以java为主. 1,参数化的预编译查询语句 不安全例子 String query = "SELECT account_balance ...

  10. 堆叠箱子(基础dp)

    P1086 时间限制: 1 Sec  内存限制: 128 MB提交: 38  解决: 27[提交][状态][讨论版][命题人:外部导入] 题目描述 现有N种箱子,每种箱子高度H_i,数量C_i.现选取 ...