Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hairyf/uni-composition-api

兼容 UniApp Vue2 中 composition-api 的使用，以及提供 UniApp 生命周期钩子。
https://github.com/hairyf/uni-composition-api

Last synced: 2 months ago
JSON representation

兼容 UniApp Vue2 中 composition-api 的使用，以及提供 UniApp 生命周期钩子。

Awesome Lists containing this project

README 

        
# 使用须知



时至今日，uniapp 已全面支持 vue3，你应该使用 [uniapp-vue3](https://uniapp.dcloud.io/tutorial/vue3-basics.html) | [uniapp-vite-cli-vue3](https://ask.dcloud.net.cn/article/37834)

uni-composition-api 已完成应有的使命，在此将其归档，望周知。



# composition-api of uni-app and Vue2



兼容 UniAppVue2 中 composition-api 的使用，以及提供UniApp生命周期钩子。



该项目会持续更新以及维护至 uni 全面支持 vue3，composition-api。



## 多端平台兼容性



|  app   | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 快应用 |

| :----: | :--------: | :----------: | :--------: | :--------: | :------: | :----: |

|    √   |     √      |    未测试    |   未测试   |   未测试   |  未测试  |  未测试  |



| h5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome |  IE 11+  | Edge | Firefox | pc-Safari |

| :-------: | :-------------: | :-----------------: | :---------------: | :----: | :--: | :--: | :-----: | :-------: |

|     √     |        √        |          √          |         √         |   √    |  √   |  √   |    √    |     √     |



## 安装 & 使用



注意：uni-composition-api 仅支持 uni-cli 创建的项目，如使用TypeScript，TypeScript 版本需要 **>3.5.1** 以上。



### npm & ESM



~~~

npm i uni-composition-api @vue/composition-api -D

~~~



### main.js  introduce。



~~~js

import VueCompositionAPI from '@vue/composition-api';

import UniCompositionAPI from 'uni-composition-api';

Vue.use(VueCompositionAPI);

Vue.use(UniCompositionAPI);

~~~



### index.vue use



~~~html



  


    {{ count }}

  



import { onLoad } from 'uni-composition-api';

import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({

  components: {},

  setup() {

    onLoad(() => console.log('---onload---'));

    const count = ref(0);

    return { count };

  },

});



~~~



## App.vue 注意事项

typescript模板在入口文件中，使用 defineComponent 定义将会发生错误，原因为 uniapp 在挂载实例添加数据时读取路径不正确，所以入口文件应该使用 Vue.extend 定义文件。

~~~js

// 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 该返回值。



~~~js

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

~~~