Uniapp笔记(三)uniapp语法2

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

一、本节项目预备知识

1、组件生命周期
1.1、什么是生命周期

生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段,强调的是一个时间段

我们可以把每个uniapp应用运行的过程,也概括为生命周期

  • 小程序的启动,表示生命周期的开发

  • 小程序的关闭,表示生命周期的结束

1.2、生命周期的分类

在uniapp中,生命周期分为两类,分别是

  • 应用生命周期

    特指uniapp应用从启动->运行->销毁的过程。

  • 页面生命周期

    特指uniapp中,每个页面从加载->渲染->销毁的过程

其中,页面的生命周期范围较小,应用程序的生命周期范围较大

1.3、什么是生命周期函数

生命周期函数:是由uniapp框架提供的内置函数,会伴随着生命周期,自动按次序执行。

生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作,例如:页面刚加载的时候,可以在onLoad生命周期函数中初始化页面的数据。

注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

1.4、应用生命周期函数

uniapp的应用生命周期函数需要在App.vue中声明

函数名 说明
onLaunch uni-app 初始化完成时触发(全局只触发一次)
onShow uni-app 启动,或从后台进入前台显示
onHide uni-app 从前台进入后台
onError uni-app 报错时触发
onPageNotFound 页面不存在监听函数
onThemeChange 监听系统主题变化
export default {
    onLaunch: function() {
        console.log('App Launch')
    },
    onShow: function() {
        console.log('App Show')
    },
    onHide: function() {
            console.log('App Hide')
    }
}
1.6、页面声明周期函数
函数名 说明
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新,参考示例
onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap 点击 tab 时触发,参数为Object,具体见下方注意事项
onShareAppMessage 用户点击右上角分享
onPageScroll 监听页面滚动,参数为Object
onNavigationBarButtonTap 监听原生标题栏按钮点击事件,参数为Object
onBackPress 监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)
onShareTimeline 监听用户点击右上角转发到朋友圈
onAddToFavorites 监听用户点击右上角收藏
2、页面导航
2.1、什么是页面导航

页面导航就是页面之间的相互跳转

2.2、实现页面导航的方式
  • 声明式导航:navigator标签来进行跳转

  • 编程式导航:uniapp提供的跳转api来实现跳转

2.3、声明式导航
1)导航到tabBar页面

在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性

  • url表示要跳转的页面地址,必须以/开头

  • open-type表示跳转的方式,必须是switchTab

<navigator url="/pages/home/index" open-type="switchTab">
    跳转主页
</navigator>
2)导航到应用内页面

在使用<navigator>组件跳转到指定的普通页面时,需要指定url属性和open-type属性

  • url表示要跳转的页面地址,必须以/开头

  • open-type表示跳转的方式,必须是navigate

<navigator url="/pages/list/index" open-type="navigate">
    跳转到info页面
</navigator>
3)后退导航

如果要后退到上一页或者多级页面,则需要指定open-type属性和delta属性

  • open-type的值必须是naviateBack,表示要进行后退导航

  • delta的值必须是数字,表示要后退的层次

<navigator delta="1" open-type="navigateBack">
    返回上一层
</navigator

重定向页面:redirect,跳转到指定页面,当前页面就会销毁,无法返回,只能首页按钮

2.4、编程式导航
1) 导航到 tabBar 页面

调用uni.switchTab(Object object)方法,可以跳转到tabBar页面,其中Object参数对象的属性如下

属性 类型 是否必须 说明
url string 类型 需要跳转的tabBar页面的路径,路径后不能带参数
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

案例代码

//页面结构
<button type="primary" bindtap="goCategroy">跳转到分类页面</button>
//通过编程式导航,跳转到分类页面
goCategroy(){
    uni.switchTab({
      url: '/pages/category/category',
    })
  } 
2) 导航到应用内页面

调用uni.navigateTo(Object object)方法,可以跳转到应用内的页面,其中Object参数对象的属性列表如下:

属性 类型 是否必须 说明
url string 类型 需要跳转的应用内页面的路径,路径后不能带参数
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
//页面结构
<button type="primary" bindtap="goProductList">跳转商品列表页面</button>
//通过编程式导航,跳转到商品列表页面
 goProductList(){
    uni.navigateTo({
      url: '/pages/product/productlist',
    })
  }
3) 后退导航

调用uni.navigateBack(Object object)方法,可以返回上一页或者多级页面,其中Object参数对象可选的属性列表如下

属性 类型 是否必须 说明
delta number 返回的页面数,如果delta大于现有页面数,则返回到首页
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调
//页面结构
<button bindtap="gotoBack">后退</button>
//通过编程式导航
  gotoBack(){
    uni.navigateBack();
  }
