Skip to content

插件开发

/plugins 目录下的代码会被自动加载,无需手动引入。

插件结构

每个插件文件需要导出一个符合 PluginConfig 类型的配置对象:

js
import { type PluginConfig } from "@/.cool";

export default {
    options: {
        // 插件配置选项
    },
	install(app: VueApp) {
        // 插件安装逻辑
	}
} as PluginConfig;

多语言插件

用于配置应用支持的语言列表,并初始化默认语言。

js
import { initLocale, type PluginConfig } from "@/.cool";

export default {
	options: {
		// 支持的多语言代码列表,AI 将根据此列表生成对应的本地化文件
		languages: ["zh-cn", "zh-tw", "en", "es", "ja", "ko", "fr"]
	},

	install(app) {
		// 初始化多语言设置
		// 参数为默认语言代码,传入 "none" 则优先跟随系统当前语言
		initLocale("zh-cn");
	}
} as PluginConfig;

路由插件

通过全局路由守卫实现页面跳转前的权限控制。

js
import { type PluginConfig } from "@/.cool";
import { isNull, router, useStore } from "@/.cool";

export default {
	install(app) {
		/**
		 * 路由跳转前的全局钩子
		 * 注意:修改 pages.json 后需重新编译项目以确保路由信息生效
		 * @param to 目标页面
		 * @param from 当前页面
		 * @param next 跳转控制函数
		 */
		router.beforeEach((to, from, next) => {
			const { user } = useStore();

			// 判断目标页面是否需要登录权限
			if (to.isAuth == true || (isNull(to.meta) ? true : to.meta.isAuth == true)) {
				// 验证用户登录状态
				if (!user.isNull()) {
					next(); // 已登录,允许跳转
				} else {
					router.login(); // 未登录,跳转到登录页
				}
			} else {
				next(); // 无需登录,直接跳转
			}
		});
	}
} as PluginConfig;

通信插件

通过事件总线实现全局通信,避免直接引入模块导致的编译错误。

js
import { type PluginConfig } from "@/.cool";
import { vibrate } from "@/uni_modules/cool-vibrate";

export default {
	install(app: VueApp) {
		// 监听震动事件,避免在不存在 cool-vibrate 模块时出现编译错误
		uni.$on("cool.vibrate", (duration: number | null) => {
			vibrate(duration ?? 1);
		});
	}
} as PluginConfig;

触摸事件插件

在 H5 环境下模拟移动端触摸事件,方便桌面浏览器调试。

js
import { type PluginConfig } from "@/.cool";

// #ifdef H5
import TouchEmulator from "hammer-touchemulator";
// #endif

export default {
	install(app) {
		// #ifdef H5
		// 启用鼠标模拟触摸事件,便于在桌面浏览器中调试移动端交互
		TouchEmulator();
		// #endif
	}
} as PluginConfig;