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>  

操作步骤:

  1. 新建项目,
  2. npm init
  3. npm i vue-i18n
  4. 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()
  1. 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

8 回复

预计下一个 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)还是有这个问题

回复 y***@163.com: vue3还是vue2?

回复 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。可考虑以下两种方式:

  1. 使用条件编译自定义 picker 界面(推荐):

    • 对于日期选择,可使用 uni-datetime-picker 组件(如果使用 uni-ui),它是纯 JS 实现的,支持国际化。
    • 对于普通选择器,可自定义弹出层模拟 picker 行为,完全自主控制文本。
  2. 尝试通过操作系统语言设置影响

    • 确保设备的系统语言设置为目标语言(如英文)。原生 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>
回到顶部