【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端uniapp

原创

卓伊凡

修改于 2025-03-05 18:21:24

2200

代码可运行

文章被收录于专栏：其他相关技术其他相关技术

运行总次数：0

代码可运行

【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡

项目背景

今天有客户买我们的蜻蜓Q系统之-短视频影视系统-优雅草蜻蜓film产品，但是我们蜻蜓Q系统没有做语言包切换功能，但是客户又必须需要，因此本次项目决定对语言包整体功能进行升级，首先语言包切换功能并非直接翻译即可做到，客户是新疆地区，需要维吾尔语，其实可以做一个翻译版本，前端翻译一下我们对外收费1k差不多，市场价3-5k，但是客户坚持要可切换语言包，告诉大家这个功能很费劲，市场价20k元左右，卓伊凡收费10k元（其实都收费太低了，不过呢，主要是由于这是一个大功能，一旦完成了对我们这个产品的迭代也是有好处的），所以接受项目，项目开始，卓伊凡说过，对学习方向相关或者产品迭代相关的内容，或者合营项目可以做，非纯外包就行。

我们的蜻蜓f系统，准备在登录页，和我的页面里面加入语言切换功能。

项目实战开始

查阅相关源码-根据项目需要查看后端以及前端分别

laravel的相关源码，第一个Laravel Localization to Vue/JSON

Laravel Localization to Vue/JSON

概述

这是一个能将 Laravel 本地化文件转化为 Vue 或其他 JavaScript 库可使用的 JSON 对象的工具，它在前后端分离的项目中非常实用，可让前后端共享语言资源，方便实现多语言功能。

主要功能及特点

语言资源共享：解决了前后端分离项目中语言资源同步的问题。在传统的前后端分离开发中，前端和后端通常需要各自维护一套语言包，这不仅增加了开发成本，还容易出现语言不一致的情况。该工具可以将 Laravel 后端的本地化文件转换为前端可用的 JSON 格式，使得前后端可以使用同一套语言资源，减少了重复工作。
方便前端使用：将 Laravel 的语言文件转换为 JSON 后，前端可以很方便地加载和使用这些语言数据。例如，在 Vue 项目中，可以轻松地根据用户的语言设置动态加载不同的语言包，实现界面的多语言切换。
简化开发流程：通过自动化的转换过程，减少了手动处理语言文件的工作量，提高了开发效率。开发人员只需关注业务逻辑，而无需花费大量时间在语言资源的同步和处理上。

使用场景

适用于基于 Laravel 后端和 Vue 前端的前后端分离项目，尤其是需要实现多语言功能的应用，如国际化的网站、Web 应用程序等。

laravel的相关源码，第二个 [conttas/laravel - language]

2. conttas/laravel - language

概述

这是一个 Laravel 语言切换器包，为 Laravel 项目提供了方便的语言环境切换功能，能根据用户的浏览器配置自动更改应用程序的语言环境，同时支持手动切换语言。

主要功能及特点

自动语言检测：可以根据用户浏览器的语言设置自动检测并设置应用程序的语言环境。当用户访问应用时，系统会自动识别浏览器的语言偏好，并将应用切换到相应的语言，为用户提供更友好的使用体验。
手动语言切换：除了自动检测，还允许用户手动切换语言。在应用界面中，通常会提供一个语言切换按钮或下拉菜单，用户可以根据自己的需求选择不同的语言。
语言缓存：为了提高性能，该包会对语言设置进行缓存，避免每次请求都进行语言检测和设置，减少了服务器的负载。
易于集成：可以很方便地集成到现有的 Laravel 项目中，只需要进行简单的配置和安装即可使用。

使用场景

适用于各种 Laravel 项目，尤其是面向国际用户的网站、电子商务平台、内容管理系统等，需要为不同语言背景的用户提供个性化的语言服务。

