更新记录

1.1.0（2025-05-27） 下载此版本

新增直接调用方式, 可不依赖云函数

1.0.0（2025-05-27） 下载此版本

1.0.0（2025-05-27）

平台兼容性

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

小牛翻译插件 - 详细使用指南

支持450多种语言互译的uni-app翻译插件

🎯 选择合适的调用方式

快速决策指南

详细对比分析

🚀 直接调用方式

技术特点：

• 前端直接调用小牛翻译API
• 使用 fetch 或 uni.request 发送HTTP请求
• 在浏览器环境中运行

优势：

• ✅ 零部署 - 无需任何服务器配置
• ✅ 极速响应 - 直连API，无中间层延迟
• ✅ 开发高效 - 即下即用，5分钟集成
• ✅ 成本低廉 - 无服务器费用
• ✅ 调试简单 - 浏览器控制台直接查看

劣势：

• ❌ 密钥暴露 - API密钥在前端代码中可见
• ❌ CORS限制 - 部分环境可能存在跨域问题
• ❌ 无法监控 - 缺少后端统计和日志
• ❌ 限流困难 - 无法在服务端控制调用频率

适用场景：

• 个人学习项目
• 快速原型验证
• 内部工具应用
• 开源demo项目

🔒 云函数调用方式

技术特点：

• 通过uniCloud云函数代理API调用
• API密钥存储在服务端
• 前端通过云函数间接调用

优势：

• ✅ 高安全性 - API密钥不暴露在前端
• ✅ 可监控性 - 完整的调用日志和统计
• ✅ 可扩展性 - 易于添加缓存、限流等功能
• ✅ 企业级 - 符合企业安全规范
• ✅ 统一管理 - 集中管理API配置和权限

劣势：

• ❌ 部署复杂 - 需要配置uniCloud服务
• ❌ 响应延迟 - 多一层转发，略有延迟
• ❌ 成本较高 - 可能产生云函数调用费用
• ❌ 学习成本 - 需要了解uniCloud基础知识

适用场景：

• 企业级应用
• 商业产品
• 对安全性要求高的项目
• 需要统计监控的应用

📖 使用教程

方式一：直接调用教程

Step 1: 获取API密钥

1. 注册小牛翻译账号

   DCloud专属链接：https://niutrans.com/login?active=3&userSource=dcloud
   点击注册，填写基本信息, 通过本插件链接注册的用户可获赠200万字符流量

2. 开通文本翻译服务

   登录 -> 控制台 -> API应用
   找到"文本翻译API"
   点击开通（有免费额度）

3. 获取密钥

   在API应用页面查看：
   - appId: 应用ID
   - apikey: API密钥

Step 2: 安装插件

# 方法1: HBuilderX插件市场
搜索"小牛翻译" -> 下载插件

# 方法2: 手动导入
将 uni_modules 文件夹复制到项目根目录

Step 3: 基础使用

<template>
    <view class="translate-demo">
        <textarea v-model="inputText" placeholder="请输入要翻译的文本"></textarea>
        <button @click="translateText">翻译</button>
        <view v-if="result">结果：{{ result }}</view>
    </view>
</template>

<script>
// 导入直接调用SDK
const NiuTranslateDirect = require('@/uni_modules/dcloudvue-niutrans/js_sdk/dcloudvue-niutrans/direct-call.js');

