uni-app

常见的开发小程序的前端框架有wepy（腾讯开发），uniapp，mpvue（美团）

Koite

4366人浏览 · 2022-07-18 19:28:39

Koite · 2022-07-18 19:28:39 发布

框架

常见的开发小程序的前端框架有：wepy（腾讯开发），uniapp，mpvue（美团）

uniapp

是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5以及各种小程序（微信、支付宝、百度、头条、QQ、钉钉）等多个平台

环境搭建

安装编辑器（VSCode/Hbuilderx）

安装微信开发者工具（百度搜索微信官方文档--小程序----开发（工具）--下载）

运行（网页运行，微信开发者工具运行，手机运行）

pages.json配置项

全局外观配置

pages.json中的globalStyle中进行全局外观配置

详细配置可以在uniapp官方文档--全局文件中进行查看

页面配置

pages.json中的pages中进行页面配置

"pages":[//数组中的第一项表示应用启动项，
    {"path":"pages/index/index"},
    {"path":"pages/message/message"}
]

如果想给单独页面设置单独的样式，则给需要的页面添加style配置：

详细配置可以在官方文档查看

"pages":[
    {
        "path":"pages/index/index"
    },
    {
        "path":"pages/message/message",
        "style":
    }
]

配置tabbar

如果应用是一个多tab应用，可以通过tabbar配置项指定tab栏的表现，以及tab切换时显示的对应项

注意：

当设置position为top时，将不会显示icon（设置top时，tab显示在上方，将不会显示图标，只显示文字）
tabbar中的list是一个数组，只能配置最少两个、最多五个tab，tab按数组顺序排序

在pages.json中进行配置，与pages、globalStyle同级,具体配置在官方文档查看

"pages":[
    {
        "path":"pages/index/index"
    }
],
"tabBar":{
    
}

condition启动模式配置

仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击锁打开的页面

在pages.json中进行配置，与pages、globalStyle同级,具体配置在官方文档查看

"pages":[
    {
        "path":"pages/index/index"
    }
],
"condition":{
    "current":0,//代表启动时要展示第几个页面
    "list":[
        {
            "name":"详情页",
            "path":"pages/detail/detail",
            "query":"id=123"
        }
    ]
}

组件

uniapp中的组件就像html中的div、p、span等标签作用一样，用于搭建页面的基础结构

具体用法和详细组件可在官网查看

text文本组件

组件属性

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string		否	显示连续空格，可选参数：ensp、emsp、nbsp
decode	boolean	true	否	是否解码

<text selectable="true"></text>

ensp、emsp、nbsp区别：

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

view视图容器组件

类似于html中的div

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

<view hover-class="box1">我是盒子</view>
<style>
    .box1{
        bnckgroundcolor:red;
    }
</style>

注意：

子盒子和父盒子同时设置hover-class时，按子盒子，父盒子的样式也会生效（类似于冒泡），需要设置hover-stop-propagation

button

属性名	类型	默认值	说明	生效时机	平台差异说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标		H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
form-type	String		用于 `<form>` 组件，点击分别会触发 `<form>` 组件的 submit/reset 事件
open-type	String		开放能力
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果		App-nvue 平台暂不支持
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
app-parameter	String		打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效		微信小程序、QQ小程序
hover-stop-propagation	boolean	false	指定是否阻止本节点的祖先节点出现点击态		微信小程序
lang	string	'en'	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。		微信小程序
session-from	string		会话来源，open-type="contact"时有效		微信小程序
send-message-title	string	当前标题	会话内消息卡片标题，open-type="contact"时有效		微信小程序
send-message-path	string	当前分享路径	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效		微信小程序
send-message-img	string	截图	会话内消息卡片图片，open-type="contact"时有效		微信小程序
show-message-card	boolean	false	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效		微信小程序
group-id	String		打开群资料卡时，传递的群号	open-type="openGroupProfile"	QQ小程序
guild-id	String		打开频道页面时，传递的频道号	open-type="openGuildProfile"	QQ小程序
public-id	String		打开公众号资料卡时，传递的号码	open-type="openPublicProfile"	QQ小程序
@getphonenumber	Handler		获取用户手机号回调	open-type="getPhoneNumber"	微信、支付宝、百度、字节、快手、京东小程序
@getuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo	open-type="getUserInfo"	微信、QQ、百度、快手、京东小程序
@error	Handler		当使用开放能力时，发生错误的回调	open-type="launchApp"	微信、QQ、快手、京东小程序
@opensetting	Handler		在打开授权设置页并关闭后回调	open-type="openSetting"	微信、QQ、百度、快手、京东小程序
@launchapp	Handler		从小程序打开 App 成功的回调	open-type="launchApp"	微信、QQ、快手、京东小程序
@chooseavatar	Handler		获取用户头像回调	open-type="chooseAvatar"	微信小程序
@addgroupapp	Handler		添加群应用的回调	open-type="addGroupApp"	QQ小程序
@chooseaddress	Handler		调起用户编辑并选择收货地址的回调	open-type="chooseAddress"	百度小程序
@chooseinvoicetitle	Handler		用户选择发票抬头的回调	open-type="chooseInvoiceTitle"	百度小程序
@subscribe	Handler		订阅消息授权回调	open-type="subscribe"	百度小程序
@login	Handler		登录回调	open-type="login"	百度小程序

image


