微信小程序国际化

我就是我 2023-10-11 11:49 7阅读 0赞

ok，首先 肯定是要准备一个语言包脚本  
— *locales.js* 暴露出一个对象，将你要国际化的语言分别注入

export default {
      'zh-cn': {
        language: '中文',
        //  pages/company/index
        search: '搜索...',
        youAlsoHave: '您还有',
      },
      // *****************************************************************
      // 这个地方是为了我们在无聊的翻译中不眼花缭乱
      // ****************************************************************
      en: {
        language: 'EN',
        //  pages/company/index
        search: 'search...',
        youAlsoHave: 'You also have',
      }
    };

然后要想的就是怎么将这个语言包里面的内容拿出来  
— *i18n.js* 定义几个方法

方法定义好了，在 *app.js* 里引用一下，并且绑定到wx对象上

import locales from './utils/locales.js';
    import T from './utils/i18n.js';
    T.registerLocale(locales);
    //当前语言设置为用户上一次选择的语言，如果是第一次使用，则调用 T.setLocaleByIndex(0) 将语言设置成中文
    T.setLocaleByIndex(wx.getStorageSync('langIndex') || 0);
    //将 T 注册到 wx 之下，这样在任何地方都可以调用 wx.T.getLanguage() 来得到当前的语言对象了。
    wx.T = T;
    
    
    App({
      onLaunch: function (res) {
        // 在这里处理一下 默认语言
        // 获取本地存储的 语言包的数组下标
        let langFlag = wx.getStorageSync('langIndex')  || 0;
        // 存储 当前应用的对象 键
        wx.T.setLocaleByIndex(langFlag);
        // 存储 当前选中语言的下标
        wx.setStorageSync('langIndex', langFlag);
    
    }
    })

使用：没有找到全局的广播监听方法，没得办法，只能单个页面引入了  
\---- page/index.js

import tip from '../../utils/tip';
    import util from '../../utils/util';
    Page({
      data: {
        language : '',
        langIndex : 0,
      },
      changeLanguage(e) {
        let index = e.currentTarget.dataset.index
        // console.log(index)
          this.setData({	// (1)
            langIndex: index
          });
          wx.T.setLocaleByIndex(index);
          this.setLanguage();
    
          wx.setStorage({
            key: 'langIndex',
            data: this.data.langIndex
          })
      },
      setLanguage() {
        this.setData ({
          language: wx.T.getLanguage()
        });
      },
     onShow: function() {
        var that = this;
        //下面这两句  tabbar 页面建议写onShow里，子页面建议写在onLoad里面
        this.setData({ 'langIndex': wx.getStorageSync('langIndex') });
        this.setData({ 'language': wx.T.getLanguage() }
     }
     })

在wxml中

<view  bindtap='changeLanguage' class='language' data-index='0' wx:if="{
       {langIndex == 1}}">
      {
       {language.language}}
    </view>
    <view bindtap='changeLanguage' class='language' data-index='1' wx:elif="{
       {langIndex == 0}}">
      {
       {language.language}}
    </view>

在自定义组件中使用  
将 language 和 languageIndex 传进去就好了

<news-list list="{
       {newsList}}" language="{
       {language}}" languageIndex="{
       {languageIndex}}" bind:tapItem="goNewsDetail"></news-list>