uni-app picker组件在app端使用vue-i18n国际化无效,H5端正常(无效指“取消”|“确定”、日期选择器“年月”无国际化)
uni-app picker组件在app端使用vue-i18n国际化无效,H5端正常(无效指“取消”|“确定”、日期选择器“年月”无国际化)
示例代码:
<picker mode="date">
<view>点击查看date</view>
</picker>
<picker mode="selector">
<view>点击查看selector</view>
</picker>
操作步骤:
- 新建项目,
- npm init
- npm i vue-i18n
- main.js 内容
import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
Vue.config.productionTip = false
const i18n = new VueI18n({
locale: 'en-US', // "en" 也一样没效果
messages: {
'en-US': {
index: {
invite: 'Invite',
game: 'Game'
}
},
'zh-CN': {
index: {
invite: '邀请',
game: '游戏'
}
}
}
})
Vue.prototype._i18n = i18n
App.mpType = 'app'
const app = new Vue({
i18n,
...App
})
app.$mount()
- index.vue内容 template 内
<picker mode="date">
<view>点击查看date</view>
</picker>
<picker mode="selector">
<view>点击查看selector</view>
</picker>
预期结果:
确定和取消为英文,月份为英文
实际结果:
确定和取消为中文,月份为中文
bug描述:
使用 vue-i18n 国际化下 app端 picker 无反应,但H5端正常 (这里的无反应是指国际化没反应,App 端的 “取消”/“确定” 并没有根据 VueI18n 所设置的英文语言环境而变动,日期内的 “年月”,同样也没有转为英文)
图一、图二分别时app端的运行时效果;图三为app端当时的 VueI18n 的状态;图四为H5时的运行效果
另外使用 HBuilderX版本: 3.2.2 测了,同样还存在该问题 该问题在小米8、荣耀 50 Pro等设备 同样存在
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| PC | Windows | HBuilderX |
| PC | win10_专业版 | |
| HBuilderX | 3.1.18 | |
| 手机 | Android | |
| 手机 | Android 7.1.1 | |
| 手机 | 小米 | |
| 手机 | mi_6 |
更多关于uni-app picker组件在app端使用vue-i18n国际化无效,H5端正常(无效指“取消”|“确定”、日期选择器“年月”无国际化)的实战教程也可以访问 https://www.itying.com/category-93-b0.html
预计下一个 alpha 版会放出更完善的国际化支持,请关注后续更新。
新版本已发布,相关文档:https://uniapp.dcloud.io/api/ui/locale
更多关于uni-app picker组件在app端使用vue-i18n国际化无效,H5端正常(无效指“取消”|“确定”、日期选择器“年月”无国际化)的实战教程也可以访问 https://www.itying.com/category-93-b0.html
好的,谢谢,那请问是大版本更新才会有的吗?现在是 3.2.1,下个版本是3.2.2? 还是3.3.x?亦或是 4.x ?
回复 demon_lin: 预计版本号为 3.2.5。
回复 DCloud_UNI_GSQ: 好的,谢谢
回复 DCloud_UNI_GSQ: 最新版本(3.3.5.20211229)还是有这个问题
回复 DCloud_UNI_GSQ: 3.6.8-alpha 还是有这个问题,vue2,我自定义了一个俄文(ru),picker组件的确认和取消按钮,编译成H5能显示俄文,编译成app则显示cancel/done
这是一个已知的 uni-app 平台差异问题。App 端的 picker 组件(包括日期选择器和选择器)的按钮文字(“取消”、“确定”)和日期选择器的“年月”等内置文本,是由原生控件渲染的,不直接受 vue-i18n 控制。
原因分析:
- H5端:picker 组件由浏览器原生实现,其语言通常跟随系统或浏览器语言设置,在某些情况下可能受页面语言环境影响。
- App端(Android/iOS):picker 组件调用的是原生平台的选择器控件(如 Android 的 DatePickerDialog、iOS 的 UIDatePicker)。这些原生控件的默认语言由操作系统当前语言决定,与 vue-i18n 设置的 Webview 内部语言环境是隔离的。
解决方案: 目前 uni-app 官方未提供直接通过 vue-i18n 配置原生 picker 组件语言的 API。可考虑以下两种方式:
-
使用条件编译自定义 picker 界面(推荐):
- 对于日期选择,可使用
uni-datetime-picker组件(如果使用 uni-ui),它是纯 JS 实现的,支持国际化。 - 对于普通选择器,可自定义弹出层模拟 picker 行为,完全自主控制文本。
- 对于日期选择,可使用
-
尝试通过操作系统语言设置影响:
- 确保设备的系统语言设置为目标语言(如英文)。原生 picker 会跟随系统语言。
- 在 App 启动时,可通过
plus.runtime.getLanguage()获取系统语言,并动态设置 vue-i18n 的 locale 与之匹配,保持整体一致。
代码示例(自定义选择器方案):
<template>
<view>
<!-- 自定义日期选择 -->
<view @click="showDatePicker = true">{{ selectedDate }}</view>
<uni-popup v-if="showDatePicker" @maskClick="showDatePicker = false">
<!-- 自定义日期选择器内容,按钮文本使用 {{ $t('button.confirm') }} 等 -->
</uni-popup>
</view>
</template>


