【uni-app学习笔记-⿊马教程】
⼀、什么是uni-app
uni-app 是⼀个使⽤ 开发所有前端应⽤的框架，开发者编写⼀套代码，可发布到iOS、Android、H5、以及各种⼩程序（/⽀付宝/百度/头条/QQ/钉钉）等多个平台。
即使不跨端，uni-app同时也是更好的⼩程序开发框架。
具有vue和⼩程序的开发经验，可快速上⼿uni-app。
相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种⼩程序的应⽤，不需要再去学习开发其他应⽤的框架，相对公司⽽⾔，也⼤⼤减少了开发成本。
⼆、环境搭建
安装编辑器HbuilderX          【⽹站】www.dcloud.io/hbuilderx.html
安装开发者⼯具 【⽹站】developers.weixin.qq/miniprogram/dev/devtools/download.html
HBuilderX是通⽤的前端开发⼯具，但为uni-app做了特别强化；下载App开发版，可开箱即⽤。
三、初始化项⽬
点击HbuilderX菜单栏⽂件>项⽬>新建
选择uni-app，填写项⽬名称，项⽬创建的⽬录
注意：这⾥创建的是个项⽬不是⽬录，⽬录后边⽤到；⼀个项⽬有很多⽬录。
随后可以运⾏，导航栏可以选择运⾏到不同的平台上，注意如果第⼀次运⾏到”⼩程序“需要配置⼩程序的路径；路径到启动项的上级⽂件夹。
3.1、介绍项⽬⽬录及作⽤
pages.json ⽂件⽤来对 uni-app 进⾏全局配置，决定页⾯⽂件的路径、窗⼝样式、原⽣的导航栏、底部的原⽣tabbar 等。
manifest.json ⽂件是应⽤的配置⽂件，⽤于指定应⽤的名称、图标、权限等。
App.vue是我们的根组件，所有页⾯都是在App.vue下进⾏切换的，是页⾯⼊⼝⽂件，可以调⽤应⽤的
⽣命周期函数。100种不同的字体
main.js是我们的项⽬⼊⼝⽂件，主要作⽤是初始化vue实例并使⽤需要的插件。
uni.scss⽂件的⽤途是为了⽅便整体控制应⽤的风格。⽐如按钮颜⾊、边框风格，uni.scss⽂件⾥预置了⼀批scss变量预置。unpackage就是打包⽬录，在这⾥有各个平台的打包⽂件。
pages所有的页⾯存放⽬录。
static静态资源⽬录，例如图⽚等。
components组件存放⽬录。
3.2开发规范
为了实现多端兼容，综合考虑编译速度、运⾏性能等因素，uni-app 约定了如下开发规范：
页⾯⽂件遵循
组件标签靠近⼩程序规范，详见
接⼝能⼒（JS API）靠近⼩程序规范，但需将前缀 wx 替换为 uni，详见
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页⾯的⽣命周期
为兼容多端运⾏，建议使⽤flex布局进⾏开发
3.3全局配置和页⾯配置
全局配置在pages.json ⾥边，3.1中提到的⽂件都可以在uni-app官⽹查到很详细的⽂件配置项⽬和说明。注意官⽹左侧的层次，就是写程序的层次。例如：
3.4创建新的message页⾯
右键pages新建message⽬录，在message⽬录下右键新建vue⽂件，并选择基本模板。
四、全局配置项⽬索引（基于课程）
pages.json配置的项⽬：
页⾯的路径path；每在pages⾥新建的页⾯都要在这⾥进⾏路径的补充。
通过style修改页⾯的标题和导航栏背景⾊。
通过globalStyle来设置默认页⾯的窗⼝表现。
通过tabBar来配置底部导航栏。
通过condition启动模式配置（⽤户点击直达的页⾯，如转发什么的），仅开发者模式。
具体见uni-app官⽹-框架。
五、组件的使⽤索引（基于课程）
uni-app提供了丰富的基础组件给开发者，开发者可以像搭积⽊⼀样，组合各种组件拼接称⾃⼰的应⽤。详细见uni-app官⽹-组件。
5.1 text组件的使⽤：
<tempiate>
<view>
<view>
<text >来了⽼弟</text>
</view>
<view>
<text >来了⽼弟</text>
</view>
</view>                  <!-- 根组件 -->
</tempiate>
如果是⼀个view中放两个text的效果就是两个text同⾏显⽰；放在两个view中就是两⾏独占显⽰；并且两个view需要⼀个根组件。
<view>
<text selectable='true'>来了⽼弟</text>
<!-- ture后边不⽤加分号 -->
<text selectable='true' space='ensp' style=font-size':30px;>来了⽼弟</text>
<!-- 长按⽂本是否可选；中⽂字符空格⼀半⼤⼩；字符⼤⼩30px -->
</view>
5.2 view组件的使⽤
<template>
<view class="outbox" hover-class="outbox-active">
<view class="box" hover-class="box-active" hover-stop-propagation="true" hover-start-time="2000" hover-stay-time="2000">
我是⼀个盒⼦
</view>
</view>    <!-- 绑定叫box的样式；按下去的样式；阻⽌⽗节点出现点击态；按住后多久出现点击态，单位毫秒；⼿指松开后点击态保留时间 -->
</template>
<style>
.box{
width: 100px;
height: 100px;
background: green;
}
.box-active{
width: 100px;
height: 100px;
background: red;
}
.
outbox{
width: 200px;
height: 200px;
background: blue;
}
.outbox-active{
width: 200px;
height: 200px;
background: pink;
}
</style>
注意这⾥的两个view是嵌套的，所以200* 200的区域是包裹住100* 100的区域的。
效果：100*100的绿⾊区域被 200 *200的蓝⾊区域包裹住，然后点击内层两秒后变成红⾊，再过两秒红⾊变回绿⾊，外层不变；点击外层同理。
5.3 button按钮
button 组件默认独占⼀⾏，设置 size 为 mini 时可以在⼀⾏显⽰多个。
<button size='mini' type='primary'>前端</button>
<button size='mini' type='default' disabled='true'>前端</button>
<button size='mini' type='warn' loading='true'>前端</button>
button组件后续还有介绍，很多接⼝。
5.4 image组件
插⼊图像的组件，image·组件默认宽度 300px、⾼度 225px；app-nvue平台，暂时默认为屏幕宽度.
src可以⽀持线上⽹址；注意：线上的⽹址结尾是图⽚的格式，并不是⽹页，复制过来的应该是图⽚的地址！
<view>
<image src="../../static/121.jpg"></image>
</view>
<view>
<image src="scpic.chinaz/files/pic/pic9/202104/hpic3876.jpg"></image>
</view>
六、uni-app中的样式
6.1 rpx⾃适应单位
详见uni-app官⽹-框架简介-页⾯布局与样式-尺⼨单位
rpx 即响应式px，⼀种根据屏幕宽度⾃适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显⽰效果会等⽐放⼤；也可以⽤在⽂字上。
<template>
<view>
<view class="newbox">样式学习</view>
</view>
</template>
<style>
.newbox{
width: 375rpx;
height: 375rpx;
background: #FFC0CB;
color: #4CD964;
font-size: 50rpx;
}
</style>
这⾥的375就是750基准的⼀半，实际显⽰过程中根据屏幕尺⼨显⽰屏幕的⼀半。
6.2 @import
使⽤@import语句可以导⼊外联样式表，@import后跟需要导⼊的外联样式表的相对路径，⽤；表⽰语句结束。
<template>
<view>
<view>nishiwo</view>
<view class="newbox">样式学习</view>
<view>1213241</view>
</view>
</template>
<style>
@import url("./style.css");
.newbox{
width: 375rpx;
height: 750rpx;
background: #FFC0CB;
color: #4CD964;
font-size: 50rpx;
}
</style>
注意以上代码，除了“样式学习”绑定了class样式，其他两⾏⽂字没有绑定，就全都⽤了css⽂件的样式。
6.3 全局样式与局部样式
官⽹-介绍-框架简介-页⾯样式与布局-全局样式与局部样式
定义在App.vue中的样式为全局样式，作⽤于每⼀个页⾯。在 pages ⽬录下 的vue ⽂件中定义的样式为局部样式，只作⽤在对应的页⾯，并会覆盖App.vue 中相同的选择器。
选择器种类可以看uni-app官⽹-框架简介-页⾯布局与样式-选择器。
意思就是在app.vue中写的.class类会被页⾯中.vue⽂件的.class类覆盖掉；这⾥的class类名要⼀样。
app.vue  中代码
<style>
.newbox{
background:blue ;
}
</style>
某⼀页⾯中的vue
<style>
.newbox{
width: 375rpx;
height: 750rpx;
background: #FFC0CB;
color: #4CD964;
font-size: 50rpx;
}
</style>
以上代码类名相同为newbox，这时页⾯的会覆盖整体的；如果把页⾯中的background注释掉，那么整体的蓝⾊background会⽣效，并且页⾯中的newbox类的其他属性⼀样⽣效！如果类名不同那么就⽆法覆盖。
app.vue补充的是其他页⾯的相同类名中的相同设置项！可以理解为App.vue是全部页⾯vue⽂件的整体设置。
并且，在app.vue中添加好的样式什么的，不在具体的页⾯上引⽤的话，也不会显⽰。它的作⽤就是先放在整体的vue中之后就可以在各个页⾯vue进⾏引⽤了。
6.4 字体图标的使⽤
官⽹-介绍-框架简介-页⾯样式与布局-字体图标
字体图标简单的说，就是⼀种特殊的字体，通过这种字体，显⽰给⽤户的就像⼀个个图⽚⼀样，字体图标最⼤的好处，在于它不会变形和加载速度快。字体图标可以像⽂字⼀样，随意通过CSS来控制它的⼤⼩和颜⾊。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。