关于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.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';