미니 프로그램의 코드 구성 중 json 접미사가 포함된 JSON 구성 파일에 대한 자세한 설명

WeChat 애플릿 코드는 다음 네 가지 유형의 파일로 구성됩니다.

1. .json 접미사 JSON 구성 파일

2. .wxml 접미사 WXML 템플릿 파일

3. wxss 접미사 WXSS 스타일 파일

4. .js 접미사 JS 스크립트 로직 파일

1. JSON 구성

프로젝트의 루트 디렉터리와 페이지/로그 디렉터리 A에 app.json 및 project.config.json이 있음을 알 수 있습니다. logs.json에 대한 사용법을 차례로 설명하겠습니다.

미니 프로그램 구성 app.json

app.json은 미니 프로그램의 모든 페이지 경로, 인터페이스 성능, 네트워크 시간 초과, 하단 탭 등을 포함하는 현재 미니 프로그램의 전역 구성입니다. QuickStart 프로젝트의 app.json 구성 내용은 다음과 같습니다.

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

이 구성의 각 항목의 의미에 대해 간략하게 설명하겠습니다.

1. pages 필드 - 현재 미니 프로그램의 모든 페이지 경로를 설명하는 데 사용됩니다. WeChat 클라이언트용입니다. 미니 프로그램 페이지가 현재 정의되어 있는 디렉터리를 알아보세요.

2. 창 필드 - 미니 프로그램의 모든 페이지의 상단 배경색과 텍스트 색상이 여기에서 정의됩니다.

도구 구성 project.config.json

보통 모든 사람이 도구를 사용할 때 도구로 변경하면 인터페이스 색상, 컴파일 구성 등과 같은 자신의 선호도에 맞게 개인화된 구성을 만들게 됩니다. 또 다른 컴퓨터에 도구를 다시 설치할 때 도구를 다시 구성해야 합니다.

이를 염두에 두고 미니 프로그램 개발자 도구는 각 프로젝트의 루트 디렉터리에 project.config.json을 생성합니다. 도구를 다시 설치하거나 변경할 때 이 파일에 기록됩니다. 컴퓨터가 작동 중이면 동일한 프로젝트의 코드 패키지만 로드하면 되며, 개발자 도구는 편집기 색상, 코드 업로드 시 자동 압축 등 프로젝트를 개발할 때 개인화된 구성을 복원하는 데 자동으로 도움을 줍니다. 등 다양한 옵션.

페이지 구성 page.json

여기서 page.json은 실제로 페이지/로그 디렉터리의 로그.json 및 미니 프로그램 페이지와 관련된 기타 구성을 나타내는 데 사용됩니다.

전체 미니 프로그램의 스타일이 파란색인 경우 app.json에서 상단 색상을 파란색으로 선언할 수 있습니다. 실제 상황은 그렇지 않을 수도 있습니다. 어쩌면 미니 프로그램의 각 페이지는 서로 다른 기능 모듈을 구별하기 위해 서로 다른 색조를 가질 수 있습니다. 따라서 우리는 개발자가 지금과 같이 각 페이지의 일부 속성을 독립적으로 정의할 수 있도록 page.json을 제공합니다. 풀다운 새로 고침 허용 여부 등 상단 색상에 대해 이야기합니다.

구성 세부 정보

app.json 파일은 WeChat 애플릿을 전역적으로 구성하고, 페이지 파일 경로 결정, 창 성능, 네트워크 시간 초과 설정, 여러 탭 설정 등에 사용됩니다. app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了所有配置选项的 app.json

다음은 모든 구성 옵션이 포함된 app.json입니다.

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

app.json 구성 항목 목록properties유형필수설명페이지문자열 배열예페이지 경로 설정창객체아니요기본 페이지의 창 동작 설정탭바객체아니요하단 탭의 성능 설정networkTimeout객체아니요네트워크 시간 초과 설정디버그부울아니요디버그 모드 활성화 여부 설정🎜

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

如开发目录为：

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

app.json

app.wxss

则需要在 app.json 中写

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮	微信版本 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
backgroundColorTop	String	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信版本 6.5.16
backgroundColorBottom	String	#ffffff	底部窗口的背景色，仅 iOS 支持	微信版本 6.5.16
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面相关事件处理函数
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

注：HexColor（十六进制颜色值），如"#ff00ff"

注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用） 可方便切到旧视觉

如 app.json ：

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

1. 当设置 position 为 top 时，将不会显示 icon

2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black/white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

networkTimeout

可以设置各种网络请求的超时时间。

属性说明：

属性	类型	必填	说明
request	Number	否	wx.request的超时时间，单位毫秒，默认为：60000
connectSocket	Number	否	wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile	Number	否	wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile	Number	否	wx.downloadFile的超时时间，单位毫秒，默认为：60000

debug

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

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面相关事件处理函数。
disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

相关文章：

微信小程序 教程之小程序配置    

微信小程序的配置

相关视频：

App.json全局配置文件详解-微信小程序开发视频教程

위 내용은 미니 프로그램의 코드 구성 중 json 접미사가 포함된 JSON 구성 파일에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!