uni-app学习日记

基础部分

• 简介
• 环境搭建
• 外观设置
• 数据绑定
• 生命周期
• 垮端兼容
• 事件绑定
• 导航跳转
• 组件通信

uni-app介绍

什么是uni-app

        uni-app是个使用vue.js开发前端应用框架，编写一套代码可以发布到ios、安卓以及各种小程序等多个平台（微信、支付宝、百度、头条、QQ、钉钉）等多个平台。

uni-app的背景

1. 用户端比较多，增加了运维商的维护成本
2. 没有好用的跨平台框架
3. 小程序的周边生态不太好

为什么要去使用uni-app

1.  跨平台更多（微信、支付宝、百度、头条、QQ、钉钉）等多个平台
2. 运行体验更好  
3. 通用技术栈，学习成本更低
4. 开放生态，组件更丰富

 环境搭建

安装HBuilder

下载HBuilder

HBuilder提供了丰富的移动端开发工具和插件，包括自动构建、调试、UI设计、代码分析等，非常适合开发移动应用。 VSCode则提供了强大的代码编辑、调试和扩展功能，适用于各种编程语言和项目类型。 使用体验：HBuilder在移动应用开发方面有着深入的优化，其界面简洁直观，支持实时预览和调试，可以更快地开发调试移动应用。

安装微信开发者工具

下载微信开发者工具

初始化项目

通过HBuilderX初始化项目

创建项目

1. 在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）
2. 选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建

运行项目

1. 进入项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器
2. 运行App到手机或模拟器：使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app
3. 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具（如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。微信开发者工具需要开启服务端口 在微信工具的设置->安全中）
4. 在支付宝小程序开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具

提示

• 如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
• 微信小程序工具需要配置允许权限，不然HBuilder无法调用微信小程序开发工具的命令行
• 支付宝/百度/抖音/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开
• 如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目

uni-app基本使用

项目目录和文件作用

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

2. manifest.json  文件对应的配置文件，用于指定应用的名称、图标和权限
3. App.vue   根组件，所有页面都是在App.vue下进行切换的，是页面的入口文件，可以调用对应的生命周期函数
4. main.js 项目的入口文件。初始化实例和需要用到的插件
5. uni.scss 控制整体的风格样式。如按钮颜色，边框风格。还配置了一些变量配置
6. unpackage 打包目录，有每个应用的打包文件
7. pages 存放所有页面
8. static 静态资源文件

兼容规范

        为了实现多端兼容，编译速度、性能等因素，uni-app约束了以下规范

• 页面文件组训Vue单文件组件规范
• 组件标签靠近小程序规范
• 接口能力靠近微信小程序规范，但需将前缀wx替换为uni
• 数据绑定及时间处理同vue.js规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发  

全局配置

globalStyle

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

详情参考官网 GlobalStyle

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F8F8F8	导航栏背景颜色
navigationBarTextStyle	String	black	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
app-plus	Object		设置编译到 App 平台的特定样式，参考app-plus
h5	Object		设置编译到 H5 平台的特定样式，参考H5
mp-weixin	Objecct		设置编译到 weixin 平台的特定样式，参考weixin

创建页面

在peges中创建一个新的目录message,在my下创建个.vue文件

<template>
	<view>
		Hello，我是信息页
	</view>
</template> 

<script>
</script>

<style>
</style>

配置页面

 pages

属性	类型	默认值	描述
path	String		置页面路径 数组中第一项表示应用启动页
style	Object		配置页面窗口表现，配置项参考下方
needLogin	Boolean	false	是否需要登录才可访问

 style

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

页面中配置项会覆盖 globalStyle 中相同的配置项

详情见 style

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F8F8F8	导航栏背景颜色
navigationBarTextStyle	String	black	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationBarShadow	Object		导航栏阴影
backgroundColor	HexColor		窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新

"pages": [ 
	{
	    "path": "pages/home/home",
		"style": {
			"navigationBarBackgroundColor": "#cccccc"
		}
	},
    {
			"path": "pages/list/list"
		},    
]

 

 tabBar

可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页

详细配置

tabBar