关于前端uniapp，这里必须说下uniapp虽然是基于vue.js的，但是在实现这类复杂功能的时候我们一定要先去看有没有插件，因为你绝对不能直接按照vue.js来开发，还是会有区别的，加上打包的话uni的项目就是uni和vue不一样。

卓伊凡发现了这个插件，但是发现更新最后日期2023年，看起来相当有难度呀，而开源地址，已经被关掉，作者不知道为啥不开源了，看来此功能很具有挑战。

插件地址：https://github.com/zhongzf/i18n-uniapp 简介：该插件为 UniApp 项目提供了完整的国际化解决方案。它允许开发者将不同语言的文案集中管理，并且可以在运行时动态切换语言。插件支持对路由、组件等进行多语言处理，确保整个应用的各个部分都能实现语言切换。此外，它还提供了一些工具函数，方便开发者在代码中进行语言切换和文本翻译操作。

项目原理

APP 进行语言自由切换且后台可修改语言包功能和普通 APP 翻译版本功能存在较大区别，主要体现在以下几个方面：

功能实现方式

语言自由切换 + 后台修改语言包：通常需要在 APP 开发时构建一套较为复杂的多语言管理系统。APP 客户端与服务器端进行交互，服务器端存储着各种语言包资源，客户端可以根据用户的操作从服务器获取相应的语言包并进行切换显示。后台人员能够直接在服务器端对语言包内容进行修改、添加或删除等操作，无需重新发布 APP 版本，即可使修改后的语言内容在客户端生效。
普通 APP 翻译版本：一般是在 APP 开发过程中，针对不同语言环境制作不同的语言版本。开发时会将翻译后的文本等资源内置到 APP 安装包中，用户下载对应的语言版本 APP 来使用。若要更新翻译内容，通常需要开发者重新制作并发布新的 APP 版本。

用户体验

语言自由切换 + 后台修改语言包：用户可以在 APP 运行过程中随时自由切换语言，即时生效，无需重新启动 APP 或下载新的安装包。后台对语言包的修改能够及时推送给用户，用户再次使用相关功能时就能看到更新后的内容，体验更流畅、便捷。
普通 APP 翻译版本：用户如果想使用不同语言，需要先卸载当前版本，再下载安装所需语言的版本，操作相对繁琐。且在 APP 版本未更新时，若翻译内容存在错误或需要优化，用户只能使用有误或不太准确的翻译，直到新版本发布。

开发和维护成本

语言自由切换 + 后台修改语言包：开发时需要投入更多的时间和精力来设计和实现多语言管理系统、服务器端存储和交互功能等，开发成本较高。但在维护方面，后台修改语言包无需更新 APP 版本，对于修复翻译错误、添加新的语言内容等维护工作相对高效，成本较低。
普通 APP 翻译版本：开发相对简单，只需要按照不同语言分别制作相应的资源文件并嵌入 APP 即可。但维护成本较高，每次翻译内容更新都需要重新编译、测试和发布 APP 版本，涉及多个应用商店的审核流程等，耗费时间和人力成本。

应用场景

语言自由切换 + 后台修改语言包：适用于国际化程度高、用户群体广泛且对语言更新及时性要求较高的 APP，如国际社交平台、跨国办公软件等，用户来自不同国家和地区，需要频繁切换语言，且后台可以根据实际情况及时修改和优化语言内容。
普通 APP 翻译版本：适用于一些功能相对简单、目标用户群体相对固定、对语言更新频率要求不高的 APP，如某些本地生活服务类 APP、特定语言学习的初级阶段 APP 等，主要满足特定用户在特定语言环境下的基本使用需求。

从上面的文字是否能理解意思？因为如果做语言切换，固定的文字就全部要做成变量，且在后台可以添加更多语言，那么做一种语言和做100种语言收费是一样的，并且功能项目完成后，后续这个功能就可以自主添加无限语种。

项目开发思路

