微信小程序——2、配置json文件
配置文件详解
主配置文件app.json
主配置文件位于主目录中,用于进行全局配置。包括页面文件的路径、窗口表现、设置网络超时时间、设置多tab等
下面通过微信最初自带小程序来学习
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
这是微信小程序自带的配置文件app.json
pages
"pages":[]用来定义小程序中所用到的界面,是一个数组,上面代码中有两个值位于pages/index下的index文件和pages/logs下的logs文件
window
"window":{}文件用来定义窗口的表现形式,例如"navigationBarTitleText": "WeChat",表示设置窗口标题为WeChat
配置窗口状态
backgroundColor:用来设置窗口背景颜色,使用十六进制的RGB方式设置
backgroundTextStyle:设置下拉背景字体,loading图的样式,只支持设置为"dark""light",默认为"dark"
navigationBarBackgroundColor:用来设置窗口的背景颜色,采用十六进制的RGB方式设置
enablePullDownRefresh:设置下拉是否刷新
navigationBarTitleStyle:导航栏标题颜色
tabBar
配置窗口底部tabBar
"tabBar":{
"color":"#dddddd",
"selectedColor":"#3cc51f",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list":[{
"pagePath":"page/component/index",
"iconPath":"image/icon_component.png",
"selectedIconPath":"image/icon_component_HL.png",
"text":"组件",
},{
"pagePath":"page/API/index/index",
"iconpath":"image/icon_API.png",
"selectedIconPath":"image/icon_API_HL.png",
"text":"接口"
}
]
}
tabBar中有5个属性可以设置
- color:设置tab未激活状态文字的颜色
- selectedColor:设置tab激活文字状态的颜色
- boredStyle:设置tabBar上边框的颜色,白与黑
- backgroundColor:设置tab背景的颜色
- list:这是一个数,设置tab列表项,最少两个最多五个。list有四个属性值:
- text:设置tab上显示的文字
- iconPath:tab处于未激活状态时的图片路径,icon照片大小限制为40kb
- pagePath:设置触按tab时跳转的路径
其他配置
networkTimeout
微信小程序中有多种网络连接,可以通过参数"networkTimeout"设置网络请求的超时时间。
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
}
- request:设置网络请求接口的超时时间
- connectSocket设置wx.connectSocket接口网络请求的超时时间
- downloadFile:设置wx.downloadFile下载文件接口超时时间
- uploadFile:上传文件接口超时时间
页面配置文件
主配置文件配置项很多但是是全局的,每个页面都可以使用。但是窗口标题每个页面都有不同的标题,每个页面也需要一个页面配置文件来对这些项目进行配置。
页面配置只能设置主配置文件中window的配置项内容,无需写window键,页面配置会自动覆盖主配置中的内容。
微信小程序——2、配置json文件的更多相关文章
- 微信小程序-01-项目组成文件介绍(入门篇)
自古开篇先说两句,写这些笔记不是学习用的,主要是后续分享一些遇到的坑,碰到过什么样的问题,怎么去解决,如果你不是一个很耐心无看文章的人,建议去 网易云课堂找一些课程,跟着别人的脚步或许会更有动力,我的 ...
- 微信小程序--代码构成---JSON 配置
在上一章中,我们通过开发者工具快速创建了一个 QuickStart 项目.你可以留意到这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 ...
- 小程序学习一 .json 文件配置
微信小程序——配置 以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助. 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置 ...
- 微信小程序开发---各代码文件简介
根据上一文,已建立QuickStart 项目,该项目系本人毕设部分内容,所以记录以便以后查阅 开发小程序就必须了解小程序项目目录结构和文件作用,接下来就根据我现在自学得到的知识把这些记录下来. 一.目 ...
- 微信小程序day01-JSON配置
微信小程序 小程序代码构成 JSON配置WXML模板WXSS样式JS逻辑 1.JSON配置 小程序配置 app.json app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表 ...
- 微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
- 微信小程序的配置详解
1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小 ...
- 微信小程序 WXS实现json数据需要做过滤转义(filter)
前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...
- 微信小程序环境配置和开发!!
1.登陆微信公众平台小程序,下载 普通小程序开发者工具.或者 小游戏开发者工具. 2.新建项目需要填以下几点,然后初始demo如下,注意rpx是分成750份的单位. 3.点击预览,用微信扫描二维码,代 ...
- 微信小程序动态修改title,动态配置title,动态配置头部,微信小程序动态配置头部
微信小程序的title是在json里面配置的 "navigationBarTitleText": "title名称" 这种title是固定死的不灵活处理一些页面 ...
随机推荐
- 2016江苏省CPC省赛 I - Itinerary Planning
Description Mike moved to a new city. There are bus stations in the city, each has a unique name. Ea ...
- CodeForces - 55C Pie or die 想法题(猜程序)
http://codeforces.com/problemset/problem/55/C 题意:一个博弈. 题解:瞎猜,目前不清楚原理 #include<iostream> #inclu ...
- python 经验:把全局变量放在一个类中
注:红色是我增加的注释 add by zhj:其实python中的import, from-import语句是创建新的同名变量指向引入的模块和模块属性,这也就解释了下面的情况. 我们应尽量不用全局变量 ...
- AndroidStudio 3.3+ ButterKnife R2 红名问题
如果你一直用着ButterKnife,但是用的低版本(比如用得很多的8.4.0),然后在多module项目中一定知道要把R改成R2 然后最近如果升级AndroidStudio了,升到3.3以上(201 ...
- mysql "order by" "distinct" "group by" "having"
本文用到的表结构 create table stu( stu_id int auto_increment primary key, name ) not null, age smallint, cls ...
- Centos7 中 Node.js安装简单方法
最近,我一直对学习Node.js比较感兴趣.下面是小编给大家带来的Centos7 中 Node.js安装简单方法,在此记录一下,方便自己也方便大家,一起看看吧! 安装node.js 登陆Centos ...
- Git简单入门教程
1.下载Git,360的软件管家里搜 2.安装Git,下载好之后安装到指定路径下 安装方法有多个复选框的把第一个也选上,其他默认直接next,最后一步什么都不选 3.配置用户信息:(右键-->g ...
- for和foreach的区别
public class Program { public static void Main() { Program program = new Program(); program.For();// ...
- matlab中的containers.Map()
matlab中的containers.Map() 标签: matlabcontainers.Map容器map 2015-10-27 12:45 1517人阅读 评论(1) 收藏 举报 分类: Mat ...
- Java有序数组的实现
package 有序数组; public class OrdArray { private long[]array; private int nElems; //初始化 public OrdArray ...