切换的英文译语怎么说

微信⼩程序中英版本切换

最近公司接了个项⽬，客户那边要求要有中英翻译；本来以为在⽹上有类似的框架，后⾯找了⼤半天，最后还是⾃⼰动⼿丰⾐⾜⾷；

这⾥有3个地⽅需要进⾏中英切换的，顶部页⾯标题，⼩程序内容页，还有底部tabBar;

实现思路

⼀、创建json字典

将我们整个⼩程序的内容进⾏动陆游的诗歌风格 态赋值,这⾥如果使⽤的是图⽚的画，就需要提前准备两张图⽚，⼀张⽤于中⽂版本显⽰，⼀张⽤于英⽂版本显

⽰；所以⼀般我们需要创建两个json⽂件；这⾥我在根⽬录下创建language⽂件夹，并创建存放中⽂的zh_lang和英⽂的en_zhang两个json⽂

件；具体代码如下：

en_

varLanguague={

//个⼈中⼼

userCenter:{

//banner

banner:\"/hync/20200717/\",

//中英⽂切换按钮

changeLanguage:\"changetoChinese\",

//个⼈信息

userInfo:{

title:\"personalinformation\",

content:{}

},

//联系我们

contactUs:{

title:\"contactus\",

content:{}

},

//页⾯标题

title:\"userCenter\"

},

//底部英⽂版⼯具栏，这⾥是⽤于⾃定义tarbar⽤的

toolbar:{

list:[

{

\"pagePath\":\"../../introduct/main/main\",

\"ic互相的近义词 onPath\":\"../static/images/\",

\"selectedIconPath\":\"../static/images/introduct_\",

\"text\":\"Profiles\"

},

{

\"pagePath\":\"../../center/main/main\",

\"iconPath\":\"../static/images/\",

\"selectedIconPath\":\"../static/images/center_\",

\"text\":\"Me\"

}

]

}

}

s={

lang:Languague

}

zh_

varLanguague={

//个⼈中⼼

userCenter:{

//banner

banner:\"/hync/20200717/\",

//中英⽂切换按钮

ch26键拼音打字训练 angeLanguage:\"切换英⽂\",

//个⼈信息

userInfo:{

title:\"个⼈信息\",

content:{}

},

//联系我们

contactUs:{

title:\"联系我们\",

content:{}

},

//个⼈中⼼

title:\"个⼈中⼼\"

},

//顶部导航栏，这⾥是⽤于⾃定义tarbar⽤的

toolbar:{

list:[

{

\"pagePath\":\"../../introduct/main/main\",

\"iconPath\":\"../static/images/\",

\"selectedIconPath\":\"../static/images/introduct_\",

\"text\":\"公司介绍\"

},

{

\"pagePath\":\"../../center/main/main\",

\"iconPath\":\"../static/images/\",

\"selectedIconPath\":\"../static/images/center_\",

\"text\":\"个⼈中⼼\"

}

]

}

}

s={

lang:Languague

}

⼆、⼩程序页⾯内容翻译实现

2.1在中的globalData中声明⼀个公共变量version，⽤于标识当前版本是

中⽂版还是英⽂版

globalData:{

version:0,//0为中⽂1为英⽂

}

2.2在utils中创建⼀个js⽂件⽤于封装公共⽅法，这⾥我创建⽂件名为

languageUtils的js⽂件；

constapp=getApp()

//语⾔切换

constlanguageVersion=function(){

if(n==0){

//导⼊我们定义好的中⽂字典

varzh_lang=require(\'../language/zh_\')

//(zh_lang)

returnzh_lang

}else{

//导⼊我们定义好的英⽂字典

varen_lang=require(\'../language/en_\')

//(en_lang)

returnen_lang

}

}

//切换版本

constchangLanguage=function(){

//修改前⾯已经定义好的，⽤于标识⼩程序的语⾔版本

if(n==0){

n=1

//(\"当前语⾔版本：英⽂\",n)

}elseif(n==1){

n=0

//(\"当前语⾔版本：中⽂\",n)

}

}

//抛出⽅法

s={

\'languageVersion\':languageVersion,

\'changLanguage\':changLanguage

}

2.3创建页⾯，这⾥创建了两个页⾯，如图所⽰：

2.4在创建的两个页⾯中编写代码，如下所⽰：

js

//pages/center/main/

varlanguageUtil=require(\'../../../utils/languageUtil\')

constapp=getApp()

Page({

/**

*页⾯的初始数据

*/

data:{

content:{}//⽤于保存当前页⾯所需字典变量

},

/**

*⽣命周期函数--监听页⾯显⽰

*/

onShow:function(){

nguage()

},

//中英⽂切换

switchLanguage(){

//切换当前版本，即修改公共变量中的version

anguage()

nguage()

},

//初始化语⾔

initLanguage(){

//获取当前⼩程序语⾔版本所对应的字典变量

varlang=geVersion()

a({

content:lang

})

}

})

xmlxm曹植写的诗七步诗完整 l

{{}}

{{}}

{{Language}}

测试

2.5好了，这样我们就完成了页⾯内容的中⽂切换了，⼤家是否看到了页⾯标题也跟

着换了，这⼀步要怎么做呢？别急，请往下看；

三、页⾯标题动态修改

3.1这⾥⽐较简单只需要⼀⾏代码就可以搞定

igationBarTitle({

title:\"\"

})

3.2这⾥我们把它放到initLanguage⽅法⾥⾯即可

//初始化语⾔

initLanguage(){

//获取当前⼩程序语⾔版本所对应的字典变量

varlang=geVersion()

a({

content:lang

})

//放到这⾥来就⾏了

igationBarTitle({

title:

})

}

3.3这样我们就完成了标题的动态修改，标题也可以进⾏中英切换了

四、底部tarbar导航栏中英切换

上⾯两部分内容都算计较简单，底部tarbar导航栏相对⽐较复杂⼀点；⼤家都知道，我们可以在⼩程序中的⽂件中轻松定义底部导航

栏；但是这样做的话，因为json⽂件是静态的，在⼩程序加载后，就没办法去修改了，这样等于是写死的；所以我们需要使⽤⾃定义的⽅式；具

体看步骤，不要忽略每个步骤细节（很重要）

4.1在中配置我们想要的导航栏，⽂件中写⼊以下代码；

\"tabBar\":{

\"custom\":true,//这⾥⼀定要把custom设置为true，声明为⾃定义导航栏

\"color\":\"#7A7E83\",

\"selectedColor\":\"green\",

\"borderStyle\":\"black\",

\"backgroundColor\":\"#fff\",

\"list\":[

{

\"pagePath\":\"pages/introduct/main/main\",

\"iconPath\":\"static/images/\",

\"selectedIconPath楚山秦山皆白云 \":\"static/images/introduct_\",

\"text\":\"\"//可以写⼊内容，也可以不写~

}，

{

\"pagePath\":\"pages/center/main/main\",

\"iconPath学弈原文翻译 \":\"static/images/\",

\"selectedIconPath\":\"static/images白话文翻译成文言文在线翻译器 /center_\",

\"text\":\"\"//可以写⼊内容，也可以不写~

}

]

},

4.2在根⽬录下创建名称为custom-tab-bar的⽬录（固定名称）,并创建名称为

index的页⾯（固定名称）,index页⾯代码如下：

varapp=getApp()

varlanguageUtil=require(\'../utils/languageUtil\')

Component({

data:{

version:0,

selected:0,

color:\"#7A7E83\",

selectedColor:\"#3cc51f\",

\"list\":[

{

\"pagePath\":\"../../introduct/main/main\",

\"iconPath\":\"../static/images/\",

\"selectedIconPath\":\"../static/images/introduct_\",

\"text\":\"公司介绍\"

},

{

\"pagePath\":\"../../center/main/main\",

\"iconPath\":\"../static/images/\",

\"selectedIconPath\":\"../static/images/center_\",

\"text\":\"个⼈中⼼\"

}

]

},

attached(){

},

methods:{

switchTab(e){

constdata=t

consturl=

//切换导航栏，标识导航栏下标

a({

selected:

})

//(url)

//点击导航栏，跳转到对应页⾯上

Tab({url:url})

}

}

})

页⾯

.tab-bar{

position:fixed;

bottom:0;

left:0;

right:0;

height:48px;

background:white;

display:flex;

padding-bottom:env(safe-area-inset-bot《被收养之后》np tom);

}

.tab-bar-border{

background-color:rgba(0,0,0,0.33);

position:absolute;

left:0;

top:0;

width:100%;

height:1px;

transform:scaleY(0.5);

}

.tab-bar-item{

flex:1;

text-align:center;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

}

.tab-bar-itemcover-image{

width:27px;

height:27px;

}

.tab-bar-itemcover-view{

font-size:10px;

}

踩坑指南：

-tab-bar⽬录放置根⽬录下，⽬录中的⽂件只能使⽤index,当时使⽤其他名字搞了半天才出来，切记切记

中也必须配置⼀样的导航信息，如果配置和custom-tab-bar中不⼀样,或者少则会出现⽆法跳转的情况

4.3在我们的⼩程序页⾯中进⾏配置，打开我们的个⼈中⼼页⾯(介绍页⾯也类似)

我们需要做的就是，当⽤户点击切换按钮时，我们应该把tarbar的配置⽂件换成相对应的语⾔版本，这⾥我们可以使⽤以下命令直接给⼦组件赋

值

if(Bar===\'function\'&&Bar()){

Bar().setData({

list:[]//这⾥直接赋值即可

})

}

4.4我们可以在initLanguage()⽅法中添加以下代码给导航栏附上字典变量值

if(Bar===\'function\'&&Bar()){

Bar().setData({

selected:1,//这个是当前页⾯在导航栏中的下标

list://赋值

})

}

4.5运⾏⼩程序即可看到效果了

这部分内容本来以为挺简单的，但是中间真的遇到很多坑，也是⾃⼰太菜了；希望能够帮到有需要的⼩伙伴！