微信小程序开发：中英文切换能力的简单实现方法

本文主要是介绍微信小程序开发：中英文切换能力的简单实现方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

项目背景，在已经完善的汉语微信小程序基础上，实现登录时切换中英文界面的功能，这里只要做前端固定文案部分，接口返回的内容先不考虑。实现代码如下：

1、首先在微信小程序的根目录下创建“language”文件夹，用于存储语言相关的js文件。用_en.js代表英语，_zh.js代表汉语。

 _en.js代码举例：

const languageMap = {
  "登录": "Login",
  "请输入手机号": "Mobile phone number",
  "密码": "Password",
  "登录说明": "Login instructions"
}

module.exports = {
  languageMap: languageMap
}

 _zh.js代码举例：

const languageMap = {
  "登录": "登录",
  "请输入手机号": "请输入手机号",
  "密码": "密码",
  "登录说明": "登录说明"
}

module.exports = {
  languageMap: languageMap
}

2、在utils文件夹下创建languageUtils.js，目的是写入操作语言的通用方法。

 languageUtils.js：

const app = getApp();

// 获取当前存的语言选择结果，如果没有默认用中文
const languageVersion = function () {
  return wx.getStorageSync('lang') || 'zh';
}

//返回翻译数据
function translate() {
  return require('../language/_' + languageVersion() + '.js').languageMap;
}

//切换语言方法
const changeLanguage= function (langType) {
  if (langType== 1) {
    wx.setStorageSync('lang', 'en')
  } else {
    wx.setStorageSync('lang', 'zh')
  }
}

//抛出方法
module.exports = {
  languageVersion: languageVersion,
  changeLanguage: changeLanguage,
  _lang: translate,
}

切换语言就用小程序自己的Picker组件来操作，比较简单，举个小栗子：

<picker bindchange="changeLang" value="{{langInex}}" range="{{array}}">
    <view class="picker" >
        {{array[langInex]}} <i class="sz szxia"></i>
    </view>
 </picker>

3、正式使用，代码如下

 需要使用页面的Js文件：

//先将js文件引入页面
var lang = require('../../utils/languageUtils');

//生命周期函数
 onShow: function () {
    this.initLanguage();
  },

 //初始化展示语言
  initLanguage() {
    this.setData({
      _lang: lang._lang()
    })
　　
   //把页面的Title值顺便修改一下
　　wx.setNavigationBarTitle({
      title: this.data._lang["登录"],
    })
  }

 页面的wxml文件：

  <form bindsubmit="formSubmit">
    <view class="wp100">
      <input class="loginInput" value="{{mobile}}" name="mobile" focus="{{mobileFocus}}" type="number" maxlength="11"
        placeholder="{{_lang['请输入手机号']}}" />
    </view>
    <view class="wp100 pt20 pr">
      <input class="loginInput wp100" focus="{{pwdFocus}}" name="pwd" type="password" placeholder="{{_lang['密码']}}" />
    </view>
    <view class="wp100 pt50">
      <button class="loginBtn" formType="submit">{{_lang["登录"]}}</button>
    </view>
  </form>

这样就妥啦！！

这篇关于微信小程序开发：中英文切换能力的简单实现方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！