uni-app 시작하기: 프로젝트 생성 및 기본 탭바 구성

uni-app은 Vue.js를 사용하여 크로스 플랫폼 애플리케이션을 개발하기 위한 프런트 엔드 프레임워크입니다. 개발자는 iOS, Android, H5 및 미니 프로그램과 같은 여러 플랫폼으로 컴파일할 수 있는 코드 세트를 작성합니다. 기본 미니 프로그램 개발과 비교하여 APP의 양쪽 끝이 기본적으로 개발되고 학습 및 개발 비용이 저렴합니다. 플랫폼에는 풍부한 구성 요소가 포함되어 있으며 실행 경험이 매우 좋기 때문에 개발자가 널리 환영합니다.

시작하기 전에 개발자는 다음 도구를 다운로드하고 설치해야 합니다. HBuilderX: 공식 IDE 다운로드 주소

1. 첫 번째 uni-app 프로젝트를 생성합니다.

툴바 프로젝트에서 파일->새로 만들기->

왼쪽의 uni-app 프로젝트를 선택하고 프로젝트 이름(예: test), 위치 파일 경로를 입력하고 기본 템플릿을 사용한 후 생성을 클릭하면 uni-app 프로젝트가 성공적으로 생성됩니다.

2. 프로젝트 디렉터리 소개

새 uni-app 프로젝트가 성공적으로 생성되면 프로젝트 디렉터리에 다음 이미지 파일이 생성됩니다.

3.새 uni-app 디버깅 후. 프로젝트가 성공적으로 생성되면 HBuilderX 도구 미리보기 오른쪽에 있는 미리보기 버튼을 클릭하면 미리보기 도구 모음을 통해 레이아웃 구조, 스타일, 콘솔 등을 디버그하고 볼 수 있습니다.

4. 기본 탭바 생성 및 구성

pages.json 파일 열기, 제목 수정, 페이지 추가 라우팅, tabBar 추가, tabBar에는 "홈 페이지", "카테고리", "장바구니", "내" 4개가 추가됩니다. 그에 따라 페이지 디렉터리에 4개의 페이지를 만듭니다. 코드는 다음과 같습니다.

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "ShopWind多商户商城"
			}
		}, {
			"path": "pages/user/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}, {
			"path": "pages/cart/index",
			"style": {
				"navigationBarTitleText": "购物车"
			}
		}, {
			"path": "pages/category/index",
			"style": {
				"navigationBarTitleText": "商品分类"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#333333",
		"selectedColor": "#fc2b34",
		"borderStyle": "white",
		"backgroundColor": "#FFFFFF",
		"position": "bottom",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/images/home.png",
				"selectedIconPath": "static/images/home-hover.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/index",
				"iconPath": "static/images/gcategory.png",
				"selectedIconPath": "static/images/gcategory-hover.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/cart/index",
				"iconPath": "static/images/cart.png",
				"selectedIconPath": "static/images/cart-hover.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/index",
				"iconPath": "static/images/my.png",
				"selectedIconPath": "static/images/my-hover.png",
				"text": "我的"
			}
		]
	}
}

5. 정적 리소스 패키지(이미지) 가져오기

위 코드 블록은 정적 리소스 이미지에 적용되며 이미지는 정적 디렉터리에 배치되어야 합니다

6. 프로젝트가 빌드되고 효과는 다음과 같습니다

리소스 패키지 다운로드

위 내용은 uni-app 시작하기: 프로젝트 생성 및 기본 탭바 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!