目录
前言
随着移动应用开发的快速发展，跨平台开发成为了许多开发者的追求。在我最近的学习中，我有幸接触到了Uni-app这个跨平台应用开发框架，它为我打开了一扇全新的大门。本文将分享我在学习Uni-app的过程中的笔记和项目心得体会。
一、uni-app是什么？
Uni-app是一个基于Vue.js框架的跨平台应用开发框架，它可以同时开发iOS、Android和Web应用。使用Uni-app，我们只需要编写一套代码，即可在不同平台上运行应用，大大提高了开发效率和降低了维护成本。
二、学习笔记
2.1目录基本概念
目录 说明 pages.json 这个文件用于配置应用的页面信息，包括页面路径、窗口样式、导航栏样式等。你可以在这个文件中定义应用的页面结构和样式。 uni.scss 这是Uni-app的全局样式文件，你可以在这个文件中定义全局的样式规则，它会应用于整个应用的各个页面和组件。 components 这个目录用于存放应用的自定义组件，你可以将一些可复用的UI组件或功能组件放在这个目录下，以便在应用的各个页面中进行复用。 static 这个目录用于存放静态资源文件，如图片、音频、视频等。你可以在应用中通过相对路径引用这些静态资源。 App.vue 这是整个应用的根组件，它是所有页面和组件的父级组件。你可以在这个文件中定义应用的全局样式和全局逻辑。 main.js 这是应用的入口文件，它主要用于进行一些全局配置和初始化操作，如引入各种插件、设置全局变量等。 platforms 这个目录用于存放各个平台的特定文件和配置，例如生成小程序时的配置文件、生成App时的配置文件等。
2.2页面生命周期
uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考官网链接：Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
uni-app页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
函数名 说明 平台差异说明 最低版本 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 ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非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+
2.3组件生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期
函数名 说明 平台差异说明 最低版本 beforeCreate 在实例初始化之前被调用。详见 created 在实例创建完成后被立即调用。详见 beforeMount 在挂载开始之前被调用。详见 mounted 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用 $nextTickVue官方文档beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持 updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 仅H5平台支持 beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。详见 destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见
2.4页面跳转的方式
方法 说明 注意事项 uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。 uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面。 注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
2.5数据缓存
方法 说明 uni.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 uni.setStorageSync(KEY,DATA) 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。 uni.getStorage(OBJECT) 从本地缓存中异步获取指定 key 对应的内容。 uni.getStorageSync(KEY) 从本地缓存中同步获取指定 key 对应的内容。 uni.getStorageInfo(OBJECT) 异步获取当前 storage 的相关信息。 uni.getStorageInfoSync() 同步获取当前 storage 的相关信息。 uni.removeStorage(OBJECT) 从本地缓存中异步移除指定 key。 uni.removeStorageSync(KEY) 从本地缓存中同步移除指定 key。 uni.clearStorage() 清理本地数据缓存。 uni.clearStorageSync() 同步清理本地数据缓存。
三、项目展示与介绍
3.1展示与介绍
本项目是基于uni-app实现的新闻资讯app,具体功能如下表格所示：
| 功能列表 | 功能描述 |
| 登录功能 | 通过注册的账号实现登录、密码输入框实现可见和隐藏的切换 |
| 注册功能 | 通过用户名实现注册、用户名和密码合法性校验 |
| 个人中心 | 当前登录用户信息展示、浏览记录展示、收藏新闻列表的展示 |
| 个人资料修改 | 个人信息修改 |
| 首页 | 新闻分类选择、新闻列表模块 |
| 新闻详情页 | 点击首页的列表模块，可进入详情页查看新闻详情信息、加入和取消收藏及点赞和取消点赞 |
| 评论页 | 从新闻详情页面点击评论图标，可进入评论页、评论翻页、发布新评论 |
历史浏览记录是通过用户点击详情页面进行传值，后面调用uni.getStorageSync() 在浏览器储存
saveHistory() {
console.log('Saving history...');
console.log('newsInfo:', this.newsInfo.title);
this.historyList = uni.getStorageSync('historyList') || [];
const item = {
id: this.newsInfo.id,
title: this.newsInfo.title,
cover: this.newsInfo.cover,
looktime: Date.now()
};
const index = this.historyList.findIndex(i => i.id === this.newsInfo.id);
if (index >= 0) {
this.historyList.splice(index, 1);
}
this.historyList.unshift(item);
this.historyList = this.historyList.slice(0, 10);
uni.setStorageSync('historyList', this.historyList);
}之后就是在个人中心页面显示就用uni.getStorageSync()来获取本地缓存的历史浏览记录
async onShow() {
this.getUser();
await this.getuserInfo();
this.historyList = uni.getStorageSync('historyList') || [];
}
总结
通过学习Uni-app，我深刻体会到了跨平台开发的便利性和潜力。Uni-app的强大功能和丰富资源为开发者提供了广阔的空间，让我们能够更加灵活地应对不同平台的需求。我非常庆幸能够学习和掌握这门课程，它为我的技术栈增添了一抹亮色。未来，我将继续深入研究Uni-app，不断提升自己的技能水平，并将所学应用到实际项目中，为用户提供更好的应用体验。
总而言之，Uni-app的学习之旅是一次富有收获和乐趣的经历。我相信，随着移动应用行业的不断发展，跨平台开发将成为趋势，而Uni-app将成为我不可或缺的工具之一。我骄傲地走在前端开发的路上，期待在这片广阔的领域中不断探索和创造。
扫一扫
1869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
