uni-app 原生安卓使用uni小程序SDK加载的程序内,uni.setLocale('en')无法将picker组件切换成英文

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app 原生安卓使用uni小程序SDK加载的程序内,uni.setLocale(‘en’)无法将picker组件切换成英文

产品分类

uni小程序SDK

手机系统

Android

手机系统版本号

Android 11

手机机型

CRUISE Ge2

页面类型

vue

SDK版本号

SDK-Android@4.29-20241008

操作步骤

在切换语言的回调函数中,手动指定setLocale的语言

const setCurrentLanguage = async (locale: string) => {  
  console.log('lang', locale);  
  await clientAccess.postLanguage({ currentLocaleString: locale });  
  await clientAccess.refreshLanguage();  
  if (locale === 'en-US') {  
    uni.setLocale?.('en');  
  }  
  // 页面重载  
  const pages = getCurrentPages();  
  const currentPage = pages[pages.length - 1];  
  const url = currentPage.route;  
  uni.reLaunch({  
    url: `/${url}`,  
  });  
};

调用的picker组件传入了fields属性

<template>  
  <view>  
    <picker  
      mode="date"  
      :value="value"  
      :disabled="disabled"  
      @change="onDateChange"  
      fields="day"  
    >  
      <view class="flex justify-between">  
        <view>  
          <text v-if="value">{{ value }}</text>  
          <text class="placeholder" v-else>{{ i18next.t('components.DatePicker.810deae9', { defaultValue: '请选择' }) }}</text>  
        </view>  
        <GProIcon name="Right" />  
      </view>  
    </picker>  
  </view>  
</template>

预期结果

picker组件会显示成英文

实际结果

picker组件仍然显示中文

bug描述

原生安卓使用uni小程序SDK加载的uniapp程序,在uniapp程序内使用uni.setLocale(‘en’), picker组件切换成英文不成功,仍然显示的是中文

开发环境、版本号、项目创建方式

信息
产品分类 uni小程序SDK
手机系统 Android
手机系统版本号 Android 11
手机机型 CRUISE Ge2
页面类型 vue
SDK版本号 SDK-Android@4.29-20241008

1 回复

在uni-app中,当你使用uni小程序SDK在原生安卓环境中加载应用时,可能会遇到uni.setLocale('en')无法将picker组件切换成英文的问题。这通常是由于国际化设置没有正确应用到组件上,或者是SDK在某些组件上未完全支持国际化。

下面是一个示例代码,展示了如何在uni-app中实现国际化设置,并尝试解决picker组件的语言切换问题。请注意,由于uni-app和原生安卓环境的复杂性,以下代码可能需要根据具体情况进行调整。

1. 配置国际化资源

首先,在pages.json中配置国际化资源文件路径:

{
  "globalStyle": {
    "i18n": {
      "common": {
        "path": "static/i18n/{{locale}}.json",
        "default": "zh-CN"
      }
    }
  }
}

然后,在static/i18n/目录下创建en.jsonzh-CN.json文件,例如:

en.json:

{
  "picker": "Select"
}

zh-CN.json:

{
  "picker": "选择"
}

2. 设置语言环境

在应用的某个页面或组件中,使用uni.setLocale设置语言环境:

// 切换到英文
uni.setLocale('en');

3. 自定义picker组件

由于uni-app的picker组件可能不支持直接通过uni.setLocale切换语言,你可以考虑自定义一个picker组件,根据当前语言环境动态显示内容。

自定义picker组件示例(Vue语法)

<template>
  <view>
    <picker mode="selector" :range="options" @change="onPickerChange">
      <view>{{ currentOption }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: ['Select', 'Option 1', 'Option 2'], // 默认中文选项
      currentOption: 'Select',
      locale: uni.getLocale() // 获取当前语言环境
    };
  },
  mounted() {
    this.updateOptions();
    uni.onLocaleChange((e) => {
      this.locale = e.locale;
      this.updateOptions();
    });
  },
  methods: {
    updateOptions() {
      if (this.locale === 'en') {
        this.options = ['Select', 'Option 1', 'Option 2'];
      } else {
        this.options = ['选择', '选项1', '选项2'];
      }
      this.currentOption = this.options[0];
    },
    onPickerChange(e) {
      this.currentOption = this.options[e.detail.value];
    }
  }
};
</script>

在这个示例中,我们根据当前语言环境动态设置picker的选项。同时,监听语言环境的变化,以便在用户更改语言时更新picker的选项。

回到顶部