排行榜 统计
  • 建站日期:2017-05-08
  • 文章总数:446 篇
  • 评论总数:6393 条
  • 分类总数:25 个
  • 最后更新:10月9日

uniapp实现国际化多语言切换,原理说明

本文阅读 4 分钟
广告

在今年四月的官方更新中,uniapp的内部控件已经支持五种语言,会自动跟随系统变化,所以如果要自己做app的话,可能开启一个国际化也是很好的装逼和走向远方的策略。正好,之前做的一个项目里就有个实现国际化的需求,当时我思来想去,还是很快的做了出来,于是就有了这篇文章。

我这篇教程是支持超过两种以上语言的,后期只需要自己添加就行,而且我也写了一个自动生成语言库代码的脚本,不过这个属于内部的东西,我就不公开了。

第一步:创建相关文件

1.新建lang.js,根据不同的页面定义不同的对象,比如我以首页index.vue为例,同时还需要给底部tab留一个语言对象TabBarLang。

module.exports = {
    TabBarLang:function(){
        var langtext = {
            lang1:["首页","Home"],
            lang2:["新闻","News"],
            lang3:["个人","User"],
        }
        return langtext;
    },
    //首页
    indexLang:function(){
        var langtext = {
            lang1:["行业热点","Industry hotspot"],
            lang2:["今日头条","Today's headlines"],
            lang3:["撰写文章","Write an article"],
        }
        return langtext;
    }
}

上面的代码就是一个用于底部tab,一个用于app首页,每个页面都新建一个对象用作区分。

2.新建一个页面用来定义语言切换,同时使用localStorage用于存储语言id字段,这里我推荐一个全平台兼容的插件mp-storage,先在data里定义如下字段:

langList:["简体中文","English"],

这里大概就明白了,以数组的指针来定义语言切换,第一位是中文,第二位是英文。所以下面先随便写个循环。

<view class="whiteLine"  v-for="(item,index) in langList"  :key="index" @tap="changeLang(index)">
    <view>
        <text>{{item}}</text>
        <image v-if="index==langid" class="lineIcon" src="../../static/img/confirm/assets_transfer_select.png" mode="widthFix"></image>
    </view>
</view>

上面的代码定义了changeLang方法,它的代码如下:

changeLang(index){
    
    var that = this;
    that.langid = index;
    localStorage.setItem('langid', index);
    uni.reLaunch({
        url: '/pages/home/home'
    })
    // #ifdef APP-PLUS
    plus.runtime.restart();
    // #endif
}

最后也别忘了引入插件和语言库文件,我的放在utils文件夹里,实际情况随便放。

import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
var Lang = require('../../utils/lang');

这里就实现了安卓的切换语言后重启,和其它平台的强制刷新到首页,这样就可以立刻变更语言,同时还通过localStorage存储了语言字段。

第二步:页面实现

1.在每个页面文件上加入如下字段:

langid:0,
langInfo:[],

langid等于0就默认是中文,属于数组指针第一位,这里是可以全局定义再全局调用的(很简单,我就懒得再加文件和方法那些了)。然后以首页文件index.vue为例,再加入如下方法:

getLang(){
    var that = this;
    if(localStorage.getItem('langid')){
        that.langid = localStorage.getItem('langid');
        
    }
    that.langInfo = Lang.indexLang(); //这里获取到语言库里首页的indexLang对象
    that.getTabBar();
},
getTabBar(){
    var that = this;
    var langid = that.langid;
    var TabBarlang = Lang.TabBarLang();
    
    uni.setTabBarItem({
      index: 1,
      text: TabBarlang.lang2[langid],
    })
    uni.setTabBarItem({
      index: 2,
      text: TabBarlang.lang3[langid],
    })
    uni.setTabBarItem({
      index:3,
      text: TabBarlang.lang4[langid],
    })
},

getLang用于获取当前语言id,并通过id获取语言库里的对象,getTabBar用于强制修改底部tab的语言。其中getLang方法需要再onShow生命周期内触发。

onShow(){
    var that = this;
    that.getLang();
},

之后每个页面就在getLang方法里修改那个获取语言库对象的名称就行了。之后在页面view里的调用方式如下:

{{langInfo.lang1[langid]}}

在js方法里面的调用如下:

this.langInfo.lang9[this.langid]

就这样,语言切换实现了,而且不会有什么延迟,几乎完美。
1.jpg

您的大名:
万水千山总是情,给个打赏行不行。 打赏
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/2222/
国外的5个安卓挖矿应用程序,比特币莱特币以太坊手机挖矿APP
« 上一篇 06-01
最新EPIC币挖矿教程,CPU和GPU双支持挖矿币种
下一篇 » 07-28
广告

发表评论

成为第一个评论的人

作者信息

热门文章

标签TAG

热评文章