composition-api of uni-app and Vue2
最近做的公司我的项目,后盾用的是 vue3,前台这边用的是 uniapp 开发,想着 uniapp 能应用 composition-api 开发的话能应用很多复用的钩子逻辑,引入在小程序应用中却呈现了问题,网上查找有发现解决方案,问题是解决了,可是生命周期逻辑钩子却没有,所以做了个基于 @vue/composition-api 封装的 uni-composition-api 扩大插件。
这个我的项目的目标是兼容 UniAppVue2 中 composition-api 的应用,修复问题,以及提供 UniApp 生命周期钩子,以及也是不便当前迁徙 vue3 时做的筹备吧。
https://github.com/TuiMao233/…
该我的项目会继续更新以及保护至 uni 全面反对 vue3,composition-api。
多端平台兼容性
app | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ 小程序 | 快利用 |
---|---|---|---|---|---|---|
未测试 | √ | 未测试 | 未测试 | 未测试 | 未测试 | 未测试 |
h5-Safari | Android Browser | 微信浏览器 (Android) | QQ 浏览器 (Android) | Chrome | IE | Edge | Firefox | pc-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
装置 & 应用
uni-composition-api 仅反对 uni-cli 创立的我的项目,如应用 TypeScript,TypeScript 版本须要 >3.5.1 以上。
npm & ESM
npm i uni-composition-api -D
main.js introduce。
import UniCompositionAPI from 'uni-composition-api';
Vue.use(UniCompositionAPI);
index.vue use
<template>
<div class="index">
{{count}}
</div>
</template>
<script lnag="ts">
import {defineComponent, ref, onLoad} from 'uni-composition-api';
// 如应用 TypeScript,你须要应用 defineComponent 使 composition-api 能正确推断 Vue 组件选项中的类型
export default defineComponent({components: {},
setup() {onLoad(() => console.log('---onload---'));
const count = ref(0);
return {count};
},
});
</script>
<style lang="scss"></style>
App.vue 注意事项
typescript 模板在入口文件中,应用 defineComponent 定义将会产生谬误,起因为 uniapp 在挂载实例增加数据时读取门路不正确,所以入口文件应该应用 Vue.extend 定义文件。
// App.vue
import Vue from 'vue';
import {onLaunch} from 'uni-composition-api';
export default Vue.extend({setup() {onLaunch(() => {console.log('App Launch')
})
}
});
生命周期反对
这里须要留神的是 onShareAppMessage,onShareTimeline,onAddToFavorites 队列会向后查找返回值, 并主动 return 该返回值。
import {
// 生命周期钩子 监听页面加载
onLoad,
// 生命周期钩子 监听页面显示
onShow,
// 生命周期钩子 监听页面首次渲染实现
onReady,
// 生命周期钩子 监听页面暗藏
onHide,
// 生命周期钩子 监听页面卸载
onUnload,
// 页面解决钩子 监听用户下拉动作
onPullDownRefresh,
// 页面解决钩子 上拉触底事件的处理函数
onReachBottom,
// 页面解决钩子 用户点击右上角转发 (须要返回值)
onShareAppMessage,
// 页面解决钩子 用户点击右上角转发到朋友圈 (须要返回值)
onShareTimeline,
// 页面解决钩子 用户点击右上角珍藏 (须要返回值)
onAddToFavorites,
// 页面解决钩子 页面滚动触发事件的处理函数
onPageScroll,
// 页面解决钩子 页面尺寸扭转时触发
onResize,
// 页面解决钩子 以后是 tab 页时,点击 tab 时触发
onTabItemTap,
// 页面解决钩子 监听原生标题栏按钮点击事件
onNavigationBarButtonTap,
// 页面解决钩子 监听页面返回
onBackPress,
// 页面解决钩子 监听原生标题栏搜寻输入框输出内容变动事件
onNavigationBarSearchInputChanged,
// 页面解决钩子 监听原生标题栏搜寻输入框搜寻事件,用户点击软键盘上的“搜寻”按钮时触发。onNavigationBarSearchInputConfirmed,
// 生命周期回调 监听页面初始化
onInit,
// 监听 nvue 页面音讯
onUniNViewMessage,
// 谬误监听函数 (App.vue)
onError,
// 生命周期回调 监听利用初始化 (App.vue)
onLaunch,
// 页面不存在监听函数 (App.vue)
onPageNotFound,
// 监听系统主题变动 (App.vue)
onThemeChange,
// 未解决的 Promise 回绝事件监听函数 (App.vue)
onUnhandledRejection,
} from 'uni-composition-api';