🍿*★,°*:.☆(￣▽￣)/$:*.°★* 🍿 🍟欢迎来到前端初见的博文，本文主要讲解uni-app入门到实战🍟 👨‍🔧 个人主页 : 前端初见 🥞喜欢的朋友可以关注一下，下次更新不迷路🥞

---

---

前言

为什么要学习uni-app?

1.一套代码可以打包到不同的应用平台，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
2.方便入手，就是使用vue语法写小程序，如果有vue和小程序经验的话，甚至直接可以看文档，没有基础可以跟本门课程入门:
3.丰富的生态环境，官方及第三方插件较为丰富，论坛活跃度高。
4.一套代码编到14个平台，这不是梦想。眼见为实，扫描14个二维码，亲自体验最全面的跨平台效果！但是我们用的比较多的也就是app和微信小程序，web

能学到什么?

1.vue语法
2.小程序文档与uni文档的差异化
3.API调用
4.插件市场各种有趣的插件
5.综合性的实例项目
6.打包到不同类型的平台

一、学习前的准备?

HBuilder软件与unii-app官方文档

HBuilder软件

(官网)[https://www.dcloud.io/]

点击上方图中的HBuilderX进入下载即可，下方就是软件界面了

uni-app官方文档

uni-app官方文档

二、正式进入学习正轨

2.1、新建项自及项目目录和预览uni项目

uniapp官方教程

2.1.1、新建项目

第一步：点击文件=>新建=>项目
第二步：创建(项目名称，选择模板，项目路径，vue版本，是否使用云开发)

第三步：项目目录介绍

uniapp官方工程目录详细介绍
一个uni-app工程，默认包含如下目录及文件：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  └─android            Android原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

2.1.2、预览uni项目

第一种：运行=>根据需求点击对应菜单即可

第二种：配置
运行=>运行到游览器=>配置web服务器，其余小程序等等步骤方法是一样的

路径就是我们对应软件安装的路径，新版有的不需要配置是可以直接使用的，如果遇到不可直接运行，可进行一下路径配置

2.2、vue用法在uniapp中使用

模板介绍
基本和vue大同小异，也就api有些变化
template：和vue一致，这里结构部分，相当于我们h5的标签，但是下面我们要写uniapp的标签
script：逻辑部分，也就是is代码，和vue差不多，但是生命周期api有些变化
style：样式部分，也就是css或者scss等等

//template结构
<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逻辑代码
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>
//style 样式
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

运行效果

使用一下
下方代码可以看到，html的标签也是可以直接使用的，scss等等，但是要注意，像一些h5的h1,i等等标签到小程序样式是不会正常显示，例如下方效果图

<template>
	<view class="box">
		<div>
		   <h1>认识uniapp <span class="fh">!</span></h1>
		</div>
	
	</view>
</template>

<script>
	export default {

	}
</script>

<style lang="scss">
	// scss css预处理器
	.box{
		width: 200px;
		height: 100px;
		background-color: aquamarine;
		h1{
			color:red;
			font-size: 20px;
			.fh{
				font-size: 24px;
				font-style: italic;
			}
		}
	}
</style>

可以看到小程序在编译h1标签是没有进行加粗的，那么接下来就带着大家一起学习一下uniapp的组件

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见