微信小程序语言切换 | upupming 的博客

upupming commented 6 years ago

https://upupming.site/2018/07/23/mini-program-i18n/#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99

微信小程序语言切换

thunderwin commented 5 years ago

请问在mpvue 中也能使用这样的方案吗？

upupming commented 5 years ago

@thunderwin

mpvue 目前没有接触过，理论上应该不太难，你可以用这种思路试一下~

~~等我有空的时候也尝试看看~~

GuoGuitang commented 5 years ago

您好，在您的方案中，我的理解是假设所有page的title都是统一的。但是，如果在小程序中，每个页的title都不同，请问改如何做呢？

upupming commented 5 years ago

@GuoGuitang 这个问题很好，你的理解是对的，即『所有页面的导航栏标题都是统一的』。因为我自己实现时没有考虑过于复杂的情况。

如果你希望每一页的标题都不同，可以修改 setNavigationBarTitle 为可以接受标题字符串的函数，比如：

T.setNavigationBarTitle = function(titleString) {
  wx.setNavigationBarTitle({
    // 修改此行，优先使用传入的标题，否则使用统一标题
    title: titleString || navigationBarTitles[lastLangIndex]
  })
}

然后在每个页面的 onShow 生命周期函数中传入正确的标题：

  onShow: function() {
    if(this.data.shouldChangeTitle) {
      // 修改此行，使用 locales.js 中定义好的页面标题
      wx.T.setNavigationBarTitle(this.data.language.somePage.title);
      this.data.shouldChangeTitle = false;
    }
  },

GuoGuitang commented 5 years ago

@upupming @GuoGuitang 这个问题很好，你的理解是对的，即『所有页面的导航栏标题都是统一的』。因为我自己实现时没有考虑过于复杂的情况。

如果你希望每一页的标题都不同，可以修改 setNavigationBarTitle 为可以接受标题字符串的函数，比如：
T.setNavigationBarTitle = function(titleString) {
  wx.setNavigationBarTitle({
    // 修改此行，优先使用传入的标题，否则使用统一标题
    title: titleString || navigationBarTitles[lastLangIndex]
  })
}
然后在每个页面的 onShow 生命周期函数中传入正确的标题：
  onShow: function() {
    if(this.data.shouldChangeTitle) {
      // 修改此行，使用 locales.js 中定义好的页面标题
      wx.T.setNavigationBarTitle(this.data.language.somePage.title);
      this.data.shouldChangeTitle = false;
    }
  },

非常感谢您的详细回答！

按照您的方式，我成功了。非常感谢！

GuoGuitang commented 5 years ago

您好，我在应用中还发现了一个小问题，就是如果小程序是在”制定页“打开的时候，所有的page内的语言都是正确的，但是tabbar却是中文的。这个原因我发现好象是在非tabbar页设置 tabbar上的文字，就会失效。我的解决方案是：在tabbar页的onShow，调用 wx.T.setLocaleByIndex(wx.getStorageSync('langIndex') || 0); 设置tabbar。但是效率就很低下。

upupming commented 5 years ago

@GuoGuitang 你所说的『打开制定页』是指再次打开时吗？我这边是没有问题的，如果上次选择了英文，再次打开 tabbar 也会是英文，你应该是在 app.js 中调用初始化函数时没有设置 tabbar，参见：

// /app.js
T.registerLocale(locales);  // (1)
T.setLocaleByIndex(wx.getStorageSync('langIndex') || 0);    // (2)
wx.T = T;   // (3)

按照前面的介绍，(2) 处调用的 setLocaleByIndex 应该调用设置 tabbar 标题的函数。你可以增加一些打印语句测试一下这里是否按照正确的 langIndex 设置成功了。

另外后来对于数据缓存这块我也做了优化，将所有缓存放在 globalData 之下，现在只需要缓存 globalData 就可以了。

如果还有问题的话强烈建议 git clone https://github.com/upupming/HITMers 来读一下源代码。极小的语言切换实现参见 /client/app.js、 /pages/about/privacy.js 、/client/utils/i18n.js 和 /client/utils/locales.js

GuoGuitang commented 5 years ago

@upupming 不好意思，我打错字了。是指定页，比如：在微信开发工具中，编译模式中选择自定义编译模式，然后选一个非tabbar页的page打开，这样默认打开的时候下方是没有tabbar的（因为是一个非tabbar页），这个时候，我们在右上角的菜单中选择“回到首页”，这个时候会回到我们默认的启动主页（即app.json中pages页排名第一的）此时，你就会发现tabbar的语言设置是不对的。。

upupming commented 5 years ago

@GuoGuitang 嗯，这确实是一个 bug，具体场景是打开别人的分享并返回主页时 tabbar 语言无法正确切换：

