Uniapp零基础开发学习笔记(1) - 项目初步创建

有C#以及Python的基础，一直想学习APP或者网页开发。现在有各种方便的应用app，原来的winform那一套应用范围已经很受限了，但是没有好的学习渠道，而前端/后端/JS/NODE/VUE/CSS/HTML5等各种概念太复杂了，一时竟也不知从何学起。无意间在网页上发现了Uniapp的开发教程，看上去还算比较简单,在下载HBuilderX之后，有不少官方代码,于是就想通过复制粘贴官方代码,做一些简单的页面，并把理解到的知识写下来,作为一个巩固，每天进步一点，后面正确能够做出完整的应用。

1. 先查看官方帮助文件

好的学习总是先从官方帮助文件开始，从帮助入口这里打开入门教程。
在这里插入图片描述
地址 https://hx.dcloud.net.cn/Tutorial/StartedTutorial

简单看了HBuilderX介绍之后,无非就是功能强大好用，但我无感，于是直接跳转uni-app开发文档
地址 https://uniapp.dcloud.net.cn/
在这里插入图片描述
开发文档中最核心的部分就是，发现了新建项目可以有很多的模板，模板意味着可以复制粘贴…
这样通过复制粘贴开发，理解起来就容易了不少。。

2. 打开一个组件的示例项目

选择新建项目后，共有5个基本类型普通项目/uni-app/Wap2App/5+App/IDE插件,选择uni-app
在这里插入图片描述
有10个类型的项目模板可供选择：
第1个为默认模板，打开之后只有一个项目基本架构，没有内容，用来做基础项目练习填写代码非常合适。
第2个是uni-app组件的模板，里面有各种组件的代码，组件就是类似winform的各种控件，同时里面还有各种组件的应用代码和效果，可以作为初学者学习的最佳案例。
在这里插入图片描述
第3个是利用uniCloud进行云端开发，已经有些进阶了，先不学。4-10更是综合运用，先把第2个学好再说。

因此，这里首先创建1个Hello uni-app演示项目。
打开目录，选择App.vue，然后在菜单“运行”中"选择运行至内置浏览器",要提前下载好内置浏览器调试插件，也可以用外部chrome打开。
在这里插入图片描述
编译完成以后就可以看到uni-app组件的示例代码效果了。

3. 创建一个默认模板项目

新建一个新建的uni-app项目命名为Demo1，选择默认模板，用来作为学习项目。
这个目录下面少了很多的子目录和文件。
在这里插入图片描述
编译之后显示的就是默认的pages/index/index.vue

标题是uni-app,这个在pages.json中定义了
“navigationBarTitleText”: “uni-app” 不在index.vue里
代码中大概可以读出来的信息为logo,image标签里的位置为src=“/static/logo.png”，这个改一个图片就能切换到别的图片。
{ {title}} 这里有一个绑定的变量title，从script的data()函数返回值获取为Hello。

<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下新建一个components目录，再把Hello uni-app主目录下的pages\components\form\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>

最终效果如下:
在这里插入图片描述
不管好不好看，至少初步样式出来了，后面再慢慢学习改布局和触发动作，第一步学习就到这里。