• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序--中英文切换(1)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果图:

点击按钮后

步骤:

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>

 源代码:

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

//模块化
module.exports = {
  content: chinese,
}

//英文语言包
var English = {
  content: "this is english",
  button: "修改为中文",
}


//模块化
module.exports = {
  content: English
}
//third.js
var chinese = require("../../utils/Chinses.js")
var english = require("../../utils/English.js")

Page({
  data: {
       language:"中文",
  },

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

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

    var lastLanuage = this.data.language;
    this.getContent(lastLanuage);
  },

   getContent: function (lastLanuage) {
      if (lastLanuage == "中文") {
      this.setData({
        content: chinese.content
      })
    } else {
      this.setData({
        content: english.content
      })
    }
  }
}
//third.wxml
<view>{{content.content}}</view>

<button bindtap=\'changeLanuage\'>{{content.button}}</button>

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序--中英文切换(2)发布时间:2022-07-18
下一篇:
微信小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap