유니앱 프로젝트는 어떻게 만드나요? 공정 설명

유니앱 프로젝트는 어떻게 만드나요? 이 글은 유니앱을 만드는 과정을 체계적으로 설명하는 글이 여러분께 도움이 되었으면 좋겠습니다!

uni-app을 만드는 과정:

vue, WeChat 애플릿, 컴포넌트 패키징, 모바일 제스처 패키징, 데이터 페이징, axios, 모멘트 등 현재 프런트 엔드 필수 기술이 다수 포함되어 있습니다. , 플렉스 레이아웃, Sass, 비디오 재생, 비디오 다운로드 및 기타 기능. [관련 추천 : "uniapp 튜토리얼"]

1. uni-app 소개

1.1 uni-app이란

uni-app은 vue.js 구문을 사용하여 개발하는 도구입니다. 모든 프론트엔드 애플리케이션 프레임워크

다양한 것을 개발할 수 있습니다

풀엔드 개발 프레임워크라고도 합니다

2. uni-app 기초

2.1 기본 지식

• uni-app 첫 경험
• 프로젝트 구조 소개
• 스타일과 sass
• 기본 구문
• 이벤트
• Components
• Life Cycle

3. 기본을 먼저 하고 프로젝트를 진행합니다

필요한 기술 스택은

• html
입니다.
• css
• JavaScript
• vue
• WeChat applet
• uni-app
• uni-ui
• uni-api
• moment.js
• Gesture Packaging

4.

1. 글로벌 설치

npm install -g @vue/cli

2. 프로젝트 만들기

vue create -p dcloudio/uni-preset-vue my-project

3. 프로젝트 시작(WeChat 애플릿)

npm run dev:mp-weixin

4. WeChat 애플릿 개발자 도구로 프로젝트를 가져옵니다

루트 디렉터리를 입력하세요

4.1

4.2 스타일 및 sass

는 미니 프로그램의 rpx와 h5의 vw 및 vh를 지원합니다
• Sass 구성이 내장되어 있으며 해당 종속성인 "npm install"만 설치하면 됩니다. sass-loader node-sass "
• vue 컴포넌트에서 스타일 태그에 "

5. 기본 구문

Vue의 기본 구문

v-bind, v-if, v -show, v-for 등

6. 이벤트 사용

v-on

7. 컴포넌트의 간단한 사용Component 매개변수 전달

컴포넌트 슬롯
• 7.1 간단한 컴포넌트 사용

컴포넌트 정의컴포넌트 소개

컴포넌트 등록
• 컴포넌트 사용
• 7.1 1 구성요소의 정의

src 디렉토리에 새 폴더 compon을 생성합니다 ents 컴포넌트를 저장하는 데 사용됩니다컴포넌트 디렉토리에서 직접 새 컴포넌트 *.vue를 생성합니다

• 7.12 컴포넌트 소개

페이지에 컴포넌트 소개 "컴포넌트 이름 가져오기" from'컴포넌트 경로'"

7.13 컴포넌트 레지스터

페이지의 인스턴스에서 컴포넌트 속성을 추가하세요속성 컴포넌트는 객체이므로 컴포넌트를 레지스터에 넣어주세요

• 7.14 컴포넌트 사용

페이지의 태그에서 직접 가져오기를 사용합니다. 컴포넌트 ""

• 7.2 컴포넌트가 매개변수를 전달합니다

부모가 를 통해 자식에게 매개변수를 전달합니다. 속성

자식은
• 트리거 이벤트를 통해 부모에게 매개변수를 전달합니다. 전역 데이터 전송 매개변수를 사용합니다.
• Vue 프로토타입을
• 마운트하여
  globalData
  • 을 통해
  • 7.21 아버지가 다음에게 데이터를 전달합니다. 아들 아버지 페이지로 사위로 아이에게 아이에게 아이에게 아이에게 아이에게
  ul-com
  구성 요소는 속성 이름
list

을 통해 배열 데이터를 전달합니다. 하위 구성요소는 props

• <ul-com : list="[1,2,3,4]">
  
  props: {
  list: Array
  },

  7.22 하위 구성요소가 상위 구성요소에 데이터를 전달합니다
• 하위 구성요소는 상위 구성요소에 데이터 전달

을 통해 이벤트를 트리거합니다.

listening events

Writing

• methods: {
      handleclick(){
      this.$emit("textchange",'来自子组件的数据');}
  }

  <ul-com :list="[1,2,3,4]"
  @textChange="handleTextchange">

하위 구성요소에 클릭 이벤트 설정
메서드에서 전달된 매개변수 설정

상위-하위 보기에서 청취 이벤트 설정
수락 상위 메소드의 매개변수
• 7.3 전역 공유 데이터

• Vue의 프로토타입을 통해 데이터 공유(이것을 사용하여 가져오기)
  globalData를 통해 데이터 공유(정의 후 가져오려면 getapp 사용)

vuex

Local 스토리지

Vue.prototype.baseURL="http: //www.baidu.com"

• 7.4 구성요소 슬롯
• • 태그는 실제로 데이터 유형입니다. 태그를 하위 구성 요소에 동적으로 전송하려는 경우 슬롯을 사용할 수 있습니다.
  • 슬롯을 사용하여 자리 표시자를 구현하세요

  상위 페이지의 태그를 넣기만 하면 손실됩니다. 하위 페이지

  8. 라이프 사이클

  8.1 소개

  • uni-app 프레임워크의 라이프 사이클은 vue와 WeChat 애플릿의 라이프 사이클을 결합합니다
  • 글로벌 APPonLaunch에서 사용됩니다. 는 애플리케이션이 시작될 때를 의미합니다.
  onLoad
  • 또는 onShow는 페이지가 로드될 때와 구성 요소가 표시될 때를 의미합니다.
  • 이 기사는 https://juejin.cn/post/6996561691639037983
  에서 재인쇄되었습니다. 프로그래밍 관련 지식을 더 보려면
  프로그래밍 입문

  을 방문하세요! !

위 내용은 유니앱 프로젝트는 어떻게 만드나요? 공정 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!