uniapp入门学习

uniapp 是一个基于vue.js 跨平台的开发框架，通常一套代码，多端运行，支持微信小程序、百度小程序、支付宝小程序、抖音小程序、以及 Android 和 iOS 移动端等!

开发工具

开发工具，可以使用官方推荐的HbuilderX 或者你也可以使用VScode，相对于HbuilderX，可以方便小程序预览和结果打包编译处理，而相对于VScode在这方面处理比较麻烦!

项目创建

有两种创建方式，具体方式，根据官方文档内提到的内容去创建就行!

一种是HbuilderX开发工具，通过界面方式来创建项目，可以选择合适的模版!

一种是Vue-cli的脚手架方式，通过命令来下载官方的模版进行项目创建!

目录结构

┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为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 详见
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放微信小程序、QQ小程序组件的目录，详见
├─mycomponents          存放支付宝小程序组件的目录，详见
├─swancomponents        存放百度小程序组件的目录，详见
├─ttcomponents          存放抖音小程序、飞书小程序组件的目录，详见
├─kscomponents          存放快手小程序组件的目录，详见
├─jdcomponents          存放京东小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
└─uni.scss              内置的常用样式变量

基础部分

生命周期

uniapp 中的生命周期是基于小程序生命周期基础实现的!

在uniapp中生命周期一共有三大类，应用生命周期、页面生命周期、 组件生命周期!

应用生命周期

应用生命周期，是全局性的函数，在整个项目中都会触发这些函数!

onLaunch 、onShow 、onHide三个钩子函数较为常用!

注意: 且只能在App.vue中使用

注意:

在onLaunch钩子函数中不要使用页面路径跳转，会出现白屏报错问题，原因是与pages.json内置的第一个页面跳转有冲突，可以使用setTimeout延迟方式来跳转!

在app.vue中不能写template模版标签!

App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

页面生命周期

页面生命周期，就是写在pages > 文件夹下内部页面的生命周期，其每个页面都有自己的生命周期!

组件生命周期

pages.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

rpx响应式单位

rpx 是一种响应式单位，根据屏幕不同尺寸大小可自行适应!

.box{
  width: 200rpx;
  height: 200rpx;
  background: #303030;
}

tabBar

tabBar 可以配置底部 tabBar 切换栏，最少2个 最多5个，在pages.json中配置tabBar属性即可!

{
 "tabBar": {
		"color": "#d5ebe1",
		"selectedColor": "#d5ebe1",
		"backgroundColor": "#1d69ac",
		"list": [
			{
				"text": "首頁",
				"pagePath": "pages/index/index"
			},
			{
				"text": "新聞列表",
				"pagePath": "pages/newList/newList"
			}
		]
	}
}

组件

组件，就是页面元素的组成部分，可复用，一次封装，多出使用，便捷减少代码编写开销!

基础内容

text

text文本组件，可以包含文本的组件，类似于html中的 span 行内元素!

基本属性

视图容器

view

view 容器组件，包含块，类似于html中的div组件，使用时会独自占用一行!

<view class="text-area">
	<text class="title" :user-select="true">{{ title }}</text>
</view>

scroll-view

scroll-view滚动视图 ,一般用于超出屏幕外的元素，进行水平 和 垂直方向滚动!

<scroll-view class="scroll-box" scroll-x scroll-y >
			<view class="container">
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
				<view class="item">
					<text user-selected>文本内容</text>
				</view>
			</view>
</scroll-view>

swiper

滑块视图容器，一般用于左右卡片内容滑块儿!

<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
	<swiper-item>
		<view class="swiper-item item1">滑块内容1</view>
	</swiper-item>
	<swiper-item>
		<view class="swiper-item item2">滑块内容2</view>
	</swiper-item>
	<swiper-item>
		<view class="swiper-item item3">滑块内容3</view>
	</swiper-item>
</swiper>

媒体组件

image

图像组件，主要用来加载本地或网络图像资源，png、jpg、gif等!

<view class="img-box">
	<image class="img-item1" src="https://picsum.photos/200/300" mode="aspectFill"></image>
	<img class="img-item2" src="https://picsum.photos/200/300" alt="logo.png" />
</view>

mode 根据特定的格式，来显示图片不同的规则，图片裁剪，保持图片宽高比，以及宽度不变高度自适应等模式相关配置!

video

视频播放组件

<view class="video-box">
	<video class="video" src="/static/video/vite.mp4" controls :direction="90"></video>
</view>

camera

页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。

camera 组件，会在界面中显示实时录制，可通过 api 来将实时画面进行拍照!

<template>
	<view>
        <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
        <button type="primary" @click="takePhoto">拍照</button>
        <view>预览</view>
        <image mode="widthFix" :src="src"></image>
    </view>
</template>
<script>
export default {
    data() {
        return {
            src:""
        }
    },
    methods: {
         takePhoto() {
            const ctx = uni.createCameraContext();
            ctx.takePhoto({
                quality: 'high',
                success: (res) => {
                    this.src = res.tempImagePath
                }
            });
        },
        error(e) {
            console.log(e.detail);
        }
    }
}
</script>

audio

音频组件

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap" style="text-align: center;">
				<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			current: {
				poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
				name: '致爱丽丝',
				author: '暂无',
				src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
			},
			audioAction: {
				method: 'pause'
			}
		}
	}
}
</script>

表单组件

button

按钮组件

<view class="btn-box">
	<view class="uni-padding-wrap uni-common-mt">
		<button type="primary">页面主操作 Normal</button>
		<button type="primary" loading="true">页面主操作 Loading</button>
		<button type="primary" disabled="true">页面主操作 Disabled</button>
		<button type="default">页面次要操作 Normal</button>
		<button type="default" disabled="true">页面次要操作 Disabled</button>
		<button type="warn">警告类操作 Normal</button>
		<button type="warn" disabled="true">警告类操作 Disabled</button>
		<view class="button-sp-area">
			<button type="primary" plain="true">按钮</button>
			<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
			<button type="default" plain="true">按钮</button>
			<button type="default" disabled="true" plain="true">按钮</button>
			<button class="mini-btn" type="primary" size="mini">按钮</button>
			<button class="mini-btn" type="default" size="mini">按钮</button>
			<button class="mini-btn" type="warn" size="mini">按钮</button>
		</view>
	</view>
</view>

路由组件

navigator

页面跳转。该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

<view class="navigator-box">
	<navigator class="nav-item" url="/pages/newList/newList" animation-type="fade-in">
		<button type="primary">跳转到 newList</button>
	</navigator>
	<navigator class="nav-item" url="/pages/container/container" animation-type="pop-in">
		<button type="default">跳转到 容器组件</button>
	</navigator>
	<navigator class="nav-item" url="/pages/media/media" animation-type="slide-in-left">
		<button type="warn">跳转到 媒体组件</button>
	</navigator>
	<navigator class="nav-item" url="/pages/form/form" animation-type="slide-in-right">
		<button type="default">跳转到 表单组件</button>
	</navigator>
</view>

API