Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/uni-helper/uni-use

uni-app (vue3) 组合式工具集
https://github.com/uni-helper/uni-use

Last synced: 4 days ago
JSON representation

uni-app (vue3) 组合式工具集

Host: GitHub
URL: https://github.com/uni-helper/uni-use
Owner: uni-helper
License: mit
Created: 2022-11-16T06:30:29.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-04-15T01:52:44.000Z (9 months ago)
Last Synced: 2024-04-17T04:55:10.893Z (9 months ago)
Language: TypeScript
Homepage:
Size: 1.27 MB
Stars: 97
Watchers: 4
Forks: 12
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-uni-app - vue3 - helper/uni-use) - uni-app 组合式工具集。 (Lib 工具库)

README

        # @uni-helper/uni-use

[![License](https://img.shields.io/github/license/uni-helper/uni-use)](https://github.com/uni-helper/uni-use/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/v/@uni-helper/uni-use)](https://www.npmjs.com/package/@uni-helper/uni-use)

`uni-app (vue3)` 组合式工具集。要求 `node>=18`。

- [@uni-helper/uni-use](#uni-helperuni-use)

  - [安装依赖](#安装依赖)

  - [使用](#使用)

  - [其它](#其它)

    - [限制](#限制)

    - [构建](#构建)

    - [和 `unplugin-auto-import` 结合使用](#和-unplugin-auto-import-结合使用)

    - [EventBus](#eventbus)

    - [TypeScript](#typescript)

  - [资源](#资源)

  - [致谢](#致谢)

## 安装依赖

```shell

npm install @uni-helper/uni-use @vueuse/core@9

```

如果你希望使用 `@vueuse/core` v10，请参考 [uni-app#4604](https://github.com/dcloudio/uni-app/issues/4604)。

  yarn v2 或以上

  
请参考 文档 设置 nodeLinker 为 node_modules。


  pnpm

  
请参考 文档 设置 shamefully-hoist 为 true。


目前没有支持 `uni_modules` 的计划，但欢迎 PR 贡献。

## 使用

详情请看 [`uni-use`函数列表](./src/index.md)

## 其它

### 限制

在小程序和移动应用环境下有如下无法避开的限制：

- 缺失某些全局变量（如 `window`、`navigator` 等）

- 必须使用 `uni-app` 提供的 API 实现功能（如拦截器、存储等），API 不支持的也就无法支持，比如拦截同步 API、监听其它地方引起的剪切板变化等

- 无法使用顶层 `await`

在开发网页时，建议直接使用 `vue`，避免过多的环境判断代码，同时也能享受更好的生态，如 `vueuse` 的完整支持。

### 构建

目前 `@uni-helper/uni-use` 会使用 `unbuild` 将 `uni` API 之外的部分转译到 `ES2017`（即 `ES8`）。`uni` API 需要在项目构建时由 `uni-app` 官方提供的插件处理。

对于 `vite + vue3` 项目，请先设置 `build.target` 为 `ES6`。

```typescript

import uni from '@dcloudio/vite-plugin-uni';

import { defineConfig } from 'vite';

// https://vitejs.dev/config/

export default defineConfig({

  build: {

    target: 'es6',

    cssTarget: 'chrome61', // https://cn.vitejs.dev/config/build-options.html#build-csstarget

  },

  optimizeDeps: {

    exclude: ['vue-demi'],

  },

  plugins: [

    // ...,

    uni(),

    // ...,

  ],

});

```

然后在 `src/main.ts` 或 `src/main.js` 处自行添加 polyfill。以下是使用 [core-js](https://github.com/zloirock/core-js) 的示例（需要自行安装 `core-js`），你也可以使用 [es-shims](https://github.com/es-shims)。

```typescript

import 'core-js/actual/array/iterator';

import 'core-js/actual/promise';

import 'core-js/actual/object/assign';

import 'core-js/actual/promise/finally';

// 你可以根据需要自行添加额外的 polyfills

// import 'core-js/actual/object/values'

import { createSSRApp } from 'vue';

import App from './App.vue';

export function createApp() {

  const app = createSSRApp(App);

  return {

    app,

  };

}

```

微信小程序的 JavaScript 支持度见 [wechat-miniprogram/miniprogram-compat](https://github.com/wechat-miniprogram/miniprogram-compat)。微信小程序要支持 `vue3`，需设置基础库最低版本为 2.11.2 或以上，2.11.2 对应 `chrome>=53,ios>=10`。

### 和 `unplugin-auto-import` 结合使用

```typescript

// vite.config.ts

import { fileURLToPath } from 'node:url';

import uni from '@dcloudio/vite-plugin-uni';

import { uniuseAutoImports } from '@uni-helper/uni-use';

import autoImport from 'unplugin-auto-import/vite';

import { defineConfig } from 'vitest/config';

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    autoImport({

      imports: [

        uniuseAutoImports(),

      ],

    }),

    uni({ /* ... */ }),

  ],

});

```

### EventBus

如果你想使用 `EventBus`，请考虑使用 [VueUse - useEventBus](https://vueuse.org/core/useeventbus/#useeventbus)、[mitt](https://github.com/developit/mitt) 或 [nanoevents](https://github.com/ai/nanoevents)。这个库不再重复提供类似功能。

### TypeScript

`@uni-helper/uni-use` 本身使用 [TypeScript](https://www.typescriptlang.org/) 开发，拥有类型提示。

## 资源

- [改动日志](/CHANGELOG.md)

## 致谢

- [vueuse](https://vueuse.org/) [#1073](https://github.com/vueuse/vueuse/pull/1073)

- [taro-hooks](https://taro-hooks-innocces.vercel.app/)

- [tob-use](https://tob-use.netlify.app/)