600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 微信小程序实现多国语言的切换

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

时间:2019-02-08 07:18:00

相关推荐

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

实现步骤:

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

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

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

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

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

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

OVER,OVER

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。