框架
常见的开发小程序的前端框架有: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 });
注意:文章来源:https://www.toymoban.com/news/detail-412822.html
-
跳转到 tabBar 页面只能使用 switchTab 跳转文章来源地址https://www.toymoban.com/news/detail-412822.html
到了这里,关于uni-app的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!