属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效	微信小程序、百度小程序、字节跳动小程序、飞书小程序
fade-show	Boolean	true	图片显示动画效果	仅App-nvue 2.3.4+ Android有效
webp	boolean	false	在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明	微信小程序2.9.0
show-menu-by-longpress	boolean	false	开启长按图片显示识别小程序码菜单	微信小程序2.7.0
draggable	boolean	true	是否能拖动图片	H5 3.1.1+、App（iOS15+）
@error	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

Tips

<image> 组件默认宽度 320px、高度 240px（不同平台会有所不同）；app-nvue平台，暂时默认为屏幕宽度、高度 240px；

组件的创建使用和组件的声明周期函数

<view>
    <test>这是自定义组件</test>
</view>
<script>
    import text from '组件地址'
    export default{
        components:{
            test
        }
    }
</script>

生命周期与vue相同

组件通讯方式

props、$emit

uni.$emit(eventName,OBJECT)

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

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

代码示例

    uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

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

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

代码示例

	uni.$on('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})

样式

rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为准，750rpx恰好为屏幕宽度。屏幕宽度变宽，rpx实际显示效果会等比放大
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结在<style></style>中引入：
```
<style>
	@import url('地址');
</style>
```
在uniapp中不能使用*选择器
page相当于body节点
uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点:
- 字体文件小于40kb.uni-app会自动将其转化为base64格式;
- 字体文件大于等于40kb，需开发者自己转换，否则使用将不生效;
- 字体文件的引用路径推荐使用以~@开头的绝对路径。
```
@font-face{
    font-family:test1-icon;
    src:url('~@/static/iconfont.ttf');
}
```

生命周期

应用生命周期

定义在app.vue文件中

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

页面生命周期

在每个页面中使用

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（options，用于页面传参）
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件，常用于下拉下一页数据

开启下拉刷新的方法：

1、在pages.json中，找到当前页面的pages节点，并在style选项中开启enablePullDownRefresh

当处理完数据后，`uni.stopPullDownRefresh()`可以停止当前页面的下拉刷新

2、uni.startPullDownRefresh()方法

发送请求

uni.request({
    url:'接口地址'
})

参数说明


参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数	App 3.3.7 以下不支持 ArrayBuffer 类型
header	Object	否		设置请求的 header，header 中不能设置 Referer。	App、H5端会自动带上cookie，且H5端不可手动修改
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataType	String	否	json	如果设为 json，会尝试对返回的数据做一次 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer	支付宝小程序不支持
sslVerify	Boolean	否	true	验证 ssl 证书	仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包
withCredentials	Boolean	否	false	跨域请求时是否携带凭证（cookies）	仅H5支持（HBuilderX 2.6.15+）
firstIpv4	Boolean	否	false	DNS解析时优先使用ipv4	仅 App-Android 支持 (HBuilderX 2.8.0+)
success	Function	否		收到开发者服务器成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

数据缓存

异步接口

`uni.setStorage()`

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

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

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

`uni.getStorage()`

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

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

uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

`uni.removeStorage()`

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

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

uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

同步接口

`uni.setStorageSync(KEY,DATA)`

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

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

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

`uni.getStorageSync(KEY)`

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

参数说明

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

示例

try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}

`uni.removeStorageSync(KEY)`

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

参数说明

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

示例

try {
	uni.removeStorageSync('storage_key');
} catch (e) {
	// error
}

上传、预览图片

上传：`uni.chooseImage()`

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


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

crop 参数说明

参数名	类型	必填	说明
quality	Number	否	取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。
width	Number	是	裁剪的宽度，单位为px，用于计算裁剪宽高比。
height	Number	是	裁剪的高度，单位为px，用于计算裁剪宽高比。
resize	Boolean	否	是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示

预览：`uni.previewImage()`

参数名	类型	必填	说明	平台差异说明
current	String/Number	是	为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
urls	Array<String>	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。	App
loop	Boolean	否	是否可循环预览，默认值为 false	App
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册	App 1.9.5+
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

条件编译

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

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

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

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

%PLATFORM% 可取值如下：

值	生效条件
VUE3	HBuilderX 3.2.0+ 详情(opens new window)
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue
H5	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	快应用华为

例如：

在html中使用

<!-- #ifdef H5 -->
<view>只在h5页面显示</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>只在微信小程序显示</view>
<!-- #endif -->

在js中使用

onload(){
    //#ifdef MP-WEIXIN
	console.log('微信')，
    //#endif
    //#ifdef H5
    console.log('h5')
	//#endif
}

在css中使用

/* #ifdef H5 */
view{
    color:red;
},
/* #endif */
/* #ifdef MP-WEIXIN */
view{
    color:bule;
}
/* #endif */

导航跳转和传递参数

声明式导航

<navigator url:"跳转的地址"></navigator>

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

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 `.vue` 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

值	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

编程式导航

uni.navigateTo(OBJECT)

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

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

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

uni.redirectTo(OBJECT)

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

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

示例

uni.redirectTo({
	url: 'test?id=1'
});

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

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

示例

uni.reLaunch({
	url: 'test?id=1'
});

uni.switchTab(OBJECT)

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

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

OBJECT参数说明

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

示例

pages.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

other.vue

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

uni.navigateBack(OBJECT)

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

OBJECT参数说明

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

示例

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});

注意：

跳转到 tabBar 页面只能使用 switchTab 跳转

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^