🍿*★,°*:.☆(￣▽￣)/$:*.°★* 🍿

🍟欢迎来到前端初见的博文，本文主要讲解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感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见