uniapp初级入门

在使用vant开发模拟手机商城之后，我发现vant开发是比较轻量的，不太符合我心中的预期。

于是我去找教程学习uniapp，再学习过程中，我把自己敲的代码提出来，供大家参考学习，也许对

你有所帮助呢。

下面介绍一下uniapp

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

上面这段内容是uniapp官网自己的介绍，我借用一下。

说的直白些，uniapp就是全端开发，使用它可以开发vue2，vue3web程序，可以开发h5 web程序，也可以开发微信小程序，还可以开发安卓app，同时还能兼容开发其他各类小程序。

是不是很强大，所以我觉得应该学习一下。

学习uniapp之前，我没有什么具体的认知，学习开始之后，我发现了一个重要的问题。就是如果你想学习uniapp，那么你就必须再之前把vue学习好！！！切记

说到学习vue呢，我个人认为，必须学习vue2的知识，不要随意听信一些其他专家的忽悠，去学习最新的vue3。

为什么我这么说，毕竟vue2现在是成熟期，教程和各种资料非常齐全，生态非常稳定，学习起来会好一点。vue3太年轻了，如果你刚开始接触最新的，势必会影响你学习之前的，这个是我的个人建议。

学好vue2，学好vue2，学好vue2，重要的事情说三遍！！！

有了vue2的基础后，你学习uniapp应该会轻松许多，另外uniapp的语法除了兼容vue语法外，api是兼容的是微信小程序，也就是说，你学会了uniapp，也同时基本搞定了微信小程序的能力。当然，如果你之前就接触过微信小程序开发，那么你学习uniapp会更方便。

uniapp官网

这个是uniapp的官网，学习它，我还是建议你直接下载Hbuilderx软件比较好，尽量不要使用vuecli脚手架的方式开发。

Hbuiderx下载和安装都比较容易，就是个zip压缩包，放到你的固定文件夹，点击程序就可以直接用了。免安装确实很方便。

Hbuilderx安装好了之后，可以参考uniapp官网的快速入手，学习一下怎么新建项目，还是比较容易学习的。

另外，对还需要对软件做一些配置，这个百度也比较多，自己度娘一下哦。或者去b站，找个基础视频看一下，也基本搞定了。

分享代码

新建的uniapp代码，结构如图，我大概介绍一下，其实官网里有详细的介绍，大家去看看。

pages就是放vue页面代码的地方，和使用idea开发vue里面的views差不多。

static就是放静态文件，比如图片，css等

unpackage文件夹，就是程序打包成h5，app等编译文件的地方。

app.vue就是初始vue的地方，和idea的vue项目，有点区别就是，Uniapp的app.vue文件中，是不可以存在template标签的。

main.js还是依然相同，配置，引入都在这里。

manifest.json就是最重要的配置文件，全部配置都在这里配置，可视化的，很方便。

pages.json和idea的vue项目中的router类似，主要是存放路由地址和页面的一些配置项的。

uni.scss是全局预定义的样式变量，在Uniapp项目中使用的。

以上是大概的介绍，说的不太准确的，各位见谅哈！！

下面是代码

index.vue

<template>
	<view class="content">
		<view>
			{{text}}
		</view>
		<view v-text="text">
			
		</view>
		<view v-for="item in list" :key="item.name" @tap="printName(item)">
			{{item.name}}
		</view>
		
		<view v-show="isShow">这是一行文字</view>
		<button type="default" @tap="toggleText">点击控制文字显示与隐藏</button>
		
		<view :class="{red:isActive}">文字颜色会变化</view>
		<button type="default" @tap="changeColor">点击变换颜色</button>
		
		<view :style="{color:isChange ? 'red':''}">内联样式变化文字颜色</view>
		<button type="default" @tap="changeStyle">点击变换style</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				isChange:false,
				isActive:false,
				isShow: true,
				text:'张三',
				list:[
					{name:'苹果'},
					{name:'香蕉'},
					{name:'橘子'},
					{name:'火龙果'},
				]
			}
		},
		methods: {
			changeStyle(){
				this.isChange = !this.isChange
			},
			changeColor(){
				this.isActive = !this.isActive;
			},
			toggleText(){
				this.isShow = !this.isShow;
			},
			printName(obj){
				console.log(obj.name);
			}
		}
	}
</script>

<style>
	.red{
		color: red;
	}
</style>

从代码上，我们可以看出，基本都是vue的语法，学习起来不会太费劲。

好啦，后续我会持续的把自己敲的代码贴出来，大家一起学习。