uni-app的入门

JavaJedi李

已于 2024-05-18 16:26:55 修改

阅读量814

点赞数 38

文章标签： uni-app

于 2024-05-18 16:24:41 首次发布

本文链接：https://blog.csdn.net/weixin_67417798/article/details/139026356

版权

一.什么是uni-app

二.介绍项目目录和文件作用

三.全局配置和页面配置

1.通过globalStyle 进行全局配置

一.什么是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 进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。

pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

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">&nbsp;&lt;&gt;&amp;&apos;&ensp;&emsp;</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，需开发者自己转换，否则使用将不生效；字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。