属性	类型	必填	描述
color	HexColor	是	tab 上的文字默认颜色
selectedColor	HexColor	是	tab 上的文字选中时的颜色
backgroundColor	HexColor	是	tab 的背景色
borderStyle	String	否	tabbar 上边框的颜色，可选值 black/white
list	Array	是	tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	可选值 bottom、top
fontSize	String	否	文字默认大小
iconWidth	String	否	图标默认宽度（高度等比例缩放）
height	String	否	tabBar 默认高度

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
visible	Boolean	否	该项是否显示，默认显示
iconfont	Object	否	字体图标，优先级高于 iconPath

iconfont参数说明 

属性	类型	说明
text	String	字库 Unicode 码
selectedText	String	选中后字库 Unicode 码
fontSize	String	字体图标字号(px)
color	String	字体图标颜色
selectedColor	String	字体图标选中颜色

提示

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序
• tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
• 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

	"tabBar": {
		"backgroundColor": "#555555",
		"borderStyle": "white",
		"fontSize": "24px",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/home/home"
			},
			{
				"text": "信息",
				"pagePath": "pages/message/message"
			}
		]
	},

 

condition

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

属性	类型	是否必填	描述
current	Numbe	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的  函数里获得

"condition": {
		"current": 0,
		"list": [
			{
				"name": "详情",
				"path": "pages/detail/detail",
				"query": "id=80"
			}
		]
	},

 

基础组件

Text

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
user-select	Boolean	false	文本是否可选
space	String		显示连续空格
decode	Boolean	false	是否解码

space 值说明

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

View

视图容器。

它类似于传统html中的div，用于包裹各种元素内容。

属性说明

属性名	类型	默认值	说明
hover-class	String		指定按下去的样式类。当 hover-class="none" 时，没有点击态效
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态（阻止事件冒泡）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

<view>
     <text selectable space="ensp">我能选 中吗</text>
</view>
<view class="box1" hover-class="hover-box1">
	box1
    <view 
        class="box2" 
        hover-class="hover-box2" 
        :hover-start-time="2000" 
        :hover-stay-time="4000" 
        hover-stop-propagation
     >
		box2
	</view>
 </view>

 

Button

按钮。

属性说明

详细配置

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String		用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
open-type	String		开放能力
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒

<button type="primary" size="default">
	按钮
</button>
<button type="primary" size="mini">
	按钮
</button>
<button plain>按钮</button>
<button loading>按钮</button>

 

image 

图片组件。

详细配置

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效
fade-show	Boolean	true	图片显示动画效果
draggable	Boolean	true	是否能拖动图片

mode 有效值

详细配置

模式	值	说明
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

<image src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" mode="aspectFill"></image>
<image src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" mode="aspectFit"></image>
<image src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080"></image>

 

页面样式

css预处理器支持

uni-app 支持less、sass、scss、stylus等预处理器。

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

• px 即屏幕像素
• rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

全局样式与局部样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

Tips

• App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
• nvue 页面暂不支持全局样式

字体图标

• 支持 base64 格式字体图标。
• 支持网络路径字体图标。
• 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
• 网络路径必须加协议头 https。
• 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
• 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
• 使用本地路径图标字体需注意：
  1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
  2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
  3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径

数据绑定

定义数据和vue相同，在data中定义数据即可

<script>
	export default {
		data() {
			return {
				msg: '我是msg',
				flag: true,
				num: 1
			}
		},
	}
</script>

插值表达式的使用

<template>
	<view>
		<view>{{ msg }}</view>
		<view>{{ flag ? '真' : '假' }}</view>
		<view>{{ num + 1 }}</view>
	</view>
</template>

动态绑定数据

v-bind 简写 ：

<view>
	<image :src="msg" mode="aspectFit"></image>
</view>

v-for遍历数据

<view v-for="(item, index) in arr" :key="item.id">
	我是{{ item.name }}，我今年{{ item.age }}岁啦
</view>

事件绑定

uni中的事件绑定和vue是相同的，通过v-on绑定事件，也可以简写为@

<button type="primary" @click="btnClick(50, $event)">按钮</button>

