미니 프로그램의 글로벌 구성에 대한 심층 분석

이 기사에서는 미니 프로그램의 전역 구성에 대해 설명하고 미니 프로그램의 일반적인 구성 항목과 페이지 구성 파일에 대해 알아보겠습니다.

전역 구성 파일 및 일반적으로 사용되는 구성 항목

미니 프로그램 루트 디렉토리에 있는 app.json 파일은 미니 프로그램의 전역 구성 파일입니다. 일반적으로 사용되는 구성은 다음과 같습니다. app.json 文件是小程序的全局配置文件。常用的配置如下：

• pages：记录当前小程序所有页面的存放路径
• window：全局设置小程序窗口的外观
• tabBar：设置小程序底部的 tabBar 效果
• style
  • 페이지: 현재 미니 프로그램의 모든 페이지의 저장 경로를 기록합니다.
  • 창: 전역적으로 설정됩니다. 미니 프로그램 창의 모습
  • tabBar: 미니 프로그램 하단에 tabBar 효과를 설정합니다
  • style : 새 버전의 컴포넌트 스타일 활성화 여부 [관련 학습 권장 사항 :
  Mini 프로그램 개발 튜토리얼

  ---

  】

  window

  미니 프로그램 창의 컴포넌트

  

  window 공통 구성 items속성 이름Type 기본값DescriptionnavigationBarTitleTextStringString탐색 표시줄 텍스트 콘텐츠navigationBarBackgroundColorHexColor #00 0000탐색 모음 배경색navigationBarTextStyleStringwhite탐색 모음 제목 색상, 흰색/흰색 backgroundColorHexColor#ffff ff배경색 windowBackgroundTextStyleString dark 드롭다운 로딩 스타일은 dark/lightenablePullDownRefreshBooleanfalse전체적으로 풀다운 새로고침을 활성화할지 여부 onReachBottomDistance Number50page 풀업 하단 이벤트는 페이지 거리의 하단에서 발생하며 단위는 px🎜🎜🎜

  탐색 표시줄 제목 설정

  app.json -> window -> NavigationBarTitleTextapp.json -> window -> navigationBarTitleText

  设置导航栏的背景色

  app.json -> window -> navigationBarBackgroundColor

  设置导航栏标题颜色

  app.json -> window -> enablePullDownRefresh

  全局开启下拉刷新（在 <span style="font-size: 18px;">app.json</span> 中启用下拉刷新功能，会作用于每个小程序页面）

  下拉刷新：通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

  app.json -> window -> enablePullDownRefresh

  设置下拉刷新时窗口的背景色

  当全局开启下拉刷新功能后，默认的窗口背景为白色。设置自定义下拉刷新窗口背景色

  app.json -> window -> backgroundColor

  设置下拉刷新时 loading 的样式

  当全局开启下拉刷新功能后，默认的窗口的 loading 为白色。设置 loading 样式的效果

  app.json -> window -> backgroundTextStyle

  设置上拉触底的距离

  上拉触底：通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

  app.json -> window -> onReachBottomDistance

  ---

  tabBar

  什么是tabBar

  • tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换，小程序中将其分为俩种：
    • 底部 tabBar
    • 顶部 tabBar
  • 注意：
    • tabBar 中只能配置最少2个，最多5个 tab 页签
    • 当渲染顶部 tabBar 时，不显示 icon，只显示文本

  

  tabBar 的 6 个部分

  

  tabBar 常用配置项

  • tabBar 组件的配置项

    탐색 표시줄 배경색 설정app.json -> NavigationBarBackgroundColorapp.json -> 활성화PullDownRefresh전역적으로 풀다운 새로 고침 활성화( 에서 풀다운 새로 고침 기능을 활성화하면 각 미니 프로그램 페이지에 영향을 미칩니다.) 풀다운 새로 고침 중 로딩 스타일 설정 -다운 새로 고침 기능이 전역적으로 활성화되어 있으며 기본 창 로딩은 흰색입니다. 로딩 스타일 효과 설정 app.json -> window -> backgroundTextStyle아래로 풀업 사용 화면에 손가락을 올려서 더 많은 데이터를 로드하는 동작

    属性	类型	必填	默认值	说明
    position	String	否	bottom	tabBar 的位置，仅支持 bottom
    borderStyle	String	否	black	tabbar 上边框的颜色， 仅支持 black / white
    			탐색 표시줄 제목 색상 설정
    	<span style="font-size: 18px;">app.json</span>		풀다운 새로 고침: 풀다운 슬라이딩 작업을 통해 페이지 데이터를 다시 로드하는 동작입니다. 화면에 손가락	app.json -> window -> 활성화PullDownRefresh
    풀다운 새로 고침 중 창의 배경색 설정		새로 고침 기능이 전역적으로 활성화되면 기본 창 배경은 흰색입니다. 사용자 정의 풀다운 새로 고침 창 배경색 설정	app.json -> window -> backgroundColor
    			아래로 풀업 거리 설정

    app.json -> onReachBottomDistance

  ---

  • tabBar
    tabBar란 무엇인가요
    Bottom 두 가지 유형으로 나뉩니다. tabBar상단 탭바 참고:
    탭바에서는 최소 2개, 최대 5개의 탭만 구성할 수 있습니다상단 탭바가 렌더링되면 아이콘이 표시되지 않습니다. 텍스트만 표시됩니다
    tabBar 구성 요소 구성 항목필수 position

    	tabBar는 모바일 애플리케이션에서 흔히 사용되는 페이지 효과로, 여러 페이지 사이를 빠르게 전환하는 데 사용됩니다. 미니 프로그램에서는
    			tabBar
    		tabBar 일반 구성 항목
    		Properties	Type
    기본값	설명

    String🎜🎜No🎜🎜bottom🎜🎜tabBar 위치, bottom만 지원 🎜🎜🎜🎜borderStyle 🎜🎜String🎜🎜아니요🎜 🎜검정색 🎜🎜탭바 상단 테두리 색상, 검정색 / 흰색🎜🎜🎜🎜color🎜🎜HexColor🎜🎜No🎜🎜🎜🎜🎜텍스트의 기본 색상만 지원합니다. tabBar (선택 해제)🎜🎜🎜 🎜selectedColor🎜🎜HexColor🎜🎜No🎜🎜🎜🎜🎜tabBar 선택 시 텍스트의 기본 색상🎜🎜🎜🎜BackgroundColor🎜🎜HexColor🎜🎜No🎜 🎜🎜🎜🎜탭 바 배경 color🎜🎜🎜🎜list🎜🎜Array🎜🎜 🎜🎜🎜🎜🎜tabBar의 탭 목록으로, 최소 2개에서 최대 5개의 🎜🎜🎜🎜🎜🎜🎜각 탭 항목에 대한 구성 옵션🎜 🎜🎜 🎜🎜Attributes🎜🎜Type🎜🎜Required🎜🎜Description 🎜 🎜🎜🎜🎜🎜pagePath🎜🎜String🎜🎜은 🎜🎜 페이지 경로이며, 페이지에서 먼저 정의되어야 합니다. 🎜🎜🎜🎜 text🎜🎜String🎜🎜은 🎜🎜tab🎜🎜🎜의 버튼 텍스트 🎜iconPath🎜🎜String🎜🎜 No🎜🎜그림 경로, 아이콘 크기 제한은 40kb, 권장 크기는 81px * 81px, 네트워크 그림은 지원되지 않습니다🎜🎜🎜🎜selectedIconPath🎜🎜String 🎜🎜 아니요🎜🎜사진 경로 선택 시 아이콘 크기 제한은 40kb, 권장 크기는 81px * 81px, 네트워크 이미지를 지원하지 않습니다 🎜🎜🎜🎜

  ---

  페이지 구성 파일

  페이지 구성 파일의 역할

  애플릿에서 각 페이지에는 창을 구성하는 데 사용되는 고유한 .json 구성 파일이 있습니다. 현재 페이지 모양, 페이지 효과 등을 구성합니다. .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置

  页面配置和全局配置的关系

  • 小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现

  • 对小程序中某个页面想要拥有特殊的窗口表现，此时需要对页面级别的 .json

  • 페이지 구성과 전역 구성의 관계
  미니 프로그램에서 앱의 <code>창 .json 노드를 사용하면 미니 프로그램의 각 페이지에 대한 창 성능을 전역적으로 구성할 수 있습니다

  미니 프로그램의 특정 페이지에 대해 특별한 창 성능을 적용하려면 페이지를 구성해야 합니다. -level .json 파일 수정

  참고:페이지 구성이 전역 구성과 충돌하는 경우 근접 원칙에 따라 최종 효과는 페이지 구성을 기반으로 합니다페이지 구성에서 일반적으로 사용되는 구성 항목현재 탐색 모음 배경 색상 white탐색 모음 제목 색상, 검정/흰색만 지원navigationBarTitleTextString현재 탐색 모음 제목 텍스트 콘텐츠 만 지원합니다. false50

  Properties	Type	기본값	Description
  	navigationBarBackgroundColor	HexColor	#000000
  	NavigationBarTextStyle	String
  	배경색상	HexColor	##ffffff f 현재 Windows의 배경색
  backinggroundtextStyle	String	dark= 현재 페이지의 풀다운로드의 스타일은 Dark/LightingablePullDownRefresh	Boolean
  현재 페이지의 풀다운 새로고침 활성화 여부		onReachBo ttomDistance	Number

  페이지 풀다운 이벤트가 발생했을 때 페이지 하단으로부터의 거리, px
  🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 미니 프로그램의 글로벌 구성에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!