c 微信项目开发多语言切换,微信小程序实现多国语言的切换

实现步骤:

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

2e7cc6cb4b7367e24fefe00dc9dd2540.png

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

8cb463a75877098068f9132915d3881b.png

const languageMap = {

"授权完成":"授权完成",

"完善信息成功":"完善信息成功"

}

module.exports = {

languageMap:languageMap

}

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

function getLanguage() {

//返回缓存中的language属性 (_zhong/_ying/_riyu/_hanyu)

return wx.getStorageSync('Language') || '_zhong'

};

function translate() {

//返回翻译的对照信息

return require('i18n/' + getLanguage() + '.js').languageMap;

}

function translateTxt(desc) {

//翻译

return translate()[desc] || '竟然没有翻译';

}

module.exports = {

getLanguage: getLanguage,

_t: translate,

_: translateTxt

}

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”,

9b38574e551f79e226e6c0c21f542a6d.png

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

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

例如:{{_t["授权完成"]}}

OVER,OVER

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值