Uniapp zero-based development study notes (1) - preliminary project creation

I have a foundation in C# and Python, and I have always wanted to learn APP or web development. Nowadays, there are various convenient application apps. The original winform application scope is very limited, but there are no good learning channels, and various concepts such as front-end/back-end/JS/NODE/VUE/CSS/HTML5 are too It’s so complicated that I don’t even know where to start. I accidentally discovered the Uniapp development tutorial on the web page. It seemed relatively simple. After downloading HBuilderX, there were a lot of official codes, so I wanted to make some simple pages by copying and pasting the official codes, and put what I understood Write down the knowledge as a consolidation, make a little progress every day, and then be able to apply it correctly and completely later.

1. Check the official help file first

Good learning always starts with the official help file, and open the introductory tutorial from the help entrance.
Insert image description here
Address https://hx.dcloud.net.cn/Tutorial/StartedTutorial

After briefly reading the introduction of HBuilderX, I found that it is powerful and easy to use, but I didn’t feel that way, so I directly jumped to the uni-app development document
Addresshttps://uniapp.dcloud.net.cn/
Insert image description here
The core part of the development documentation is that it is discovered that new projects can have many templates. Templates mean that they can be copied and pasted...< /span>
In this way, it is much easier to understand through copy-paste development. .

2. Open a component sample project

After selecting a new project, there are 5 basic types of ordinary projects/uni-app/Wap2App/5+App/IDE plug-in. Select uni-app
Insert image description here
and there are 10 types of projects. Templates are available:
The first one is the default template. After opening, there is only a basic project structure and no content. It is very suitable for practicing filling in the code for basic projects.
The second one is the template of the uni-app component, which contains the codes of various components. The components are various controls similar to winform, and there are also application codes and effects of various components. It can be used as the best case study for beginners.
Insert image description here
The third one is to use uniCloud for cloud development. It is already somewhat advanced, so I won’t learn it yet. 4-10 is a comprehensive application, learn the second one first and then talk about it.

Therefore, here we first create a Hello uni-app demo project.
Open the directory, select App.vue, and then "select run to the built-in browser" in the menu "Run". You must download the built-in browser debugging plug-in in advance, or you can use external chrome Open.
Insert image description here
After the compilation is completed, you can see the sample code effect of the uni-app component.

3. Create a default template project

Create a new uni-app project named Demo1, select the default template, and use it as a learning project.
There are many subdirectories and files missing under this directory.
Insert image description here
After compilation, what is displayed is the default pages/index/index.vue

The title is uni-app, which is defined in pages.json
“navigationBarTitleText”: “uni-app” is not in index.vue
The information that can be read in the code is logo, and the position in the image tag is src="/static /logo.png", you can switch to another image by changing one image.
{ {title}} There is a bound variable title, which is obtained as Hello from the return value of the script's data() function.

<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. Reference component code modification page

The index.vue page is relatively simple, so I wanted to use the component code of the Hello uni-app demo project to transform it, such as making it a login page, and learn how to use it.
Check the components of Hello uni-app and find that the page structure of form is relatively similar, so I create a new components directory under Demo1, and then change pages\components\form\ in the main directory of Hello uni-app Copy form.vue
Insert image description here
Copy these sample codes from form.vue and paste them into 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>

The effect after running is
Insert image description here
Modify the above code combined with the sample code

<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>

The final effect is as follows:
Insert image description here
Regardless of whether it looks good or not, at least the preliminary style is out. Later, I will slowly learn to change the layout and trigger actions. The first step of learning ends here.