유니앱 랜딩페이지 설정 방법

모바일 인터넷이 심층적으로 발전함에 따라 사용자 경험과 브랜드 이미지를 향상하기 위해 자체 앱 구축을 선택하는 기업이 점점 더 많아지고 있습니다. 개발 비용을 줄이고 개발 효율성을 높이기 위해 많은 기업이 크로스 플랫폼 개발 프레임워크를 사용하여 APP를 구축하는 것을 선택하는데, Uniapp은 그중에서도 뛰어난 오픈 소스 프레임워크입니다.

Uniapp 애플리케이션을 구축할 때 애플리케이션이 시작된 후 로드되는 첫 번째 페이지인 시작 페이지를 정의해야 하며 일반적으로 랜딩 페이지 또는 홈페이지라고 합니다. 이 글에서는 Uniapp 애플리케이션의 랜딩 페이지를 생성하고 설정하는 방법을 자세히 설명합니다.

1단계: Uniapp 프로젝트 생성

Uniapp 공식 웹사이트에서 최신 버전의 Uniapp을 다운로드하여 로컬 환경에 설치하세요.

$ npm install --global @vue/cli@3.0.0-beta.10
$ vue create -p dcloudio/uni-preset-vue my-project

명령줄에 위의 명령을 입력하여 uni-app 프로젝트를 생성하세요.

2단계: 랜딩 페이지 만들기

src 디렉터리에서 자체 홈페이지 vue 페이지를 만들 수 있습니다. 원하는 편집기를 선택하여 작성할 수 있습니다. 여기서는 HbuilderX 편집기를 사용하여 index.vue 파일을 만듭니다. 코드는 다음과 같습니다.

<template>
  <view class="container">
    <text class="text">这是我的Uniapp应用程序的落地页</text>
  </view>
</template>

<style>
  .container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 24px;
  }
</style>

간단히 말하면 컨테이너 태그와 텍스트 태그를 생성하고 컨테이너를 사용합니다. 중국어 콘텐츠를 중앙에 배치합니다. 여기서 데모 목적으로 우리가 설정한 텍스트 내용은 "이것은 내 Uniapp 애플리케이션의 랜딩 페이지입니다."입니다.

3단계: 랜딩 페이지 설정

랜딩 페이지를 생성한 후 Uniapp 애플리케이션에 이것이 시작 페이지이며 페이지.json 파일에서 구성되어야 함을 알려야 합니다. Pages.json 파일을 열고 다음 코드를 추가합니다.

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  }
}

이 Pages.json 파일에서는 애플리케이션의 모든 페이지를 정의합니다. 여기에는 방금 생성한 "인덱스" 페이지만 있습니다. "navigationBarTitleText" 속성은 탐색 모음 제목 텍스트를 설정하는 데 사용됩니다. 또한 전역 탐색 모음 스타일도 설정해야 합니다.

4단계: 애플리케이션 시작 페이지 설정

랜딩 페이지를 설정했지만 Uniapp에 애플리케이션 시작 페이지가 무엇인지 알려줘야 합니다. Pages.json 파일에 다음 콘텐츠를 추가합니다.

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      }
    ]
  },
  "launchPage": {
    "path": "pages/index/index"
  }
}

여기에서는 tabBar 및 launchPage 속성을 사용합니다. tabBar는 애플리케이션의 하단 탐색 모음을 정의하는 데 사용되고, launchPage는 애플리케이션 시작 페이지를 설정하는 데 사용됩니다. 시작 페이지를 방금 만든 "인덱스" 페이지로 설정합니다.

여기서 애플리케이션의 하단 탐색 모음에 대한 여러 속성도 정의해야 합니다. 여기에는 하나의 "홈 페이지"만 정의되어 있으며 필요에 따라 다른 페이지를 정의할 수 있으며 iconPath 및 selectedIconPath 속성을 사용하여 아이콘을 정의합니다. 탐색 표시줄 및 활성화 상태 아이콘에 해당합니다.

5단계: 애플리케이션 실행

이제 랜딩 페이지와 시작 페이지를 설정했으므로 애플리케이션을 실행하여 효과를 확인할 수 있습니다. 애플리케이션을 시작하려면 명령 콘솔에 다음 명령을 입력하세요.

$ npm run dev:%PLATFORM%

여기서 %PLATFORM%은 나중에 사용하는 플랫폼을 나타내며 h5, app-plus, mp-weixin 및 기타 플랫폼일 수 있습니다.

이제 Uniapp 애플리케이션의 랜딩 페이지가 성공적으로 생성 및 설정되었습니다. 웹 애플리케이션을 구축하든 크로스 플랫폼 모바일 애플리케이션을 구축하든 Uniapp은 인상적인 애플리케이션을 만들 수 있는 강력한 개발 프레임워크입니다.

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