微信小程序——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是固定死的不灵活处理一些页面 ...
随机推荐
- 用栈来递归 模板 honoi
用栈来模拟递归的技巧 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<vector> #include& ...
- ArcGIS API for javascript开发笔记(二)——解决ArcGIS Service中的服务在内网环境下无法进行javascript预览问题
感谢一路走来默默支持和陪伴的你~~~ ----------------------------拒绝转载-------------------------------- 1.问题说明 在使用ArcGIS ...
- Google Guava缓存实现接口的限流
一.项目背景 最近项目中需要进行接口保护,防止高并发的情况把系统搞崩,因此需要对一个查询接口进行限流,主要的目的就是限制单位时间内请求此查询的次数,例如1000次,来保护接口. 参考了 开涛的博客聊聊 ...
- CentOS 6 网络设置
系统配置: 系统硬件:vmware workstation 系统版本:Centos-6.6-x86_64 路由器网关:192.168.1.1 linux系统网络设置须知: 1.主机所有网卡信息配置文件 ...
- Percona Data Recovery Tool 单表恢复
前几天写过update或者delete忘加where条件的数据恢复.今天介绍一款开源的MySQL数据库InnoDB数据恢复工具:innodb-tools,它通过从原始数据文件中提取表的行记录,实现从丢 ...
- Vue 过渡
过渡 通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数 ...
- java的redis工具类
package com.mracale.sell.utils; /** * @Auther: Mracale */ import org.springframework.beans.factory.a ...
- Civil and Evil Engineer(普林姆)
http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=198#problem/E 水题一道,题意就是让求一遍最小生成树与最大生成树,但我 ...
- Postman + newman + jenkins 的API自动化测试应用
一.环境配置 Postman postman 的具体使用可以参考另外一篇文章:postman 做接口测试之学习笔记 Newman 第一步,安装nodejs. 第二步,在nodejs命令行安装newma ...
- gerrit 使用教程(一)
原文地址:https://www.jianshu.com/p/b77fd16894b6 1, Gerrit是什么? Gerrit实际上一个Git服务器,它为在其服务器上托管的Git仓库提供一系列权限控 ...