3、导航传参
3.1、声明式导航传参

navigator组件的url属性用来指定将要跳转的页面的路径。同时,路径的后面还可以携带参数

  • 参数与路径之间使用?分隔

  • 参数键与参数值使用=相连

  • 不同参数用&分隔

代码如下所示

<navigator url="/pages/product/productlist?name=giles&age=38" open-type="navigate">跳转到购物页面</navigator>
3.2、编程式导航传参

调用uni.navigateTo(Object object)方法跳转页面时,也可以携带参数,代码如下

goProductList(){
    uni.navigateTo({
      url: '/pages/product/productlist?name=Giles&age=38',
    })
  }
3.3、接收导航参数

通过声明式导航传参或者编程式导航传参所携带的参数,可以直接在onLoad事件中直接获取到

onLoad: function (options) {
  
}

二、商品列表

1、点击三级分类跳转到商品列表
<view class="cate-lv3-item" 
	  v-for="(subitem,subIndex) in item.children" 
	  :key="subIndex"
	  @click="goGoodsList(subitem.cat_id)">
		<image :src="subitem.cat_icon" class="item3_img"></image>
		<text>{{subitem.cat_name}}</text>
</view>

定义事件处理函数如下

goGoodsList(cid){
	uni.navigateTo({
		url:`/pages/products/productList?cid=${cid}`
	})
}
2、定义请求参数对象

我们要根据接口的要求,事先定义一个请求参数对象

data() {
	return {
		queryObj:{
			//查询的关键字
			query:'',
			//查询的分类id
			cid:'',
			//页面值
			pagenum:1,
			//每页显示多少条记录
			pagesize:10
		}
	}
}

将页面跳转时携带的参数,转存到queryObj对象中

onLoad(options) {
	this.queryObj.cid=options.cid
}
3、获取商品列表数据

在data中定义数据

data(){
    return{
        goodsList: [],
	    total: 0,
    }
}

onLoad 生命周期函数中,调用 getGoodsList 方法获取商品列表数据:

onLoad(options) {
	this.queryObj.cid = options.cid
	this.getProductList()
}

声明 getGoodsList 方法如下:

async getProductList() {
	let result = await this.$request({
		url: '/goods/search',
		data: this.queryObj
	})
	console.log(result.message.goods);
	this.goodsList = result.message.goods
	this.total = result.message.total
}

渲染列表结构

<view class="goods-list">
	<view class="goods-item" v-for="(item,index) in goodsList" :key="index">
		<view class="goods-item-left">
			<image :src="item.goods_small_logo||defaultPic" mode="widthFix" class="goods-pic"></image>
		</view>
		<view class="goods-item-right">
			<!-- 商品标题 -->
			<view class="goods-name">{{item.goods_name}}</view>
			<view class="goods-info-box">
				<!-- 商品价格 -->
				<view class="goods-price">¥{{item.goods_price}}</view>
			</view>
		</view>
	</view>
</view>

为了防止某些商品的图片不存在,需要在 data 中定义一个默认的图片

export default {
	data() {
 		return{
            defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
        }           
     }
}

并在页面渲染时按需使用:

<image src="{{item.goods_small_logo||defaultPic}}" class="goods-pic"></image>

样式

.goods-item {
	display: flex;
	padding-left: 10px 0px;
	border-bottom: 1px solid #f0f0f0;
}
.goods-item-left {
	margin-right: 5px;
}

