@uni-helper/uni-use

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

• @uni-helper/uni-use
  • 安装依赖
  • 使用
  • 其它
    • 限制
    • 构建
    • 和 unplugin-auto-import 结合使用
    • EventBus
    • TypeScript
  • 资源
  • 致谢

安装依赖

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

如果你希望使用 @vueuse/core v10，请参考 uni-app#4604。

yarn v2 或以上

请参考 文档 设置 nodeLinker 为 node_modules。

pnpm

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

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

使用

详情请看 uni-use函数列表

其它

限制

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

• 缺失某些全局变量（如 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。

1import { defineConfig } from 'vite';
2import uni from '@dcloudio/vite-plugin-uni';
3
4// https://vitejs.dev/config/
5export default defineConfig({
6  build: {
7    target: 'es6',
8    cssTarget: 'chrome61', // https://cn.vitejs.dev/config/build-options.html#build-csstarget
9  },
10  optimizeDeps: {
11    exclude: ['vue-demi'],
12  },
13  plugins: [
14    ...,
15    uni(),
16    ...,
17  ],
18});

然后在 src/main.ts 或 src/main.js 处自行添加 polyfill。以下是使用 core-js 的示例（需要自行安装 core-js），你也可以使用 es-shims。

1import 'core-js/actual/array/iterator';
2import 'core-js/actual/promise';
3import 'core-js/actual/object/assign';
4import 'core-js/actual/promise/finally';
5// 你可以根据需要自行添加额外的 polyfills
6// import 'core-js/actual/object/values'
7import { createSSRApp } from 'vue';
8import App from './App.vue';
9
10export function createApp() {
11  const app = createSSRApp(App);
12  return {
13    app,
14  };
15}

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

和 unplugin-auto-import 结合使用

1// vite.config.ts
2import { fileURLToPath } from 'node:url';
3import { defineConfig } from 'vitest/config';
4import autoImport from 'unplugin-auto-import/vite';
5import { uniuseAutoImports } from '@uni-helper/uni-use';
6import uni from '@dcloudio/vite-plugin-uni';
7
8// https://vitejs.dev/config/
9export default defineConfig({
10  plugins: [
11    autoImport({
12      imports: [
13        uniuseAutoImports(),
14      ],
15    }),
16    uni({ ... }),
17  ],
18});
19

EventBus

如果你想使用 EventBus，请考虑使用 VueUse - useEventBus、mitt 或 nanoevents。这个库不再重复提供类似功能。

TypeScript

@uni-helper/uni-use 本身使用 TypeScript 开发，拥有类型提示。

资源

• 改动日志

致谢

• vueuse #1073
• taro-hooks
• tob-use