看了一下，这是因为首次加载页面没有 tabbar， setTabBarLang 在 tabbar 还未初始化时就被调用。

解决方法是在返回首页的时候再调用一次 setTabBarLang：

如果有更好的解决方案，也欢迎 PR 呀！:smile:

upupming commented 5 years ago

我的解决方案是：在tabbar页的onShow，调用 wx.T.setLocaleByIndex(wx.getStorageSync('langIndex') || 0); 设置tabbar。但是效率就很低下。

也不错，不过建议在 onLoad 调用好一些，避免重复调用。也不必在每个有 tabbar 的页面都调用，只需在首页即可。

ChthollyZJG commented 5 years ago

感谢博主大大的经验分享哦，最近也有碰见小程序国际化的需求，然后就看见这篇文章，真的是帮助非常大，我可以借鉴一下拿去使用嘛？

upupming commented 5 years ago

当然可以啦，很高兴能对您有所帮助😃

tyonly commented 5 years ago

这个方案非常好采用了

smile11011 commented 5 years ago

博主你好这翻译是自动翻译还是需要我们把翻译的文本封装。。。。

upupming commented 5 years ago

@smile11011 自己翻译，重新仔细读一遍文章。

xiaoxian1111 commented 5 years ago

请问大神为什么一开打开小程序语言包读取不了，要切换语言才能实现语言包

upupming commented 5 years ago

@xiaoxian1111 你说的语言包是什么？什么叫『切换语言才能实现语言包』？如果文章没有看懂，可以多看几遍。还有问题的话，请详细描述以帮助定位问题所在！建议阅读提问的智慧：https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md

xiaoxian1111 commented 5 years ago

就是没有被翻译过了，只能按切中英文才能翻译过来，不然没有显示内容

upupming commented 5 years ago

@xiaoxian1111 你是指小程序重启之后没有显示内容？

xiaoxian1111 commented 5 years ago

第一次加载小程序没有内容显示，要切换中英文才有内容显示

------------------ 原始邮件 ------------------ 发件人: "Li Yiming"notifications@github.com; 发送时间: 2019年5月9日(星期四) 下午3:32 收件人: "upupming/upupming.github.io"upupming.github.io@noreply.github.com; 抄送: "小贤"1726800251@qq.com; "Mention"mention@noreply.github.com; 主题: Re: [upupming/upupming.github.io] 微信小程序语言切换 | upupming 的博客 (#47)

@xiaoxian1111 你是指小程序重启之后没有显示内容？

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

upupming commented 5 years ago

@xiaoxian1111 明白啦，你可以把相关页面的代码贴出来我看看怎么回事。gif也可以贴一下方便具体定位。

xiaoxian1111 commented 5 years ago

代码就按照你复制调式，而且代码太多了不知道怎么贴出来给你看，可以微信私聊吗

------------------ 原始邮件 ------------------ 发件人: "Li Yiming"notifications@github.com; 发送时间: 2019年5月9日(星期四) 下午3:37 收件人: "upupming/upupming.github.io"upupming.github.io@noreply.github.com; 抄送: "小贤"1726800251@qq.com; "Mention"mention@noreply.github.com; 主题: Re: [upupming/upupming.github.io] 微信小程序语言切换 | upupming 的博客 (#47)

@xiaoxian1111 明白啦，你可以把相关页面的代码贴出来我看看怎么回事。gif也可以贴一下方便具体定位。

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

upupming commented 5 years ago

@xiaoxian1111 也行哈哈，我这引导你走向 GitHub，程序员总得学会用 GitHub，用微信也好，稍等啊

xiaoxian1111 commented 5 years ago

好的，谢谢，GitHub不怎么会用

------------------ 原始邮件 ------------------ 发件人: "Li Yiming"notifications@github.com; 发送时间: 2019年5月9日(星期四) 下午3:45 收件人: "upupming/upupming.github.io"upupming.github.io@noreply.github.com; 抄送: "小贤"1726800251@qq.com; "Mention"mention@noreply.github.com; 主题: Re: [upupming/upupming.github.io] 微信小程序语言切换 | upupming 的博客 (#47)

@xiaoxian1111 也行哈哈，我这引导你走向 GitHub，程序员总得学会用 GitHub，用微信也好，稍等啊

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

upupming commented 5 years ago

@xiaoxian1111 你的问题是写入了多个 onLoad 函数，导致后面的 onLoad 函数覆盖了前面的 onLoad 函数，前面的 onLoad 函数未被调用， setLanguage 也就未被执行，初次加载小程序时没有能正确设置语言。解决办法是只使用一个 onLoad 函数。希望能帮到大家~