最近小程序接到一个需求,将已有的功能藏语化,并且支持要求同时支持两种语言。于是开始研究小程序如何自己设置多种语言的支持。
1,语言必须是可以切换的。
2,必须根据不同语言进行适配。
3,tabbar的语言切换。
4,注意标题文字的闪烁。
1,语言切换我们放到了登录页面:
布局代码:
<view class='lan-frame'>
<view class='lan-sel lan-sel-text '>
<text class='lan-sel-text' bindtap='onBindCh'>简体中文</text>
<text class='lan-sel-text'>|</text>
<text class='lan-sel-text' bindtap='onBindZa'>དབུ་ཅན་རྒྱ་ཡིག་</text>
</view>
</view>
执行代码:
onBindCh:function(){
this.setData({
language:1
})
getApp().globalData.language = 1;
wx.setNavigationBarTitle({
title: '登录'
})
wx.setTabBarItem({
index: 0,
text: '重点关注'
});
wx.setTabBarItem({
index: 0,
text: '政策新闻'
});
wx.setTabBarItem({
index: 0,
text: '报表展示'
});
wx.setTabBarItem({
index: 0,
text: '我的服务'
});
},
onBindZa: function () {
getApp().globalData.language = 2;
wx.setStorageSync(Constant.FP_LAN, 2);
this.setData({
language: 2
})
wx.setNavigationBarTitle({
title: 'ཐོ་འཇུག'
})
wx.setTabBarItem({
index: 0,
text: 'གཙོ་གནད་དོ་ཁུར་'
});
wx.setTabBarItem({
index: 1,
text: 'སྲིད་ཇུས་གསར་འགྱུར་'
});
wx.setTabBarItem({
index: 2,
text: 'སྙན་ཐོའི་རེའུ་མིག་འགྲེམས་སྟོན་'
});
wx.setTabBarItem({
index: 3,
text: 'ངའི་ཞབས་ཞུ།'
});
},
2,必须根据不同语言进行适配。
我们再适配语言切换的时候,做了一个全局的语言标志:
getApp().globalData.language 。该标志生存周期贯穿整个软件,这样再每个页面的时候,只需要将全局标志赋值给页面逻辑即可实现语言的判断,同时实现语言的选择切换。
3,tabbar的语言切换。
切换tabbar的内容必须使用微信提供的方法:
wx.setTabBarItem({
index: 0,
text: 'text', // 该位置就可以根据语言进行选择适配
iconPath: '/path/to/iconPath',
selectedIconPath: '/path/to/selectedIconPath'
})
4,注意标题文字的闪烁。
前期我们做的时候,标题还是配置在json里面,但是这样就带来一个问题,在切换页面的时候,标题会优先显示json里面的文字,再根据语言适配切换语言,这样就导致了会出现闪烁的情况。所以我们去掉了json里面的内容,直接根据条件判断设置标题:
if (getApp().globalData.language == 2) {
wx.setNavigationBarTitle({
title: 'སྲིད་ཇུས་གསར་འགྱུར་'
})
}
else{
wx.setNavigationBarTitle({
title: '政策新闻'
})
}
该文章只是记录了切换语言最快捷的处理方式,实际上要支持多语言配置,是需要配置后,不参与逻辑代码编码。只需要将文字配置到多国语言表即可,该方案目前还在思考中,后续有进展,也将放出来跟大家一起分享。
网友评论