从0到1开发JiwuChat插件：基于Tauri2与Nuxt3的扩展开发指南-三亩地-编程学习日记

从0到1开发JiwuChat插件：基于Tauri2与Nuxt3的扩展开发指南

【免费下载链接】JiwuChatJiwuChat 🍂 - A lightweight cross-platform instant messaging app with integrated AI assistants (DeepSeek/Gemini/Kimi). Features real-time messaging, audio/video calls, multi-device sync, and customizable themes. Built with Vue3 & Tauri2 🍒项目地址: https://gitcode.com/gh_mirrors/ji/JiwuChat

JiwuChat是一款轻量级跨平台即时通讯应用，集成了DeepSeek/Gemini/Kimi等AI助手，支持实时消息、音视频通话、多设备同步和自定义主题。本指南将带你从0到1开发JiwuChat插件，基于Tauri2与Nuxt3构建强大的扩展功能。

插件开发准备工作

在开始开发JiwuChat插件之前，需要确保开发环境已正确配置。首先克隆JiwuChat仓库：

git clone https://gitcode.com/gh_mirrors/ji/JiwuChat cd JiwuChat

JiwuChat使用pnpm作为包管理器，安装项目依赖：

pnpm install

技术栈概览

JiwuChat插件开发主要基于以下技术：

Tauri2：用于构建跨平台桌面应用，提供原生API访问能力
Nuxt3：基于Vue3的服务端渲染框架，用于构建插件UI
TypeScript：提供类型安全的开发体验

Tauri插件开发基础

Tauri2提供了强大的插件系统，允许开发者扩展应用功能。JiwuChat的Tauri配置文件位于src-tauri/tauri.conf.json，其中定义了插件相关配置：

"plugins": { "updater": { "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDU3RjREQTA3MkU1MzNEMzkKUldRNVBWTXVCOXIwVjlBVXhBY0J3WEVNZW5ZTWZSYXJNdlM4VmpoaXBrSDFiOU1QYk85RDBkYW0K", "endpoints": ["https://api.jiwu.kiwi2333.top/res/app/latest"] }, "deep-link": { "desktop": [{"schemes": ["jiwuchat"]}], "mobile": [{"scheme": ["jiwuchat"], "appLink": false}] } }

创建Tauri命令

Tauri插件通过Rust实现原生功能，然后暴露给前端调用。在src-tauri/src/desktops/commands.rs中添加新的命令：

#[tauri::command] pub fn plugin_demo() -> String { "Hello from JiwuChat plugin!".to_string() }

然后在主函数中注册命令：

fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![plugin_demo]) .run(tauri::generate_context!()) .expect("error while running tauri application"); }

Nuxt3插件开发实践

Nuxt3提供了灵活的插件系统，用于扩展Vue应用功能。JiwuChat的Nuxt插件位于app/plugins/目录下。

创建Nuxt插件

在app/plugins/目录下创建my-plugin.ts文件：

export default defineNuxtPlugin((nuxtApp) => { // 注册全局组件 nuxtApp.vueApp.component('PluginComponent', defineAsyncComponent(() => import('@/components/plugin/Component.vue'))) // 提供插件API return { provide: { plugin: { greet: () => 'Hello from Nuxt plugin!' } } } })

注册自定义指令

JiwuChat使用自定义指令增强UI交互，如app/plugins/directive.ts所示：

export default defineNuxtPlugin((nuxtApp) => { // 3D Tilt Effect nuxtApp.vueApp.directive("tilt", tiltDirective); // 波纹涟漪效果 nuxtApp.vueApp.directive("ripple", rippleDirective); // 其他指令... });

你可以按照同样的模式添加自定义指令，扩展插件的交互能力。

插件UI组件开发

JiwuChat的扩展菜单可以通过UI组件实现。下面是一个简单的插件菜单组件示例：

<template> <div class="plugin-menu"> <h3>我的插件</h3> <ul> <li @click="doSomething">插件功能1</li> <li @click="doAnotherThing">插件功能2</li> </ul> </div> </template> <script setup> const { $plugin } = useNuxtApp() const doSomething = () => { // 调用插件API console.log($plugin.greet()) // 调用Tauri命令 invoke('plugin_demo').then(result => { console.log(result) }) } const doAnotherThing = () => { // 实现其他功能 } </script>

JiwuChat扩展菜单展示了插件集成的示例

插件集成与测试

集成到主应用

要将插件集成到JiwuChat主应用，需要在app/menu/Extension.vue中添加插件入口：

<template> <div class="extension-menu"> <!-- 现有代码 --> <MyPluginComponent /> </div> </template> <script setup> import MyPluginComponent from '@/components/plugin/Component.vue' </script>

测试插件

运行开发服务器测试插件：

pnpm dev

Tauri应用会自动启动，你可以在JiwuChat界面中测试插件功能。

插件打包与发布

构建插件

构建Tauri应用，包含你的插件：

pnpm build

发布插件

JiwuChat插件可以通过两种方式发布：

作为独立安装包发布，用户手动安装
提交到JiwuChat插件市场，通过应用内更新

高级插件开发技巧

使用Tauri能力

利用Tauri提供的原生能力，如文件系统访问、系统通知等：

import { readTextFile, writeTextFile } from '@tauri-apps/api/fs' // 读取文件 const content = await readTextFile('/path/to/file.txt') // 写入文件 await writeTextFile('/path/to/file.txt', 'Hello from plugin!')

状态管理

使用Pinia进行插件状态管理，在app/composables/store/目录下创建插件状态：

import { defineStore } from 'pinia' export const usePluginStore = defineStore('plugin', { state: () => ({ data: null }), actions: { setData(data) { this.data = data } } })

主题定制

JiwuChat支持主题定制，插件可以通过app/assets/styles/目录下的SCSS文件自定义样式：

// 插件样式 .plugin-container { background: var(--color-background); color: var(--color-text); // 其他样式... }

JiwuChat支持丰富的主题定制，插件可以无缝融入

结语

通过本指南，你已经了解了如何基于Tauri2与Nuxt3开发JiwuChat插件。从创建Tauri命令到开发Nuxt插件，再到UI组件集成，每一步都为你提供了清晰的指导。JiwuChat的插件系统为开发者提供了无限可能，你可以根据自己的需求扩展应用功能，打造个性化的即时通讯体验。

如果你想深入了解更多插件开发细节，可以参考docs/SKILL.md官方文档，那里有更详细的API说明和开发示例。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

日记详情

从0到1开发JiwuChat插件：基于Tauri2与Nuxt3的扩展开发指南