时间函数定义在methods中

methods: {
	btnClick(num, e) {
		console.log('我是数字:', num, '我是事件对象:', e)
	}
}

生命周期

应用声明周期

详细配置

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次），参数为应用启动参数
onShow	当 uni-app 启动，或从后台进入前台显示，参数为应用启动参数
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

		onLaunch: function() {
			console.log('App Launch', 'app初次运行')
		},
		onShow: function() {
			console.log('App Show', 'app显示了')
		},
		onHide: function() {
			console.log('App Hide', 'app隐藏了')
		}

 

页面生命周期

详细配置

函数名	说明
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

	onLoad(options) {
		console.log('页面初次加载完成', '接收到的参数是', options)
	},
	onShow() {
		console.log('页面展示了')
	},
	onHide(options) {
		console.log('页面隐藏了')
	},
	onReady() {
		console.log('页面加载完成了')
	},
	onUnload() {
		console.log('页面卸载了')
	}

 

下拉刷新

开启下拉刷新

• 在pages.json中找到pages节点，在style中开启enablePullDownRefresh
• 通过调用uni.startPullDownRefresh（）

监听下来刷新可以通过onPullDownRefresh生命周期

关闭下拉刷新可以通过stopPullDownRefresh

<template>
	<view>
		<view>列表页面</view>
		<view v-for="item in dataList">
			{{ item }}
		</view>
		<button @click="btnRefresh">手动刷新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList : ['vue', 'react', 'jest', 'umi', 'uni-app', 'react-native']
			}
		},
		methods: {
			btnRefresh() {
				uni.startPullDownRefresh()
			}
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				this.dataList = ['umi', 'uni-app', 'react-native', 'vue', 'react', 'jest']
				uni.stopPullDownRefresh()	
			}, 5000)
		}
	}
</script>

<style>
</style>

上拉加载

可以通过生命周期onReachBottom监听下拉加载

<template>
	<view>
		<view>列表页面</view>
		<view v-for="item in dataList" style="height: 200px;">
			{{ item }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList : ['vue', 'react', 'jest', 'umi', 'uni-app', 'react-native']
			}
		},
		onReachBottom() {
			this.dataList.push(...['vue', 'react', 'jest', 'umi', 'react-native'])
		}
	}
</script>

<style>
</style>

网络请求

发起网络请求。

OBJECT 参数说明：详细参数

参数名	类型	必填	默认值	说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffe	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms
dataType	String	否	json	如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer

method 

method	App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	快手小程序	京东小程序
GET	√	√	√	√	√	√	√	√
POST	√	√	√	√	√	√	√	√
PUT	√	√	√	x	√	√	x	x
DELETE	√	√	√	x	√	x	x	x
CONNECT	x	√	√	x	x	x	x	x
HEAD	√	√	√	x	√	x	x	x
OPTIONS	√	√	√	x	√	x	x	x
TRACE	x	√	√	x	x	x	x	x

数据缓存

uni.setStorage

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

 

uni.setStorage({  
    key: 'storage_key',  
    data: 'hello',  
    success: function () {  
        console.log('save success');  
    },  
    fail: function (err) {  
        console.log('save fail', err);  
    }  
});
 
uni.setStorage({  
    key: 'storage_key',  
    data: 'hello'  
}).then(() => {  
    console.log('save success');  
}).catch(err => {  
    console.log('save fail', err);  
});

uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

try {  
    uni.setStorageSync('storage_key', 'hello');  
    console.log('save success');  
} catch (e) {  
    console.log('save fail', e);  
}

 

uni.getStorage

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.getStorage({  
    key: 'user_token',  
    success: function(res) {    
        console.log('获取到的token:', res.data);    
    },  
    fail: function(err) {  
        // 处理获取失败的情况  
        console.error('获取token失败:', err);  
    }  
}); 

 

uni.getStorageSync

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

try {  
    let token = uni.getStorageSync('user_token');  
    console.log('获取到的token:', token);   
} catch (err) {  
    // 处理获取失败的情况  
    console.error('获取token失败:', err);  
}  

 

