在uni-app中使用composition-api组合API开发

uni-app的composition-api和Vue2最近公司项目，后台使用的是vue3，前台使用的是uniapp开发，以为可以使用uniapp的开发composition-api可以使用很多可复用的hook逻辑，但是引入到小程序中使用时会出现问题。在网上找到了解决办法。问题解决了，但是没有生命周期逻辑钩子，所以自己做了一个基于@vue/composition-api封装的uni-composition-api扩展插件。本项目的目的是为了兼容UniAppVue2中composition-api的使用，修复问题，提供UniApp生命周期钩子，以及为以后迁移到vue3做准备。https://github.com/TuiMao233/...本项目会持续更新维护，直到uni全面支持vue3和composition-api。多终端平台兼容性app微信小程序支付宝小程序百度小程序QQ小程序快应用Untested√UntestedUntestedUntestedUntestedUntestedh5-SafariAndroid浏览器WeChat浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxpc-Safari√√√√√×√√√安装使用uni-composition-api只支持创建的项目统一客户端。如果使用TypeScript，TypeScript版本需要>3.5.1或以上。npm&ESMnpmiuni-composition-api-Dmain.js引入。从'uni-composition-api'导入UniCompositionAPI;Vue.use(UniCompositionAPI);index.vueuseApp.vue注意事项在typescript模板的入口文件中，使用defineComponent定义会报错，因为添加时uniapp的读取路径不正确数据到已安装的实例。所以入口文件应该使用Vue.extend定义文件。//App.vue从'vue'导入Vue；从'uni-composition-api'导入{onLaunch}；导出默认Vue.extend({setup(){onLaunch(()=>{console.log('AppLaunch')})}});生命周期支持这里需要注意的是，onShareAppMessage、onShareTimeline、onAddToFavorites队列会向后查找返回值，自动返回返回值。import{//生命周期钩子监听页面加载onLoad,//生命周期钩子监听页面显示onShow,//生命周期钩子监听页面首次渲染完成onReady,//生命周期钩子监听页面隐藏onHide,//生命周期钩子监听页面卸载onUnload,//页面处理钩子监听用户下拉动作onPullDownRefresh,//页面处理钩子的上拉底部事件onReachBottom的处理函数,//页面处理钩子,用户点击右上角前进(返回)valueisrequired)onShareAppMessage,//页面处理钩子：用户点击右上角转发朋友圈（需要返回值）onShareTimeline,//页面处理钩子用户点击右上角收藏（需要返回值）onAddToFavorites,//页面处理钩子页面滚动触发事件处理函数onPageScroll,//页面处理钩子在页面大小变化时触发onResize,//当页面滚动时singhook当前为标签页，点击标签时触发onTabItemTap//页面处理钩子监听原生标题栏按钮点击事件onNavigationBarButtonTap//页面处理钩子监听页面返回onBackPress,//页面处理钩子监听原生标题栏搜索输入框输入内容改变事件onNavigationBarSearchInputChanged,//页面处理钩子监听原生标题栏搜索输入框搜索事件，当用户点击“搜索”按钮时触发软键盘。onNavigationBarSearchInputConfirmed,//生命周期回调监听页面初始化onInit,//监听nvue页面消息onUniNViewMessage,//错误监听函数（App.vue）onError,//生命周期回调监听应用初始化（App.vue）onLaunch,//页面无监听函数(App.vue)onPageNotFound,//监听系统主题变化(App.vue)onThemeChange,//UnhandledPromise拒绝事件监听函数(App.vue)onUnhandledRejection,}from'uni-composition-api';