美文网首页大前端开发
小程序多语言实现

小程序多语言实现

作者: arvinzou | 来源:发表于2019-07-30 13:46 被阅读10次

最近小程序接到一个需求,将已有的功能藏语化,并且支持要求同时支持两种语言。于是开始研究小程序如何自己设置多种语言的支持。
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: '政策新闻'
      })
    }

该文章只是记录了切换语言最快捷的处理方式,实际上要支持多语言配置,是需要配置后,不参与逻辑代码编码。只需要将文字配置到多国语言表即可,该方案目前还在思考中,后续有进展,也将放出来跟大家一起分享。

相关文章

网友评论

    本文标题:小程序多语言实现

    本文链接:https://www.haomeiwen.com/subject/qkqmrctx.html