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


    效果图:

    点击按钮后

    步骤:

    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>
  • 相关阅读:
    poj2346
    poj3748
    poj1205
    PostThreadMessage 使用注意问题
    CBitmap Detach DeleteObject关系
    音视频编码技术与格式大全
    利用 DirectShow 开发自己的 Filter
    VC+DirectShow对视频进行图片处理VC教程电脑教程之家.htm
    Directx报错01
    深圳超多维光电子有限公司
  • 原文地址:https://www.cnblogs.com/cff2121/p/9319082.html
Copyright © 2020-2023  润新知