微信小程序-中英文切换

1.构建中、英文语言包,将程序中的文本部分进行封装

在主目录下新建一个名为utils的文件夹用于存放供全局使用的语言包,在utils文件夹内新建两个js文件,分别为中文语言包和英文语言包,将所有文本格式的部分都放在里边。在js文件中定义变量,并进行模块化。
在这里插入图片描述
模块只有通过 module.exports 才能对外暴露接口,因此在模块化部分设置用于外部调用变量的接口:

var Chinese = {
  content:"这是中文",
  button:"change to English"
}

module.exports = {
   Content:Chinese 
}

Chinese是变量,是一切文本的封装,也可写多个变量以便调用。Content是外部使用Chinese时的接口。

2.在语言转换界面的js文件中引入语言包,并设置语言转换函数

在js文件中用一个变量来表示语言包,并用require将语言包内容获取至该变量当中

var chinese = require("../../utils/Chinses.js")
var english = require("../../utils/English.js")

设置语言状态变量,表示当前的语言状态:

lanuage:"中文"

将语言状态值赋值到语言包内容获取函数当中,语言包内容获取函数将根据当前的语言状态来选择调用的语言包。

onLoad: function (options) {
    var lastLanuage = this.data.lanuage,
    this.getContent(lastLanuage)   
}

上述代码表示页面加载时的语言状态,调用getContent()函数来起作用。使用changeLanuage()函数后也要进行同样的操作。

changeLanuage:function(){
    var version = this.data.lanuage;
    if(version == "中文"){
        this.setData({
            lanuage:"英文"
        })
    }else{
        this.setData({
            lanuage:"中文"
        })
    }
    var lastLanuage = this.data.lanuage;
    this.getLanuage(lastLanuage)
}

其中getlanuage()函数如下:

getLanuage:function(lastLanuage){
    if(lastLanuage == "中文"){
        this.setData({
            content:chinese.Content
           })
    }else{
        this.setData({
            content:english.Content
        })
    }
}
3.为语言转换界面的wxml文件中使用语言包中的内容

wxml文件中所用的内容直接来源于起js文件。例如显示语言包中的内容:

<view>{{content.content}}</view>
<button bindtap="changeLanuage">{{content.button}}</button>
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值