.goods-pic {
	width: 100px;
	height: 100px;
	display: block;
}
.goods-item-right {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.goods-name {
	font-size: 12px;
}
.goods-price {
	font-size: 16px;
	color: #cb603b;
}
4、上拉加载更多

onReachBottom 事件处理函数,用来监听页面的上拉触底行为

onReachBottom() {
    //让页码值自增1
	this.queryObj.pagenum+=1
    //重新获取列表数据
	this.getProductList()
},

改造 methods 中的 getProductList 函数,当列表数据请求成功之后,进行新旧数据的拼接处理:

async getProductList() {	
	let result = await this.$request({
		url: '/goods/search',
		data: this.queryObj
	})
	this.goodsList =[...this.goodsList,...result.message.goods]
	this.total = result.message.total
}

通过节流阀防止发起额外的请求

在 data 中定义 isloading 节流阀如下

data() {
  return {
    // 是否正在请求数据
    isloading: false
  }
}

修改 getProductList 方法,在请求数据前后,分别打开和关闭节流阀:

async getProductList() {
    //打开节流阀
     this.isloading = true
	let result = await this.$request({
		url: '/goods/search',
		data: this.queryObj
	})
    //关闭节流阀
    this.isloading = false
	this.goodsList =[...this.goodsList,...result.message.goods]
	this.total = result.message.total
}

onReachBottom 触底事件处理函数中,根据节流阀的状态,来决定是否发起请求:

// 触底的事件
onReachBottom() {
  // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  if (this.isloading) return
   //让页码值自增1
   this.queryObj.pagenum+=1
   //重新获取列表数据
   this.getProductList()
}

判断加载是否完毕

onReachBottom() {
	if(this.queryObj.pagenum*this.queryObj.pagesize>=this.total){
		uni.showToast({
			title:'加载完毕'
	    })
	}
	if(this.isloading) return;
	this.queryObj.pagenum+=1
	this.getProductList()
},
5、下拉刷新

首先在在page.json配置文件中,开启下来刷新功能

{
        "path" : "pages/products/productList",
         "style" :                                                                                    
         {
              "navigationBarTitleText": "",
              "enablePullDownRefresh": true
          }
            
  }

下拉刷新文章来源地址https://www.toymoban.com/news/detail-677464.html

onPullDownRefresh() {
	this.queryObj.pagenum=1
	this.getProductList()
	uni.stopPullDownRefresh()
}

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

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

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

相关文章

  • 【UniApp】-uni-app-项目实战页面布局(苹果计算器)

    经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了 那么从本文开始,我们就开始进行一个项目的实战 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手 打开 HBuilderX,点击左上角 文件 - 新建 - 项目 : 项目创建完毕之后,首先来分析

    2024年02月04日
    浏览(63)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(73)
  • #Uniapp:uni-app中vue2生命周期--11个

    uni-app中vue2生命周期 生命周期钩子 描述 H5 App端 小程序 说明 beforeCreate 在实例初始化之后被调用 详情 √ √ √ created 在实例创建完成后被立即调用 详情 √ √ √ beforeMount 在挂载开始之前被调用 详情 √ √ √ mounted 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件

    2024年02月02日
    浏览(48)
  • 【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

    组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 通过mode参数定义键盘的类型,v-model绑定一个值为布尔值的变量,我绑定的是showKeyboard变量,控制键盘的弹出与收起; mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为\\\"数字键盘

    2023年04月16日
    浏览(66)
  • 【uni-app】【Android studio】手把手教你运行uniapp项目到Android App

    选择运行到Android App基座 选择运行项目 1、连接手机,在手机上选择 传输文件。 2、打开 设置 - 关于本机 - 版本信息 -连续点击4-5次 版本号 ,输入手机密码,系统就进入了开发者模式。 3、 设置 其他设置 开发者选项 打开 开发者选项 打开 USB调试 。 4、回到Hbuilder,点击刷新

    2024年02月09日
    浏览(51)
  • miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)

    小程序分类:uni-app qq小程序 支付宝小程序 百度小程序 钉钉小程序 微信小程序 小程序转成uni_app 小程序转为uni_app 小程序转uni_app 小程序转换 工具现在支持npm全局库、HBuilderX插件两种方式使用,任君选择,HBuilderX插件地址:https://ext.dcloud.net.cn/plugin?id=2656 【miniprogram-to-uniapp】

    2024年02月08日
    浏览(55)
  • uni-app的优缺点;uniapp进行条件编译的两种方法;小程序端和H5的代表值

    目录 uni-app的优缺点 优点: 1.跨平台开发: 2.统一的开发语言: 3.高效的性能: 4.丰富的生态圈: 缺点: 1.平台差异性: 2.性能限制: 3.对新特性支持滞后: Uni-app条件编译 process.env.UNI_PLATFORM 变量: 使用 process.env.NODE_ENV 变量: Uni-app中的代表值 Uni-app 是一个跨平台的开发框架

    2024年02月08日
    浏览(122)
  • 基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目,但都是基于vue2开发。随着vite.js破局出圈,越来越多的项目偏向于vue3开发,就想着uniapp搭配vite4.x构建项目效果会如何?经过一番尝试果然真香~ uniapp官网提供了  HBuild

    2024年02月09日
    浏览(79)
  • (小程序)基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    版本信息: 点击编辑器的文件 新建 项目(快捷键Ctrl+N) 2.选择uni-app项目,输入项目名/路径,选择项目模板,勾选vue3版本,点击创建,即可成功创建。 3.点击编辑器的运行 运行到浏览器 选择浏览器 当然也可以运行到手机或模拟器、运行到小程序工具。 到这里一个简单的

    2024年02月16日
    浏览(93)
  • 【uni-app】UniApp实现微信小程序中拨打手机电话和长按加微信客服好友(完整代码示例)

    UniApp实现微信小程序中拨打手机电话和长按加微信客服好友(完整代码示例)

    2024年02月11日
    浏览(63)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包