一、
简介
1、前言
uni-app
是一个使用 vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
2、主要优点:
2.1、开发效率高:uni-app 是一款跨平台的应用开发框架,可以使用一套代码,同时发布到iOS、Android、H5、小程序等多个平台,大大提高了开发效率。
2.2、功能强大:uni-app 提供了丰富的组件和API,可以满足开发者的大部分需求,可以快速实现复杂的功能。
2.3、 体验优秀:uni-app 可以实现原生应用的体验,可以满足用户的使用需求。
二、uni-app框架目录基本概念
1、一般目录结构如下:
- /.hbuilderx (系统目录)
- /.vite (系统目录)
- /node_modules (系统目录,存储平台插件)
- /pages (系统目录,存储页面文件,比如vue、nvue)
- /uni_modules (系统目录,存储组件插件)
- /unpackage (系统目录,存储打包文件)
- /components (系统目录,非必需存在。可以删除。用于存储自定义组件)
- /hybrid (系统目录,非必需存在。可以删除。App端存放本地html文件的目录)
- /platforms (系统目录,非必需存在。可以删除。存放不同平台的文件)
- /static (系统目录,目录下的文件均会被完整打包进去,且不会编译)
- /common (个人创建目录,存储通用文件,比如JS文件、CSS文件)
- /directive (个人创建目录,存储所有自定义指令文件夹)
- /store (个人创建目录,存储共享数据模块)
- /utils (个人创建目录,存储工具类模块)
三、数据缓存
1、常用的数据缓存API
- 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() 同步清理本地数据缓存。
四、总结
通过学习Uni-app,我深刻体会到了跨平台开发的便利性和潜力。Uni-app的强大功能和丰富资源为开发者提供了广阔的空间,让我们能够更加灵活地应对不同平台的需求。我非常庆幸能够学习和掌握这门课程,它为我的技术栈增添了一抹亮色。未来,我将继续深入研究Uni-app,不断提升自己的技能水平,并将所学应用到实际项目中,为用户提供更好的应用体验。
总而言之,Uni-app的学习之旅是一次富有收获和乐趣的经历。我相信,随着移动应用行业的不断发展,跨平台开发将成为趋势,而Uni-app将成为我不可或缺的工具之一。我骄傲地走在前端开发的路上,期待在这片广阔的领域中不断探索和创造。