IT廉连看------Uniapp------Uniapp生命周期
[IT廉连看]
目标：
-
了解生命周期分为哪两种
-
了解两种生命周期的区别
-
熟练编写常见的生命周期代码
-
编写所有的生命周期代码
1、Uniapp生命周期
页面生命周期：页面生命周期指的是一个页面从创建到销毁的整个过程中所经历的各个阶段。
应用生命周期：应用生命周期指的是整个应用从启动到关闭的过程中所经历的各个阶段。
2、页面生命周期和应用生命周期的区别
-
页面生命周期关注于单个页面的生命周期管理，针对页面的加载、显示、隐藏等事件进行处理
-
应用生命周期关注于整个应用的生命周期管理，处理应用的初始化、前台展示、后台隐藏等事件
虽然页面生命周期和应用生命周期都是为了方便开发者在不同阶段执行相应的逻辑操作而设计的，但它们的执行时机和作用范围是不同的。
3、页面生命周期
| 函数名 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|
| onInit | 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad | 百度小程序 | 3.1.0+ |
| onLoad | 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。 | ||
| onShow | 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | ||
| onReady | 监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发 | ||
| onHide | 监听页面隐藏 | ||
| onUnload | 监听页面卸载 | ||
| onResize | 监听窗口尺寸变化 | App、微信小程序、快手小程序 | |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新，参考示例 | ||
| onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项 | ||
| onTabItemTap | 点击 tab 时触发，参数为Object，具体见下方注意事项 | 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序 | |
| onShareAppMessage | 用户点击右上角分享 | 微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序 | |
| onPageScroll | 监听页面滚动，参数为Object | nvue不支持 | |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数为Object | App、H5 | |
| onBackPress | 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见 | app、H5、支付宝小程序 | |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 | App、H5 | 1.6.0 |
| onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的"搜索"按钮时触发。 | App、H5 | 1.6.0 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发） | App、H5 | 1.6.0 |
| onShareTimeline | 监听用户点击右上角转发到朋友圈 | 微信小程序 | 2.8.1+ |
| onAddToFavorites | 监听用户点击右上角收藏 | 微信小程序、QQ小程序 | 2.8.1+ |
3.1 页面生命周期中各个函数的用法
3.1.1 onload的用法及示例代码
在Uniapp中，onLoad生命周期函数是页面加载时触发的函数，它只会在页面加载时执行一次。开发者通常可以在这个生命周期函数中进行页面的初始化操作，如获取页面参数、初始化数据等。
示例代码：
html
<template>
<view class="container">
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: '' // 初始化一个空字符串，用于保存加载后的消息
};
},
onLoad(options) {
// 在页面加载时，获取页面参数，并更新页面数据
const { name } = options; // 假设页面参数中有一个名为name的参数
this.message = `Hello, ${name || 'World'}!`; // 如果没有传入name参数，则默认为'World'
}
};
</script>
<style>
.container {
flex: 1;
justify-content: center;
align-items: center;
}
</style>3.1.2 onShow的用法及示例代码
在Uniapp中，onShow生命周期函数是页面显示时触发的函数。它会在页面每次展示时都执行，包括页面首次加载时以及从其他页面返回到当前页面时。
通常情况下，开发者可以在onShow生命周期函数中执行一些需要在页面展示时更新的操作，比如刷新数据、重新加载页面等。
示例代码：
html
<template>
<view class="container">
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Uniapp!' // 初始化消息
};
},
onShow() {
// 页面每次展示时都执行，可以在这里进行数据刷新等操作
// 这里简单地示范每次展示页面时更新消息
this.message = 'Hello again!';
}
};
</script>
<style>
.container {
flex: 1;
justify-content: center;
align-items: center;
}
</style>3.1.3 onReady的用法及示例代码
在uni-app中，onReady生命周期函数是页面渲染完成时触发的函数。通常在onReady生命周期函数中可以进行一些页面渲染后的操作，比如获取 DOM 节点信息、发起数据请求等。
示例代码：
html
<template>
<view>
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello, onReady!'
}
},
onReady() {
// 页面渲染完成后，修改 message 的值
this.message = 'Page is ready!'
}
}
</script>在这个示例中，页面渲染时会显示最初的文本"Hello, onReady!"，然后在onReady生命周期函数中，页面渲染完成后会将文本修改为"Page is ready!"。
这样，通过 onReady 生命周期函数，我们可以在页面渲染完成后执行一些额外的操作，以确保页面已经完全加载后再进行相关处理。
3.1.4 onHide的用法及示例代码
在 uni-app 中，onHide 生命周期函数是页面隐藏时触发的函数，通常在用户离开当前页面时执行一些操作。例如，在这个生命周期函数中可以停止一些定时任务、清理页面数据等。
示例代码：
html
<template>
<view>
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello, onHide!'
}
},
onHide() {
// 当页面隐藏时，修改 message 的值
this.message = 'Page is hidden!'
}
}
</script>在这个示例中，当用户离开当前页面时，页面会显示最初的文本"Hello, onHide!"，然后在 onHide 生命周期函数中，页面隐藏时会将文本修改为"Page is hidden!"。
通过 onHide 生命周期函数，您可以在用户离开页面时执行一些清理操作或停止页面相关的任务，以提高应用的性能和用户体验。
3.1.5 onUnload的用法及示例代码
在uni-app中，onUnload生命周期函数是页面销毁时触发的函数。当页面被关闭或者跳转到其他页面时，onUnload函数会被调用，可以在这个函数中进行一些清理工作，如清除定时器、释放资源等操作。
示例代码：
html
<template>
<view>
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello, onUnload!'
}
},
onUnload() {
// 当页面销毁时，修改message的值
this.message = 'Page is unloaded!'
}
}
</script>在这个示例中，当页面被销毁时，页面会显示最初的文本"Hello, onUnload!"，然后在onUnload生命周期函数中，页面销毁时会将文本修改为"Page is unloaded!"。
通过onUnload生命周期函数，我们可以在页面销毁前执行一些清理操作，确保页面关闭时资源得到释放，避免内存泄漏或其他问题的发生。
3.1.6 onResize的用法及示例代码
onResize 是 Uniapp 页面生命周期中的一个钩子函数，用于监听页面尺寸变化事件。当页面尺寸发生变化时（例如横屏切换、窗口大小改变等），onResize 会被触发。
示例代码：
html
<template>
<view>
<!-- 在模板中可以通过绑定的数据显示页面尺寸信息 -->
<text>{{ windowWidth }} x {{ windowHeight }}</text>
</view>
</template>
<script>
export default {
data() {
return {
windowWidth: 0,
windowHeight: 0,
};
},
onResize(size) {
// 页面尺寸变化时触发的回调函数
this.windowWidth = size.windowWidth;
this.windowHeight = size.windowHeight;
},
mounted() {
// 在页面加载完成后，可以通过 uni.getSystemInfo 获取当前窗口大小
uni.getSystemInfo({
success: (res) => {
this.windowWidth = res.windowWidth;
this.windowHeight = res.windowHeight;
},
});
},
};
</script>
<style>
/* 样式可以根据实际需求进行自定义 */
view {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>在这个示例中，onResize 方法用于监听页面尺寸变化，将新的尺寸信息更新到组件的数据中，然后在模板中通过数据绑定显示当前窗口的宽度和高度。在 mounted 钩子中，使用 uni.getSystemInfo 获取页面加载完成后的窗口大小，并初始化数据。
请注意，在使用 onResize 钩子时，确保页面配置文件（如 pages.json）中已经设置了 "resize": true，以便启用页面的尺寸变化监听功能。
3.1.7 onPullDownRefresh的用法及示例代码
onPullDownRefresh 是 Uniapp 页面生命周期中的一个钩子函数，用于监听用户下拉刷新操作。当用户在页面顶部下拉时，此钩子函数会被触发，你可以在这里执行一些刷新数据的操作。
示例代码：
html
<template>
<view>
<!-- 在模板中可以展示刷新状态 -->
<text v-if="isRefreshing">正在刷新...</text>
<text v-else>下拉刷新</text>
<!-- 列表展示数据 -->
<scroll-view :style="{ height: '100vh' }">
<view v-for="(item, index) in dataList" :key="index">{{ item }}</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
isRefreshing: false,
dataList: [],
};
},
methods: {
// 模拟异步数据加载
loadData() {
setTimeout(() => {
this.dataList = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`);
this.isRefreshing = false; // 数据加载完成后结束刷新状态
}, 1500);
},
onPullDownRefresh() {
// 用户下拉刷新时触发的回调函数
this.isRefreshing = true; // 开始刷新状态
this.loadData(); // 执行刷新操作
},
},
mounted() {
// 初始化页面数据
this.loadData();
},
};
</script>
<style>
/* 样式可以根据实际需求进行自定义 */
view {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
text {
font-size: 16px;
margin-bottom: 10px;
}
</style>在这个示例中，通过监听 onPullDownRefresh 钩子来实现下拉刷新功能。isRefreshing 用于控制刷新状态的显示，当用户下拉刷新时，设置为 true，在数据加载完成后，再设置为 false 结束刷新状态。在 loadData 方法中，模拟了异步加载数据的过程。
请注意，若要在页面启用下拉刷新功能，需要确保页面配置文件（如 pages.json）中设置了 "enablePullDownRefresh": true。
3.1.8 onReachBottom的用法及示例代码
onReachBottom 是 Uniapp 页面生命周期中的一个钩子函数，用于监听页面滚动到底部事件。当页面滚动到底部时，此钩子函数会被触发，你可以在这里执行加载更多数据的操作。
示例代码：
html
<template>
<view>
<!-- 列表展示数据 -->
<scroll-view :style="{ height: '100vh' }" @scrolltolower="loadMore">
<view v-for="(item, index) in dataList" :key="index">{{ item }}</view>
<view v-if="isReachBottom" style="text-align: center; padding: 10px;">正在加载更多...</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
isReachBottom: false, // 是否正在加载更多
dataList: [], // 存放列表数据
currentPage: 1, // 当前页数
pageSize: 10, // 每页数据条数
totalPage: 5, // 总页数，假设为5页
};
},
methods: {
// 模拟异步加载更多数据
loadMore() {
if (this.currentPage < this.totalPage) {
// 如果当前页数小于总页数，表示还有数据可加载
this.isReachBottom = true; // 开始加载更多状态
setTimeout(() => {
// 模拟异步加载数据
const newData = Array.from({ length: this.pageSize }, (_, index) => `Item ${this.dataList.length + index + 1}`);
this.dataList = this.dataList.concat(newData); // 将新数据拼接到原数据列表中
this.currentPage++; // 当前页数加一
this.isReachBottom = false; // 加载更多完成，结束加载状态
}, 1500);
}
},
},
};
</script>
<style scoped>
/* 样式可以根据实际需求进行自定义 */
scroll-view {
height: 100vh;
overflow-y: auto;
}
</style>在这个示例中，通过监听 scrolltolower 事件来实现页面滚动到底部时加载更多数据的功能。isReachBottom 用于控制加载更多状态的显示，当滚动到底部时设置为 true，加载完成后再设置为 false 结束加载状态。
loadMore 方法模拟了异步加载更多数据的过程，当当前页数小于总页数时，表示还有数据可加载。setTimeout 模拟了异步加载的过程，在加载完成后将新数据拼接到原数据列表中，并更新当前页数。
3.1.9 onTabItemTap的用法及示例代码
在 Uniapp 中，onTabItemTap 是页面生命周期中的一个钩子函数，用于监听当用户点击 Tab 时的事件。这个钩子函数主要用于处理底部 Tab 切换时的逻辑。
示例代码：
html
<template>
<view>
<!-- 页面内容 -->
<text>这是一个 Uniapp 页面</text>
</view>
</template>
<script>
export default {
onTabItemTap(item) {
// 当用户点击底部 Tab 时触发的回调函数
console.log('点击了底部 Tab:', item.index, item.pagePath, item.text);
// 可以在这里添加相应的逻辑处理
},
};
</script>
<style scoped>
/* 样式可以根据实际需求进行自定义 */
text {
font-size: 16px;
}
</style>在示例代码中，当用户点击底部 Tab 时，onTabItemTap 方法会被触发。它接收一个参数 item，包含了关于被点击的 Tab 的信息，如 index（Tab 的索引）、pagePath（页面路径）和 text（Tab 的文本内容）等。你可以根据这些信息执行相应的逻辑操作。
通过这个钩子函数，你可以实现在用户点击底部 Tab 时切换页面内容、执行特定操作等功能。
3.1.10 onShareAppMessage的用法及示例代码
在 Uniapp 中，onShareAppMessage 是页面生命周期中的一个钩子函数，用于自定义页面转发分享的内容。
示例代码：
html
<template>
<view>
<!-- 页面内容 -->
<text>这是一个 Uniapp 页面</text>
</view>
</template>
<script>
export default {
onShareAppMessage() {
// 返回自定义分享内容
return {
title: '分享标题',
path: '/pages/index', // 分享的页面路径
imageUrl: '/static/share.jpg', // 分享的封面图片
success() {
// 分享成功的回调函数
console.log('分享成功');
},
fail() {
// 分享失败的回调函数
console.error('分享失败');
}
};
},
};
</script>
<style scoped>
/* 样式可以根据实际需求进行自定义 */
text {
font-size: 16px;
}
</style>在示例代码中，通过定义 onShareAppMessage 方法来自定义页面的转发分享内容。在该方法中，我们返回一个对象，包含了分享的标题 title、分享的页面路径 path、分享的封面图片 imageUrl 等信息。你可以根据实际需求自行设置分享内容。
在 onShareAppMessage 方法中，还可以处理分享成功和分享失败的回调函数。当用户成功分享时，将会执行 success 函数，你可以在这里添加相应的逻辑。当分享失败时，将会执行 fail 函数，你也可以在这里处理相应的逻辑。
通过这个钩子函数，你可以实现自定义页面转发分享的功能，使用户能够分享页面到社交平台或好友。
3.1.11 onPageScroll的用法及示例代码
在 Uniapp 中，onPageScroll 是页面生命周期中的一个钩子函数，用于监听页面滚动事件。当页面滚动时，此钩子函数会被触发，你可以在这里执行一些响应滚动的操作。
示例代码：
html
<template>
<view>
<!-- 页面内容 -->
<text>{{ scrollPosition }}</text>
</view>
</template>
<script>
export default {
data() {
return {
scrollPosition: 0, // 存储页面滚动位置
};
},
onPageScroll(e) {
// 当页面滚动时触发的回调函数
this.scrollPosition = e.scrollTop; // 更新滚动位置数据
// 在这里可以执行一些响应滚动的操作
},
};
</script>
<style scoped>
/* 样式可以根据实际需求进行自定义 */
text {
font-size: 16px;
}
</style>在示例代码中，通过监听 onPageScroll 钩子函数，当页面滚动时，onPageScroll 方法会被触发。它接收一个参数 e，其中包含了页面滚动的信息，如 scrollTop 表示页面滚动的位置。
在这个例子中，我们使用 scrollPosition 数据来存储页面的滚动位置，并在页面中展示出来。你可以根据实际需求，在 onPageScroll 方法中执行一些响应滚动的操作，比如改变页面样式、加载更多数据等。
通过 onPageScroll 钩子函数，你可以方便地获取页面滚动信息，从而实现一些与滚动相关的交互效果。
3.1.12 onNavigationBarButtonTap的用法及示例代码
在 UniApp 中，onNavigationBarButtonTap 是页面生命周期函数之一，用于监听导航栏按钮的点击事件。当用户点击导航栏的按钮时，该函数会被调用。
示例代码：
html
<template>
<view>
<view>这是一个示例页面</view>
</view>
</template>
<script>
export default {
// 页面加载完成时执行
onLoad() {
// 设置导航栏标题
uni.setNavigationBarTitle({
title: '示例页面'
});
},
methods: {
// 导航栏按钮点击事件处理函数
onNavigationBarButtonTap() {
// 处理导航栏按钮点击事件的逻辑
console.log('导航栏按钮被点击了');
}
}
};
</script>在上面的示例中，我们创建了一个包含一个视图的示例页面。在页面加载完成时，我们使用 uni.setNavigationBarTitle 来设置导航栏的标题为 "示例页面"。然后，我们在 methods 中定义了一个 onNavigationBarButtonTap 函数，用于处理导航栏按钮的点击事件。当用户点击导航栏按钮时，控制台会输出 "导航栏按钮被点击了"。
要注意的是，为了使 onNavigationBarButtonTap 正常工作，需要在页面配置（<script> 标签内）中将其声明为页面的生命周期函数之一。
3.1.13 onNavigationBarSearchInputConfirmed的用法及示例代码
在 UniApp 中，并没有名为 onNavigationBarSearchInputConfirmed 的页面周期函数。然而咱们可以使用 onSearch 方法，用于监听导航栏搜索框中确认搜索的事件。
示例代码：
html
<template>
<view>
<!-- 导航栏 -->
<view>
<text>搜索：</text>
<input @confirm="onSearch" placeholder="请输入关键词"></input>
</view>
<!-- 搜索结果 -->
<view>
<text v-if="searched">搜索结果：</text>
<text v-else>请输入关键词进行搜索</text>
<text>{{ searchResult }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
searched: false, // 是否已经进行过搜索
searchResult: '' // 搜索结果
};
},
methods: {
// 确认搜索事件处理函数
onSearch(event) {
// 获取搜索框中输入的值
const keyword = event.detail.value;
// 模拟搜索，实际情况中可能会调用接口进行搜索
this.searchResult = '搜索结果：' + keyword;
this.searched = true; // 标记已经进行过搜索
}
}
};
</script>
<style scoped>
/* 样式可以根据需求自行定义 */
</style>在上面的示例中，我们创建了一个包含搜索框和搜索结果展示区域的页面。当用户在搜索框中输入关键词并点击确认时，onSearch 方法会被调用。在这个方法中，我们获取输入的关键词，并模拟了一个搜索过程，将搜索结果展示在页面上。
3.1.14 onBackPress的用法及示例代码
在 UniApp 中，并没有名为 onBackPress 的页面周期函数。我们可以使用的是 onBackPress 事件，它用于监听返回按钮的点击事件。
示例代码：
html
<template>
<view>
<text>当前页面内容</text>
</view>
</template>
<script>
export default {
onBackPress() {
// 处理返回按钮点击事件
console.log('返回按钮被点击了');
// 返回 true 表示拦截返回按钮，不执行默认的返回操作
// 返回 false 或不返回任何值表示不拦截返回按钮，执行默认的返回操作
return true; // 这里返回 true 拦截了返回按钮
}
};
</script>
<style scoped>
/* 样式可以根据需求自行定义 */
</style>在上面的示例中，我们在页面组件中定义了 onBackPress 方法，用于处理返回按钮的点击事件。当用户点击返回按钮时，此方法会被调用。在方法中，你可以编写逻辑来处理返回按钮点击事件，并可以选择返回 true 来拦截返回按钮，或者返回 false 或不返回任何值来执行默认的返回操作。
3.1.15 onNavigationBarSearchInputChanged的用法及示例代码
在 UniApp 中，并没有名为 onNavigationBarSearchInputChanged 的页面周期函数。但是我们可以使用的是 onNavigationBarSearchInputChanged 事件，它用于监听导航栏搜索框输入内容改变的事件。然而，UniApp 并没有直接提供这样的事件，但可以通过监听输入框的 input 事件来实现相似的功能。
示例代码：
html
<template>
<view>
<view class="uni-bar">
<view class="uni-input">
<input
type="text"
placeholder="请输入搜索内容"
@input="onSearchInputChanged"
/>
</view>
</view>
<view>
<!-- 搜索结果显示区域 -->
</view>
</view>
</template>
<script>
export default {
methods: {
onSearchInputChanged(event) {
// 处理搜索输入内容改变的事件
const inputValue = event.target.value;
console.log('搜索内容改变为:', inputValue);
// 在这里可以进行搜索相关的操作，比如请求后端数据，更新页面显示等
}
}
};
</script>
<style scoped>
/* 样式可以根据需求自行定义 */
.uni-bar {
height: 44px;
background-color: #f5f5f5;
}
.uni-input {
padding: 0 15px;
height: 100%;
line-height: 44px;
background-color: #fff;
border-radius: 22px;
}
input {
border: none;
outline: none;
width: 100%;
height: 100%;
font-size: 14px;
}
</style>在上面的示例中，我们在导航栏中添加了一个搜索框，并监听了输入框的 input 事件。当用户输入内容时，onSearchInputChanged 方法会被调用，你可以在这个方法中处理搜索内容的改变，并进行相应的操作，比如请求后端数据并更新页面显示。
3.1.15 onNavigationBarSearchInputConfirmed的用法及示例代码
在UniApp中，onNavigationBarSearchInputConfirmed 是页面生命周期事件之一，用于监听页面导航栏搜索输入框的确认事件。当用户在导航栏搜索框中输入完成并确认时，触发该事件。你可以在页面的生命周期钩子函数中使用这个事件来执行相应的操作。
示例代码：
html
<template>
<view>
<!-- 页面内容 -->
</view>
</template>
<script>
export default {
onNavigationBarSearchInputConfirmed(e) {
// 当用户在导航栏搜索框中输入完成并确认时触发的操作
console.log('搜索确认事件触发了！');
console.log('用户输入的搜索内容：', e.detail.value);
// 这里可以执行一些搜索相关的逻辑
// 比如发起搜索请求、更新页面数据等操作
},
// 其他页面生命周期钩子函数可以继续定义在这里
onLoad() {
// 页面加载时的操作
},
onShow() {
// 页面显示时的操作
},
// 其他页面生命周期钩子函数可以继续定义在这里
}
</script>
<style>
/* 样式相关的定义可以在这里添加 */
</style>在这个示例中，我们在页面的 onNavigationBarSearchInputConfirmed 钩子函数中监听了搜索确认事件，并通过 e.detail.value 获取用户输入的搜索内容。你可以根据实际需求，在这个事件中执行你的搜索逻辑或其他相关操作。
确保你的 UniApp 项目版本支持 onNavigationBarSearchInputConfirmed 事件，因为 UniApp 的功能可能会在不同版本中有所改变。最好查阅官方文档或相关版本更新说明以获取准确的信息。
3.1.16 onNavigationBarSearchInputClicked的用法及示例代码
在UniApp中，onNavigationBarSearchInputClicked是页面生命周期事件之一，用于监听页面导航栏搜索输入框的点击事件。当用户点击导航栏搜索框时，触发该事件。你可以在页面的生命周期钩子函数中使用这个事件来执行相应的操作。
示例代码：
html
<template>
<view>
<!-- 页面内容 -->
</view>
</template>
<script>
export default {
onNavigationBarSearchInputClicked() {
// 当用户点击导航栏搜索框时触发的操作
console.log('搜索框点击事件触发了！');
// 这里可以执行一些搜索框点击相关的逻辑
// 比如打开搜索页面、展示搜索历史等操作
},
// 其他页面生命周期钩子函数可以继续定义在这里
onLoad() {
// 页面加载时的操作
},
onShow() {
// 页面显示时的操作
},
// 其他页面生命周期钩子函数可以继续定义在这里
}
</script>
<style>
/* 样式相关的定义可以在这里添加 */
</style>在这个示例中，我们在页面的onNavigationBarSearchInputClicked钩子函数中监听了搜索框点击事件。当用户点击导航栏搜索框时，会触发这个事件，并执行相应的操作。你可以根据实际需求，在这个事件中执行你的搜索框点击相关逻辑或其他操作。
确保你的UniApp项目版本支持onNavigationBarSearchInputClicked事件，因为UniApp的功能可能会在不同版本中有所改变。最好查阅官方文档或相关版本更新说明以获取准确的信息。
3.1.17 onShareTimeline的用法及示例代码
在UniApp中，onShareTimeline是用于监听页面分享到朋友圈的生命周期事件。当用户点击分享按钮并选择分享到朋友圈时，该事件会被触发。你可以在页面的生命周期钩子函数中使用onShareTimeline来进行相应的处理。
示例代码：
html
<template>
<view>
<!-- 页面内容 -->
<button @click="shareToTimeline">分享到朋友圈</button>
</view>
</template>
<script>
export default {
methods: {
// 分享到朋友圈的方法
shareToTimeline() {
// 调用分享 API，示例中使用uni.shareTimeline
uni.shareTimeline({
title: '分享标题',
query: 'key=value', // 可以携带自定义参数，用于后续业务逻辑处理
success: () => {
console.log('分享到朋友圈成功');
// 分享成功的处理逻辑
},
fail: (error) => {
console.error('分享到朋友圈失败', error);
// 分享失败的处理逻辑
}
});
}
},
onShareTimeline() {
// 当用户点击分享到朋友圈时触发的操作
console.log('用户点击分享到朋友圈');
// 可以在这里进行一些自定义的分享逻辑
},
// 其他页面生命周期钩子函数可以继续定义在这里
}
</script>
<style>
/* 样式相关的定义可以在这里添加 */
</style>在这个示例中，我们在页面的onShareTimeline生命周期钩子函数中监听了分享到朋友圈的事件。当用户点击分享按钮并选择分享到朋友圈时，会触发这个事件，并执行相应的操作。同时，我们还提供了一个按钮，用于手动触发分享到朋友圈的操作，并在shareToTimeline方法中调用了uni.shareTimeline进行分享。
你可以根据实际需求，在onShareTimeline事件中进行一些自定义的分享逻辑，也可以在分享成功或失败的回调函数中处理相应的逻辑。
3.1.18 onAddToFavorites的用法及示例代码
在UniApp中，onAddToFavorites是页面生命周期事件，用于监听页面被收藏的情况。当用户点击收藏按钮收藏页面时，该事件会被触发。你可以在页面的生命周期钩子函数中使用onAddToFavorites来进行相应的处理。
示例代码：
html
<template>
<view>
<!-- 页面内容 -->
<button @click="addToFavorites">收藏页面</button>
</view>
</template>
<script>
export default {
methods: {
// 收藏页面的方法
addToFavorites() {
// 调用收藏 API，示例中使用uni.addToFavorites
uni.addToFavorites({
title: '页面标题',
query: 'key=value', // 可以携带自定义参数，用于后续业务逻辑处理
success: () => {
console.log('收藏页面成功');
// 收藏成功的处理逻辑
},
fail: (error) => {
console.error('收藏页面失败', error);
// 收藏失败的处理逻辑
}
});
}
},
onAddToFavorites() {
// 当用户点击收藏页面时触发的操作
console.log('用户点击收藏页面');
// 可以在这里进行一些自定义的收藏逻辑
},
// 其他页面生命周期钩子函数可以继续定义在这里
}
</script>
<style>
/* 样式相关的定义可以在这里添加 */
</style>在这个示例中，我们在页面的onAddToFavorites生命周期钩子函数中监听了页面被收藏的事件。当用户点击收藏按钮收藏页面时，会触发这个事件，并执行相应的操作。同时，我们还提供了一个按钮，用于手动触发收藏页面的操作，并在addToFavorites方法中调用了uni.addToFavorites进行收藏。
你可以根据实际需求，在onAddToFavorites事件中进行一些自定义的收藏逻辑，也可以在收藏成功或失败的回调函数中处理相应的逻辑。
[IT廉连看]