유니앱 제로 기반 개발 연구 노트(1) - 예비 프로젝트 생성
저는 C#과 Python에 대한 기초 지식을 갖고 있으며 항상 APP나 웹 개발을 배우고 싶었습니다. 요즘에는 다양한 편리한 응용프로그램이 있는데, 원래 winform 응용범위는 매우 제한되어 있지만 제대로 된 학습 채널이 없고, front-end/back-end/JS/NODE/VUE/CSS/HTML5 등 다양한 개념도 존재합니다. 너무 복잡해서 어디서부터 시작해야 할지조차 모르겠습니다. 우연히 웹페이지에서 Uniapp 개발 튜토리얼을 발견했는데 비교적 간단해 보였습니다.HBuilderX를 다운로드하고 나니 공식 코드가 많아서 공식 코드를 복사해서 붙여넣어서 간단한 페이지를 만들고 이해한 내용을 넣어보고 싶었습니다. 지식을 통합하여 기록하고 매일 조금씩 발전한 다음 나중에 정확하고 완전하게 적용할 수 있습니다.
1. 먼저 공식 도움말 파일을 확인하세요.
좋은 학습은 항상 공식 도움말 파일에서 시작되며 도움말 입구에서 입문 튜토리얼을 엽니다.
주소 https://hx.dcloud.net.cn/Tutorial/StartedTutorial
HBuilderX 소개를 잠깐 읽어보니 강력하고 사용하기 쉽다는 것을 알았지만 그런 느낌은 아니어서 유니앱 개발 문서로 바로 점프했습니다
주소https://uniapp.dcloud.net.cn/
개발 문서의 핵심 부분은 새로운 프로젝트가 템플릿이 많다는 것은 템플릿을 복사해서 붙여넣을 수 있다는 뜻인데...< /span>
이런 식으로 복사붙여넣기 개발을 하면 훨씬 이해하기 쉽습니다. .
2. 컴포넌트 샘플 프로젝트 열기
새 프로젝트를 선택하면 일반 프로젝트/uni-app/Wap2App/5+App/IDE 플러그인 5가지 기본 유형이 있습니다. uni-app을 선택
하면 됩니다. 10가지 유형의 프로젝트가 있습니다. 템플릿을 사용할 수 있습니다:
첫 번째는 기본 템플릿입니다. 열면 기본 프로젝트 구조만 있고 콘텐츠가 없습니다. 채우기 연습에 매우 적합합니다. 기본 프로젝트용 코드입니다.
두 번째는 uni-app 컴포넌트의 템플릿으로 각종 컴포넌트의 코드가 포함되어 있습니다. 컴포넌트는 winform과 유사한 다양한 컨트롤이며, 각종 컴포넌트의 애플리케이션 코드와 효과도 있습니다. .초보자를 위한 최고의 사례 연구로 활용될 수 있습니다.
세 번째는 uniCloud를 클라우드 개발에 활용하는 것인데요, 이미 어느 정도 고급 단계라서 아직 배우지는 않겠습니다. 4-10은 포괄적인 응용 프로그램이므로 두 번째 것을 먼저 배우고 그것에 대해 이야기하십시오.
따라서 여기서는 먼저 Hello uni-app 데모 프로젝트를 생성합니다.
디렉터리를 열고 App.vue를 선택한 다음 "실행" 메뉴에서 "내장 브라우저로 실행 선택"을 클릭하세요. 내장 브라우저 디버깅 플러그인을 다운로드해야 합니다. 사전에 또는 외부 크롬 열기를 사용할 수 있습니다.
컴파일이 완료되면 uni-app 컴포넌트의 샘플 코드 효과를 확인할 수 있습니다.
3. 기본 템플릿 프로젝트 생성
Demo1이라는 새로운 uni-app 프로젝트를 생성하고 기본 템플릿을 선택한 후 학습 프로젝트로 사용하세요.
이 디렉토리 아래에는 많은 하위 디렉토리와 파일이 없습니다.
컴파일 후 표시되는 것은 기본 페이지/index/index.vue입니다.
제목은 uni-app이며, 이는 Pages.json에 정의되어 있습니다. a>
“navigationBarTitleText”: “uni-app”이 index.vue에 없습니다
코드에서 읽을 수 있는 정보는 로고, 이미지 태그에서의 위치입니다. src="/static /logo.png"인 경우, 하나의 이미지를 변경하여 다른 이미지로 전환할 수 있습니다.
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{
{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
4. 참조 컴포넌트 코드 수정 페이지
index.vue 페이지는 상대적으로 단순하기 때문에 Hello uni-app 데모 프로젝트의 컴포넌트 코드를 활용하여 로그인 페이지로 만드는 등 변형하고 사용법을 배워보고 싶었습니다.
Hello uni-app의 컴포넌트를 확인해보니 form의 페이지 구조가 비교적 유사한 것을 발견하여 Demo1 아래에 새로운 컴포넌트 디렉터리를 생성한 후, Hello uni-app의 메인 디렉토리 form.vue 복사
form.vue에서 샘플 코드를 복사하여 index.vue에 붙여넣기
<form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item uni-column">
<view class="title">姓名</view>
<input class="uni-input" name="nickname" placeholder="请输入姓名" />
<view class="title">姓名</view>
<view class="uni-input-wrapper">
<input class="uni-input" name="password" password type="text" placeholder="请输入密码" />
</view>
</view>
<view class="uni-btn-v">
<button form-type="submit">Submit</button>
<button type="default" form-type="reset">Reset</button>
</view>
</form>
실행 후 효과는
샘플 코드와 결합하여 위 코드를 수정
<form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item uni-column">
用户名
<input class="uni-input" name="username" placeholder="请输入用户名" />
密码
<view class="uni-input-wrapper">
<input class="uni-input" name="password" password type="text" placeholder="请输入密码" />
</view>
</view><br>
<view class="uni-btn-v">
<button type= "primary" form-type="submit">登录</button><br>
<button type="default" form-type="reset">重置</button>
</view>
</form>
최종 효과는 다음과 같습니다.
보기에 좋든 나쁘든 최소한 예비 스타일은 나와 있습니다. 나중에 레이아웃을 변경하고 트리거하는 방법을 천천히 배워보겠습니다. 학습의 첫 번째 단계는 여기서 끝납니다.