export default {
    data() {
        return {
            inputText: 'Hello World',
            result: '',
            translator: null,
            // 配置您的API信息
            config: {
                appId: 'your_app_id',      // 替换为您的应用ID
                apikey: 'your_api_key'     // 替换为您的API密钥
            }
        };
    },

    onLoad() {
        this.translator = new NiuTranslateDirect();
    },

    methods: {
        async translateText() {
            try {
                const response = await this.translator.translate({
                    from: 'en',
                    to: 'zh',
                    appId: this.config.appId,
                    apikey: this.config.apikey,
                    srcText: this.inputText
                });

                if (response.success) {
                    this.result = response.data.tgtText;
                } else {
                    uni.showToast({
                        title: response.message,
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('翻译失败:', error);
            }
        }
    }
};
</script>

Step 4: 高级功能

// 智能语言检测
const result = await translator.quickTranslate(
    this.inputText,
    this.config.appId,
    this.config.apikey,
    'auto'  // 自动检测语言
);

// 指定语言对翻译
const zhToEn = await translator.quickTranslate(
    '你好世界',
    this.config.appId,
    this.config.apikey,
    'zh2en'  // 中文转英文
);

// 获取支持的语言列表
const languages = translator.getSupportedLanguages();
console.log('支持的语言:', languages);

// 获取语言支持说明
const info = translator.getLanguageSupport();
console.log(info); // "小牛翻译支持450多种语言互译..."

方式二：云函数调用教程

Step 1: 创建uniCloud项目

1. 关联云空间

   HBuilderX -> 项目右键 -> 创建uniCloud云开发环境
   选择阿里云或腾讯云

2. 配置云函数

   右键 cloudfunctions 文件夹
   上传并部署 -> dcloudvue-niutrans-translate

Step 2: 使用云函数SDK

<script>
// 导入云函数SDK
const NiuTranslate = require('@/uni_modules/dcloudvue-niutrans/js_sdk/dcloudvue-niutrans/index.js');

export default {
    data() {
        return {
            translator: null
        };
    },

    onLoad() {
        this.translator = new NiuTranslate();
    },

    methods: {
        async translateText() {
            const result = await this.translator.translate({
                from: 'zh',
                to: 'en',
                appId: 'your_app_id',
                apikey: 'your_apikey',
                srcText: '你好世界'
            });

            if (result.success) {
                console.log('翻译结果:', result.data.tgtText);
            }
        }
    }
};
</script>

🔧 配置管理最佳实践

安全的密钥管理

// 推荐：使用本地存储管理配置
export default {
    data() {
        return {
            config: {
                appId: '',
                apikey: ''
            }
        };
    },

    onLoad() {
        this.loadConfig();
    },

    methods: {
        // 加载配置
        loadConfig() {
            const savedConfig = uni.getStorageSync('niutrans_config');
            if (savedConfig) {
                this.config = savedConfig;
            }
        },

        // 保存配置
        saveConfig() {
            uni.setStorageSync('niutrans_config', this.config);
        },

        // 配置表单
        async configAPI() {
            const res = await uni.showModal({
                title: 'API配置',
                editable: true,
                placeholderText: '请输入appId,apikey'
            });

            if (res.confirm) {
                // 解析输入的配置信息
                const [appId, apikey] = res.content.split(',');
                this.config = { appId, apikey };
                this.saveConfig();
            }
        }
    }
};

错误处理与重试

// 带重试机制的翻译函数
async function translateWithRetry(translator, params, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            const result = await translator.translate(params);
            if (result.success) {
                return result;
            }

            // 如果是最后一次尝试，抛出错误
            if (i === maxRetries - 1) {
                throw new Error(result.message);
            }
        } catch (error) {
            console.log(`第${i + 1}次翻译失败:`, error.message);

            // 最后一次失败，抛出错误
            if (i === maxRetries - 1) {
                throw error;
            }

            // 等待后重试
            await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
        }
    }
}

🚀 性能优化建议

1. 请求优化

// 避免重复翻译相同内容
const translateCache = new Map();

async function cachedTranslate(translator, params) {
    const cacheKey = `${params.from}-${params.to}-${params.srcText}`;

    if (translateCache.has(cacheKey)) {
        return translateCache.get(cacheKey);
    }

    const result = await translator.translate(params);

    if (result.success) {
        translateCache.set(cacheKey, result);
    }

    return result;
}

2. 防抖处理

// 防抖翻译，避免频繁请求
let translateTimer = null;

function debounceTranslate(fn, delay = 1000) {
    return function(...args) {
        clearTimeout(translateTimer);
        translateTimer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

const debouncedTranslate = debounceTranslate(translateText, 1000);

3. 批量翻译

// 批量翻译多个文本
async function batchTranslate(translator, textList, params) {
    const promises = textList.map(text => 
        translator.translate({
            ...params,
            srcText: text
        })
    );

    return await Promise.all(promises);
}

📱 平台兼容性说明

支持的平台

• ✅ H5 (浏览器)
• ✅ 微信小程序
• ✅ 支付宝小程序
• ✅ 百度小程序
• ✅ 字节跳动小程序
• ✅ QQ小程序
• ✅ App (Vue)
• ❌ App (nvue) - 暂不支持

特殊配置说明

微信小程序

// manifest.json 配置
{
    "mp-weixin": {
        "setting": {
            "urlCheck": false  // 关闭URL合法性检查
        }
    }
}

H5平台

// 可能需要处理CORS问题
// 建议在开发时使用代理，生产环境配置服务器CORS

🎯 实际项目案例

案例1: 聊天翻译助手

// 在聊天应用中集成翻译功能
async function translateChatMessage(message) {
    const result = await translator.quickTranslate(
        message.content,
        appId,
        apikey,
        'auto'
    );

    return {
        original: message.content,
        translated: result.success ? result.data.tgtText : '翻译失败',
        from: result.data?.from || 'unknown',
        to: result.data?.to || 'unknown'
    };
}

案例2: 商品信息国际化

// 将商品信息翻译成多种语言
async function internationalizeProduct(product) {
    const targetLanguages = ['en', 'ja', 'ko', 'es'];
    const translations = {};

    for (const lang of targetLanguages) {
        const result = await translator.translate({
            from: 'zh',
            to: lang,
            appId,
            apikey,
            srcText: product.description
        });

        if (result.success) {
            translations[lang] = result.data.tgtText;
        }
    }

    return {
        ...product,
        translations
    };
}

案例3: 学习工具

// 制作语言学习应用
export default {
    data() {
        return {
            vocabulary: [
                { word: 'hello', translation: '' },
                { word: 'world', translation: '' }
            ]
        };
    },

    methods: {
        async translateVocabulary() {
            for (let item of this.vocabulary) {
                const result = await translator.translate({
                    from: 'en',
                    to: 'zh',
                    appId: this.config.appId,
                    apikey: this.config.apikey,
                    srcText: item.word
                });

                if (result.success) {
                    item.translation = result.data.tgtText;
                }
            }
        }
    }
};

🛠️ 故障排除

常见问题及解决方案

1. API密钥错误

错误：appId或apikey无效
解决：检查API密钥是否正确，确保已开通文本翻译服务

2. 网络请求失败

错误：网络错误或服务不可用
解决：检查网络连接，确认小牛翻译服务状态

3. CORS跨域问题

错误：跨域请求被阻止
解决：H5平台开发时使用代理，小程序平台无此问题

4. 文本长度超限

错误：文本长度不能超过5000字符
解决：分段翻译长文本，或精简待翻译内容

5. 云函数部署失败

错误：云函数上传失败
解决：检查uniCloud配置，确保网络连接正常

📞 技术支持

• 插件官方文档：README.md
• 问题反馈：DCloud插件市场留言
• 小牛翻译官方：https://niutrans.com
• API文档：https://niutrans.com/documents

祝您使用愉快！ 🎉