关于uniapp:在-uniapp-中使用-compositionapi-组合API开发

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。

多端平台兼容性

装置 & 应用

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.vueimport 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';