（四一）ArkTS 多语言支持与国际化开发 原创

{
    "welcome": "Welcome to our app!",
    "login": "Login",
    "register": "Register"
}
1.
2.
3.
4.
5.

{
    "welcome": "欢迎使用我们的应用！",
    "login": "登录",
    "register": "注册"
}
1.
2.
3.
4.
5.

import { ref } from '@vue/reactivity';
 
// 定义语言资源对象
const languageResources = {
    en: {
        welcome: 'Welcome to our app!',
        login: 'Login',
        register: 'Register'
    },
    zh: {
        welcome: '欢迎使用我们的应用！',
        login: '登录',
        register: '注册'
    }
};
 
// 当前语言状态
const currentLanguage = ref('en');
 
// 获取当前语言对应的文本
function getTranslation(key: string) {
    return languageResources[currentLanguage.value][key];
}
 
// 切换语言函数
function switchLanguage(lang: string) {
    currentLanguage.value = lang;
}
 
@Entry
@Component
struct MultiLanguageApp {
    build() {
        Column({ space: 20 }) {
            Text(getTranslation('welcome'))
               .fontSize(20)
            Button(getTranslation('login'))
               .onClick(() => {
                    // 处理登录逻辑
                })
            Button(getTranslation('register'))
               .onClick(() => {
                    // 处理注册逻辑
                })
            Row({ space: 10 }) {
                Button('English')
                   .onClick(() => {
                        switchLanguage('en');
                    })
                Button('中文')
                   .onClick(() => {
                        switchLanguage('zh');
                    })
            }
        }
       .width('100%')
       .padding(20)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

// 获取当前日期
const now = new Date();
 
// 英语（美国）日期格式
const enUSOptions = { year: 'numeric', month: 'long', day: 'numeric' };
const enUSFormatter = new Intl.DateTimeFormat('en-US', enUSOptions);
const enUSDate = enUSFormatter.format(now);
 
// 中文（中国）日期格式
const zhCNOptions = { year: 'numeric', month: 'long', day: 'numeric' };
const zhCNFormatter = new Intl.DateTimeFormat('zh-CN', zhCNOptions);
const zhCNDate = zhCNFormatter.format(now);
 
console.log('English (US) date:', enUSDate);
console.log('Chinese (CN) date:', zhCNDate);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

// 金额
const amount = 1234.56;
 
// 美元格式化
const usdOptions = { style: 'currency', currency: 'USD' };
const usdFormatter = new Intl.NumberFormat('en-US', usdOptions);
const usdAmount = usdFormatter.format(amount);
 
// 人民币格式化
const cnyOptions = { style: 'currency', currency: 'CNY' };
const cnyFormatter = new Intl.NumberFormat('zh-CN', cnyOptions);
const cnyAmount = cnyFormatter.format(amount);
 
console.log('USD amount:', usdAmount);
console.log('CNY amount:', cnyAmount);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.