uni-app

这篇具有很好参考价值的文章主要介绍了uni-app。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

框架

常见的开发小程序的前端框架有: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 跳转文章来源地址https://www.toymoban.com/news/detail-412822.html

到了这里,关于uni-app的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 模仿dcloudio/uni-preset-vue 自定义基于uni-app的小程序框架

    我们知道通过 可以创建小程序框架。这个是DCloud 基于vue-cli 来实现的uni-app框架。使用过的都知道,有好几个模板进行选择。如果我们有自己的项目框架,如何做成预设模板,一行命令一键生成项目框架呢?例如提供给其他团队项目框架,只需要告诉一下命令就可以了,方便

    2024年02月12日
    浏览(79)
  • 前端Vue uni-app App/小程序/H5 通用tree树形结构图

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(51)
  • VUE(uni-app框架)开发微信小程序③-显示隐藏

    uni-app控制显示隐藏的方式有两种,【v-if】 和   【v-show】 v-if:通过控制虚拟dom树的节点来达到控制式样的显示和隐藏,当参数为false的时候,该节点被删掉,当为true的时候则显示。 v-show:通过css样式中的dispaly:none来控制元素的显示和隐藏 代码如下: 显示效果如下:  通

    2024年02月16日
    浏览(59)
  • 微信小程序原生框架转Uni-App:你需要知道的一切

    博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客👦🏻 《java 面试题大全》 🍩惟余辈才疏学浅,临摹之作或有不妥之处,还请读者海涵指正。☕🍭 《MYSQL从入门到精通》数据库是开发者必会基础之一~ 🪁 吾期望此文有资助于尔,即使粗浅难及深广,亦备添少许微薄

    2024年02月09日
    浏览(61)
  • 基于uni-app框架的习惯养成小程序 毕业设计源码32209

    赠送源码-毕业设计:express习惯养成小程序 https://www.bilibili.com/video/BV1WC4y117x2/?vd_source=72970c26ba7734ebd1a34aa537ef5301 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,

    2024年02月04日
    浏览(43)
  • VUE(uni-app框架)开发微信小程序①-搭建脚手架

    一,脚手架搭建 前提:搭建脚手架的前提是需要装node.js,因为需要用到npm。 下载官网:下载 | Node.js 中文网 (nodejs.cn) 根据自己需要下载一个适合自己的版本,然后点击安装,安装完成后在命令提示窗口输入 node -v如果有版本信息就说明安装成功了  接下来: 1.全局安装: np

    2024年02月11日
    浏览(55)
  • uni-app框架 微信小程序页面显示正常,但安卓页面样式显示异常

    今天在继续复习uni-app项目时,使用模拟器运行时,突然发现封装的search组件样式无法正常显示,但是小程序页面又是正常的,打包后真机也是一样的结果。在uni-app的控制台报如下错误: [Vue warn]: Error in render: “TypeError: Cannot read property ‘children’ of undefined” TypeError: Cannot rea

    2024年04月11日
    浏览(69)
  • uni-app开发 小程序直播功能

    1、微信后台申请插件开通 2、微信后台开通直播功能 3、代码中接入直播插件AppID 4、【直播组件】如何使用 5、直播组将状态获取 微信开发直播功能,需要企业账号; 需要申请直播功能和插件 1、微信后台申请插件开通 微信后台 登录微信后台 点击设置中的第三方设置 — 添

    2024年02月05日
    浏览(59)
  • 常见的web前端开发框架:Vue.js

            常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势,开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时,随着技术的不断发展,新的框架和工具也会不断涌现,为Web前端开发带来更多的选择和可能性。

    2024年02月20日
    浏览(49)
  • uni-app开发小程序以及项目部署流程

    作者也是刚开始接触小程序开发,本次小程序开发使用的uni-app,记录下小程序的开发过程。         作者使用的开发工具:HBuilder x、微信开发者工具。         详细步骤可参考uni-app官网-快速上手,下面简述下作者的使用过程:         1.在HBuilder X 中打开如下路径文件 - 新

    2024年02月09日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包