微信小程序開發：中英文切換能力的簡單實現方法

項目背景，在已經完善的漢語微信小程序基礎上，實現登錄時切換中英文界面的功能，這里只要做前端固定文案部分，接口返回的內容先不考慮。實現代碼如下：

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>

這樣就妥啦！！