微信小程序实现多国语言的切换

Love The Way You Lie 2023-07-03 12:13 17阅读 0赞

实现步骤:

1,首先在根目录新建文件夹 i18n，该文件夹下是 各种语言的js文件，如下图所示：

![20200206152622950.png][]

每个js文件内容和下面的图片类似；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

const languageMap = {
      "授权完成":"授权完成",
      "完善信息成功":"完善信息成功"
    }
    module.exports = {
     languageMap:languageMap
    }

2，新建base.js文件，位置和app.js同级别即可，也可自行安排位置；里面内容如下

3，在页面中使用：

首先在页面 js文件中引入base.js;  var base = require('../../base.js');

然后在onShow生命周期函数中 写入：

onShow(){
     this.setData({ 
       _t: base._t() 
     });
    }

写在onShow生命周期函数中每次进入该页面，都加载数据，虽然降低了性能，但是保证切换语言之后，页面的文字能随时变化；（（（切换语言主要是用了微信小程序的组件[radio-group][]，改变缓存中的一个变量，该变量是用于确定当前选择的是何种语言的标志；在步骤1中有四个js文件，分别是“\_hanyu.js”，“\_riyu.js” ，“\_ying.js”，“\_zhong.js”,

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 1][]

通过单选按钮将对应的文件名放入缓存；-------单选按钮的详细部分在其他文章中说明-----[https://mp.csdn.net/postedit/104198619][https_mp.csdn.net_postedit_104198619]；）））

这样页面js文件的data对象里就有了对应语言的数据，在wxml页面中可以通过双花括号获取数据；

例如：<text>\{ \{\_t\["授权完成"\]\}\}</text>

# OVER,OVER #

[20200206152622950.png]: https://img-blog.csdnimg.cn/20200206152622950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200206152605660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA==,size_16,color_FFFFFF,t_70
[radio-group]: https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200206160153616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA==,size_16,color_FFFFFF,t_70
[https_mp.csdn.net_postedit_104198619]: https://mp.csdn.net/postedit/104198619