uni.removeStorage 

从本地缓存中异步移除指定 key。

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.removeStorageSync

从本地缓存中同步移除指定 key。

参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key

图片上传和预览

uni.chooseImage

从本地相册选择图片或使用相机拍照。

参数名	类型	必填	说明
count	Number	否	最多可以选择的图片张数，默认9
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有
extension	Array<String>	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uploadImg() {
	uni.chooseImage({
		count: 3,
		success:(res) => {
			console.log(res)
			this.imgList = res.tempFilePaths
		}
	})
},

uni.previewImage

预览图片。

OBJECT 参数说明

参数名	类型	必填	说明
current	String/Number	详见下方说明	详见下方说明
showmenu	Boolean	否	是否显示长按菜单，默认值为 true
urls	Array<String>	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
loop	Boolean	否	是否可循环预览，默认值为 false
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

  <template>
      <image v-for="(item, index) in imgList" :key="index" :src="item" mode="aspectFit" @click="previewImg(item)"></image>
  </template>

previewImg(imgUrl) {
	uni.previewImage({
		current: imgUrl,
		urls: this.imgList	
	})
}

 

 跨端兼容

为什么选择条件编译处理跨端兼容

uni-app 已将常用的组件、API封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

• 大量写 if else，会造成代码执行性能低下和管理混乱。
• 编译到不同的工程后二次修改，会让后续升级变的很麻烦。
• 为每个平台重写，明明主业务逻辑又一样

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

#使用方法

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码（注意if后面有个n）
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

%PLATFORM% 可取值：

值	生效条件
VUE3	uni-app js引擎版用于区分vue2和3
VUE2	uni-app js引擎版用于区分vue2和3
UNI-APP-X	用于区分是否是uni-app x项目
uniVersion	用于区分编译器的版本
APP	App
APP-PLUS	uni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUE	App nvue 页面
APP-ANDROID	App Android 平台
APP-IOS	App iOS 平台
H5	H5（推荐使用 WEB）
WEB	web（同H5）
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	抖音小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

	<!-- #ifdef MP-WEIXIN -->
	<view>我在小程序中显示</view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<view>我在浏览器展示</view>
	<!-- #endif -->

 

页面路由跳转

navigator

页面跳转。

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

属性说明

详细信息

属性名	类型	默认值	说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式

open-type 有效值

值	说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

	<navigator url="/pages/list/list" open-type="navigate">跳转到list</navigator>
	<navigator url="/pages/list/list" open-type="redirect">重定向到list</navigator>
	<navigator url="/pages/home/home" open-type="switchTab">跳转到home页</navigator>

 

 uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

OBJECT参数说明

参数	类型	必填	默认值	说明
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	String	否	pop-in	窗口显示的动画效果
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms
events	Object	否		页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

 uni.navigateTo({  
     url: '/pages/detail/detail?id=123&name=example'  
 });  

 

uni.redirectTo 

关闭当前页面，跳转到应用内的某个页面。 

参数	类型	必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.switchTab 

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

参数	类型	必填	说明
url	String	是	需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.switchTab({  
   url: '/pages/message/message'
}); 

 

uni.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

参数	类型	必填	默认值	说明
delta	Number	否	1	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationType	String	否	pop-out	窗口关闭的动画效果
animationDuration	Number	否	300	窗口关闭动画的持续时间，单位为 ms
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

页面通讯

uni.$emit

触发全局的自定义事件，附加参数都会传给监听器回调函数。

属性	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

uni.$emit('eventName', { key: 'value' });

 

uni.$on

监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

uni.$on('eventName', function(data) {  
  console.log('监听到事件：', data);  
});

 

uni.$off

移除全局自定义事件监听器。

属性	类型	描述
eventName	Array＜String＞	事件名
callback	Function	事件的回调函数

Tips

• 如果uni.$off没有传入参数，则移除App级别的所有事件监听器；
• 如果只提供了事件名（eventName），则移除该事件名对应的所有监听器；
• 如果同时提供了事件与回调，则只移除这个事件回调的监听器；
• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

uni.$off('eventName', handler);

uni.$once(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数