微信小程序——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键,页面配置会自动覆盖主配置中的内容。

原文地址:https://www.cnblogs.com/20145336yang/p/8502663.html

时间: 2024-10-03 05:46:56

微信小程序——2、配置json文件的相关文章

微信小程序全局配置知识点

疫情在家无聊总结一下微信小程序一些基础小知识希望对初学者有帮助.让我们一起对疫情“逆战”吧! 1.全局配置 ?程序根?录下的 app.json ?件?来对微信?程序进?全局配置.?件内容为?个JSON 对象 1.1 pages ?于指定?程序由哪些??组成,每?项都对应?个??的 路径(含?件名) 信息.?件名不需要写?件后缀,框架会?动去寻找对于位置的 .json, .js, .wxml,.wxss 四个?件进?处理 有多少个??,此处就应该有多少个选项 数组的第?项代表?程序的初始??(??

微信小程序入门五: wxml文件引用、模版、生命周期

实例内容 wxml文件引用(include.import) 模版 小程序生命周期 实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到

微信小程序的配置详解

1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成.每一项代表对应页面的[路径+文件名]信息,数组的第一项代表小程序的初始页面.小程序中新增/减少页面,都需要对 pages 数组进行修改. 文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合. 2>window 用于设置小程序的

vscode 开发微信小程序环境配置

插件 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wechat-snippet 微信小程序代码辅助,代码片段自动完成 wepy snippets 微信小程序wepy框架,weui框架代码片段 文件解析语言类型设置 wxml 通过 html 进行解析,setting.json中添加 "html.validate.styles": false(禁止内联样式报错) wxs 直接设置 JavaScript 作为解

微信小程序 WXS实现json数据需要做过滤转义(filter)

前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 vue 中的 | 方法进行快速的过滤,大都是用数据遍历洗数据来实现的,说实话,很麻烦,即使提取了公共方法那也麻烦,总之要洗数据就麻烦 WXS 为何物 在上代码之前先简单的介绍一下 WXS 是什么,以及和 javascript 有什么区别,虽然官方文档中都有,但我认为博客的存在意义就是尽量减少看官们的页

微信小程序 project.config.json 配置

可以在项目根目录使用 project.config.json 文件对项目进行配置. miniprogramRoot Path String 指定小程序源码的目录(需为相对路径) qcloudRoot Path String 指定腾讯云项目的目录(需为相对路径) pluginRoot Path String 指定插件项目的目录(需为相对路径) compileType String 编译类型 setting Object 项目设置 libVersion String 基础库版本 appid Stri

微信小程序app配置指南

//app.json页面 { //页面注册,有几个页面都要在pages里面注册 "pages":[ "pages/index/index", "pages/logs/logs", "pages/main/main", "pages/main1/main1", "pages/main2/main2", "pages/main3/main3", ], //上导航配置及ap

微信小程序项目 配置开发环境及全面了解小程序

一.下载开发工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 二.全面了解小程序 1.根据官方提供的简易教程了解小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 2.了解小程序框架 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html 3.了解小程序组件 https://mp.weixin.qq.c

微信小程序传数组(Json字符串)到Java后端

一:小程序端: wxml中代码: <!--index.wxml--> <view> <view> <button bindtap="onShow"> 调接口 </button> </view> </view> js中代码: //index.js //获取应用实例 const app = getApp() Page({ onShow:function(){ console.log('123456') le

微信小程序开发-page.json解析

页面.json用来对本页面的窗口表现进行配置.它只能针对window配置,并且会覆盖 app.json 的 window 中相同的配置项. {?? ???????? ? ????/**?? ????*?以下是页面顶部导航栏设置?? ????**/?? ????"navigationBarBackgroundColor"?:?"[Color]",?//?导航栏背景颜色,默认值:#000000?? ????"navigationBarTextStyle&quo