文章目录
- 前言
- 为什么要学习uni-app?
- 能学到什么?
- 一、学习前的准备?
- HBuilder软件
- uni-app官方文档
- 二、正式进入学习正轨
- 2.1、新建项自及项目目录和预览uni项目
- 2.1.1、新建项目
- 2.1.2、预览uni项目
- 2.2、vue用法在uniapp中使用
- 总结
前言
为什么要学习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感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨🔧 个人主页 : 前端初见
