目录
一.什么是uni-app
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
二.介绍项目目录和文件作用
- pages.json 文件用来对 uni-app 进行全局配置,决定页面文件 的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
- manifest.json 文件是应用的配置文件,用于指定应用的名称、 图标、权限等。
- App.vue是我们的根组件,所有页面都是在`App.vue`下进行切换 的,是页面入口文件,可以调用应用的生命周期函数。
- main.js是我们的项目入口文件,主要作用是初始化`vue`实例并 使用需要的插件。
- uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮 颜色、边框风格,`uni.scss`文件里预置了一批scss变量预置
- unpackage 就是打包目录,在这里有各个平台的打包文件
- pages 所有的页面存放目录
- static静态资源目录,例如图片等
- components组件存放目录
三.全局配置和页面配置
1.通过globalStyle 进行全局配置
用于设置应用的状态栏、导航条、标题、窗口背景色等。
2. 创建新页面
右键pages新建message目录,在message目录下右键新建.vue 文件,并选择基本模板
通过pages来配置页面
pages 数组中第一项表示应用启动页
通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新 的特有样式
效果
3. 配置tabbar
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏 的表现,以及 tab 切换时显示的对应页。
- 当设置 position 为 top 时,将不会显示 icon- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab, tab 按数组的顺序排序。
其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值 如下:
"tabBar": {
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/tabs/shouye.png",
"selectedIconPath": "static/tabs/shouye.png"
},
{
"text": "信息",
"pagePath": "pages/message/index",
"iconPath": "static/tabs/xinxi.png",
"selectedIconPath": "static/tabs/xinxi.png"
},
{
"text": "我们",
"pagePath": "pages/women/women",
"iconPath": "static/tabs/women.png",
"selectedIconPath": "static/tabs/women.png"
}
]
}
效果
4. condition 启动模式配置
启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小 程序转发后,用户点击所打开的页面
四、组件的基本使用
- uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样, 组合各种组件拼接称自己的应用
- uni-app 中的组件,就像 HTML 中的 div 、p、span 等标签的作用 一样,用于搭建页面的基础结构
1. text文本组件的用法
text` 组件相当于行内标签、在同一行显示
除了文本节点以外的其他节点都无法长按选中
<template>
<view class="container">
<!-- 长按文本是否可选 -->
<text selectable="true">来了老弟</text>
</view>
<view>
<!-- 显示连续空格的方式 -->
<view>
<text space="ensp">来了 老弟</text>
</view>
<view>
<text space="emsp">来了 老弟</text>
</view>
<view>
<text space="nbsp">来了 老弟</text>
</view>
</view>
<view>
<text>skyblue</text>
</view>
是否解码 --><!-- <text decode="true"> <>&'  </text>
</template>
<script>
export default {
data() {
return {
// Your data properties
}
},
methods: {
// Your methods
}
}
</script>
<style scoped>
/* Your styles */
</style>
2. view视图容器组件的用法
3. button按钮组件的用法
button 组件默认独占一行,设置 size 为 mini 时可以在一行显 示多个
效果
4. image组件的使用
组件默认宽度 300px、高度 225px; · src 仅支持相对路径、绝对路径,支持 base64 码; · 页面结构复杂,css样式太多的情况,使用 image 可能导致样式 生效较慢,出现“闪一下”的情况,此时设置 image{will-change: transform} ,可优化此问题。
轮播效果
代码
<template>
<swiper class="swiper-container"
:indicator-dots="true"
:autoplay="true"
:interval="3000"
:duration="1000"
:circular="true"
:current="currentIndex"
>
<swiper-item>
<view class="swiper-item1"></view>
</swiper-item>
<swiper-item>
<view class="swiper-item2"></view>
</swiper-item>
<swiper-item>
<view class="swiper-item3"></view>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
};
},
};
</script>
<style>
.swiper-container {
height: 150px;
}
swiper-item view {
height: 100%;
line-height: 150px;
text-align: center;
background-size: cover;
}
.swiper-item1{
background-image: url("https://th.bing.com/th/id/R.e9e69ed49493bc2459a113dd340eaeee?rik=z86PVVx2uLrF2Q&riu=http%3a%2f%2fpuui.qpic.cn%2fvpic_cover%2fv3317t7fypy%2fv3317t7fypy_hz.jpg%2f1280&ehk=V4vawGBzjZiEro6AeZIrMew48aUBQEAoLlElMKCweb8%3d&risl=&pid=ImgRaw&r=0");
}
.swiper-item2{
background-image: url("https://media.9game.cn/gamebase/2022/1/27/cf5cb924898e10cc66e06639a65e5b15.jpg");
}
.swiper-item3{
background-image: url("https://img5.duote.com/duoteimg/dtnew_techup_img/202204/20220421173401_19628.jpg");
}
</style>
五、uni-app 中的样式
- rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽, rpx 实际显示效果会等比放大。
- 使用@import语句可以导入外联样式表,@import后跟需 要导入的外联样式表的相对路径,用;表示语句结束
- 支持基本常用的选择器class、id、element等
- 在 uni-app 中不能使用 * 选择器。
- page 相当于 body 节点
- 定义在 App.vue 中的样式为全局样式,作用于每一个页面。 在 pages 目录下 的 vue 文件中定义的样式为局部样式, 只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。
- uni-app 支持使用字体图标,使用方式与普通 web 项目相 同,需要注意以下几点:
- 字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式; 字体文件大于等于 40kb, 需开发者自己转换,否则使用 将不生效; 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。