基于 Vue.js 前端（UniApp）和 PHP Laravel 后端实现语言自由切换且后台可修改语言包功能的开发思路：

后端（PHP Laravel）

1. 数据库设计

创建一个语言表（languages），用于存储支持的语言信息，包含字段如 id、code（语言代码，如 en、zh-CN）、name（语言名称，如 English、中文）。
创建一个翻译表（translations），用于存储具体的翻译内容，包含字段如 id、language_id（关联语言表的 id）、key（翻译的键，用于在前端引用）、value（翻译的值，即具体的文本内容）。

2. 接口开发

获取支持的语言列表：创建一个接口，用于返回所有支持的语言信息，前端可以根据这个列表展示语言切换选项。 ```php // 路由定义 Route::get(‘/languages’, ‘LanguageController@index’);

// 控制器方法 public function index() { return Language::all(); }

- **获取指定语言的翻译内容**：创建一个接口，根据前端传递的语言代码，返回该语言对应的所有翻译内容。
```php
// 路由定义
Route::get('/translations/{languageCode}', 'TranslationController@getTranslationsByLanguage');

// 控制器方法
public function getTranslationsByLanguage($languageCode)
{
    $language = Language::where('code', $languageCode)->first();
    if ($language) {
        return Translation::where('language_id', $language->id)->pluck('value', 'key');
    }
    return [];
}

后台修改语言包接口：创建接口用于在后台添加、修改或删除翻译内容。 ```php // 路由定义 Route::post(‘/translations’, ‘TranslationController@store’); Route::put(‘/translations/{id}’, ‘TranslationController@update’); Route::delete(‘/translations/{id}’, ‘TranslationController@destroy’);

// 控制器方法示例 public function store(Request $request) { $translation = Translation::create([ ‘language_id’ => $request->input(‘language_id’), ‘key’ => $request->input(‘key’), ‘value’ => $request->input(‘value’) ]); return response()->json($translation, 201); }

### 前端（Vue.js + UniApp）

#### 1. 初始化语言状态
在 Vuex 或全局变量中初始化当前语言状态，默认可以设置为用户系统语言或应用的默认语言。
```javascript
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        currentLanguage: 'en' // 默认语言
    },
    mutations: {
        setLanguage(state, language) {
            state.currentLanguage = language;
        }
    },
    actions: {
        changeLanguage({ commit }, language) {
            commit('setLanguage', language);
        }
    }
});

2. 获取语言列表和翻译内容

在应用启动时，调用后端接口获取支持的语言列表和当前语言的翻译内容。

// App.vue
export default {
    async created() {
        // 获取支持的语言列表
        const languages = await this.$http.get('/languages');
        this.languages = languages.data;

        // 获取当前语言的翻译内容
        const translations = await this.$http.get(`/translations/${this.$store.state.currentLanguage}`);
        this.$store.commit('setTranslations', translations.data);
    }
};

3. 实现语言切换功能

在界面上提供语言切换选项，用户选择不同语言时，调用后端接口获取新的翻译内容并更新界面显示。

<template>
    <div>
        <select v-model="selectedLanguage" @change="changeLanguage">
            <option v-for="language in languages" :key="language.code" :value="language.code">{{ language.name }}</option>
        </select>
        <p>{{ $t('welcome_message') }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedLanguage: this.$store.state.currentLanguage,
            languages: []
        };
    },
    methods: {
        async changeLanguage() {
            const translations = await this.$http.get(`/translations/${this.selectedLanguage}`);
            this.$store.commit('setTranslations', translations.data);
            this.$store.commit('setLanguage', this.selectedLanguage);
        }
    }
};
</script>

4. 封装翻译函数

在 Vue 中封装一个翻译函数 $t，用于根据翻译键获取对应的翻译内容。

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.prototype.$t = function(key) {
    return this.$store.state.translations[key] || key;
};

new Vue({
    store,
    render: h => h(App)
}).$mount('#app');