FC-Uniapp

Appearance

多语言 ​

H5安卓苹果鸿蒙微信小程序其它小程序
√√√√√-

多语言切换功能依赖FC.Store模块。

使用方法 ​

  1. 终端执行以下命令安装vue-i18n插件：
bash
npm install vue-i18n@9.14.5
  1. 终端执行以下命令安装多语言模块：
bash
fcuni c locale
  1. 以中文简体和英文为例，在src/modules/locale目录下，创建zh-Hans.json和en.json文件。例如：
json
{
    "hello": "你好",
    "world": "世界"
}
json
{
    "hello": "Hello",
    "world": "World"
}
  1. 在src/modules/locale/index.ts文件中，引入多语言模块。例如：
ts
import en from './en.json'			//英文
import zhHans from './zh-Hans.json'	//中文简体

export const localMessages = {
    'en': en,
    'zh-Hans': zhHans
}
  1. 在src/main.ts文件中，引入多语言模块。例如：
ts
...
import { localMessages } from '@/modules/locale'

export function createApp() {
    const app = createSSRApp(App);
    app.use(FC.Store.pinia)
    app.use(FC.i18n.init(localMessages))    //初始化多语言模块
    return {
        app,
    };
}
  1. 在src/App.vue中初始化
vue
...
onLaunch(() => {
    console.log("App Launch");
    FC.Store.initLocale()   //默认是中文简体
    ...
});
...
  1. 在vue文件中，使用如下：
vue
<template>
    <view>
        <text>{{ $t('hello') }}</text>
        <text>{{ $t('world') }}</text>
    </view>
</template>
  1. 切换多语言如下：
ts
...
const globalState = FC.useSysGlobalStore()

globalState.language = 'zh-Hans' //切换到中文简体
globalState.language = 'en' //切换到英文

移除模块 ​

终端执行

bash
fcuni d locale
bash
npm uninstall vue-i18n

并移除相关代码