>웹 프론트엔드 >uni-app >유니앱 사용법

유니앱 사용법

coldplay.xixi
coldplay.xixi원래의
2020-12-09 16:29:0111395검색

uniapp 사용 방법: 먼저 개발자는 HBuilderX를 다운로드하여 설치한 다음 프로젝트 디렉토리를 생성하고 페이지와 탭바를 구성하고 마지막으로 실행해야 합니다.

유니앱 사용법

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, thinkpad t480 컴퓨터.

추천(무료): uni-app development tutorial

uniapp 사용 방법:

1 먼저 개발자는 HBuilderX를 다운로드하여 설치해야 합니다

1) 도구 모음을 클릭합니다. HBuilderX 파일에서 - > New - > 프로젝트:

유니앱 사용법

2) uni-app을 선택하고 프로젝트 이름을 입력합니다. test, Create를 클릭하면 uni-app을 성공적으로 생성할 수 있습니다

유니앱 사용법

2. 프로젝트 디렉토리

유니앱 사용법

3. 페이지 생성

유니앱 사용법

4. 페이지 및 탭바 구성

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/homework/homework",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/personal/personal",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
    "color": "#C3B8B4",
    "selectedColor": "#F76605",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "学员",
        "iconPath": "static/indexNormal.png",
        "selectedIconPath": "static/indexActive.png"
      },
      {
        "pagePath": "pages/homework/homework",
        "text": "作业",
        "iconPath": "static/homeworkNormal.png",
        "selectedIconPath": "static/homeworkActive.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "我的",
        "iconPath": "static/personalNormal.png",
        "selectedIconPath": "static/personalActive.png"
      }
    ]
  }
}

5.

6. 작업 렌더링 유니앱 사용법

관련 무료 학습 권장 사항: 유니앱 사용법프로그래밍 비디오

위 내용은 유니앱 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.