小程序模板網(wǎng)

小程序國際化實現(xiàn)機制

發(fā)布時間:2018-10-15 17:26 所屬欄目:小程序開發(fā)教程

需求

 

可手動設置使用語言

根據(jù)不同的語言顯示不同的語言文字(目前是支持中英文,如需其他語言,可直接配置即可) 
如果沒有配置相應語言的信息,則使用默認的數(shù)據(jù) 
國際化分為文字和圖片(有的圖片上有文字信息)兩類 
限制因素

 

 

地圖上的圖片(如markers、controls、polyline等),不能使用網(wǎng)絡圖片,只能使用本地圖片;所以圖片的話分為本地圖片和網(wǎng)絡圖片兩種

 

實現(xiàn)機制

 

目錄結(jié)構(gòu)信息

res 
│ resUtils.js 
│ 
├─values 
│ img.js 
│ strings.js│ 
├─values_en 
│ img.js 
│ strings.js 
│└─values_zh_CN 
strings.js 
values中是默認的是數(shù)據(jù)配置,values_en是英文壞境下的配置,values_zh_CN中文簡體環(huán)境下的配置 
后面如果需要配置其他的語言(如zh_TW,中文繁體,臺灣地區(qū)),只需要新建文件名 values_zh_TW即可 
resUtils.js是國際化的核心代碼位置,這個文件會根據(jù)不同的語言來引用引用對應的文件; 
首次如果沒有設置過語言,或跟從當前手機的語言環(huán)境,后面如果設置過語言的話,跟從設置的語言來(暫定,具體的需求還未出) 
具體配置

文字國際化,直接在對應的環(huán)境下strings.js中添加要用的文字信息,文件會自動導出

 

				
  1. module.exports = {
    LOGIN_STATUS_INVALID: '登錄失效',
    LOGIN_LOG_AGAIN: '請重新登錄',
    }
    module.exports = {
    LOGIN_STATUS_INVALID: 'Login status invalid',
    LOGIN_LOG_AGAIN: 'Log in again',
    }

圖片國際化(分為本地和網(wǎng)絡圖片兩種);  網(wǎng)絡圖片直接調(diào)用getImg('drawableName.png'),即可;  本地圖片,使用絕對路徑即可

 

				
  1. /**
    * 默認環(huán)境圖片配置
    * @author Shirley.jiang
    */
    const ICON_URL = 'https://***';
    let env = 'zh_CN';
    let getImg = (name) => {
    return ICON_URL + '/' + env + '/' + name;
    }
    
    module.exports = {
    IC_BTN_PHONE: getImg('btn_phone.png'), // 網(wǎng)絡圖片
    ICON_LOCATION: '/imgs/icon_location.png', // 本地圖片
    }
    /**
    * en環(huán)境圖片配置
    * @author Shirley.jiang
    */
    const ICON_URL = 'https://***';
    let env = 'en';
    let getImg = (name) => {
    return ICON_URL + '/' + env + '/' + name;
    }
    
    module.exports = {
    IC_CHANGE_LANGUAGE: getImg('ic_change_language.png')
    };

使用方式

 

				
  1. const resUtils = require('../../res/resUtils.js'); // 引入
    
    resUtils.strings.LOGIN_STATUS_INVALID; // 文字調(diào)用
    
    resUtils.imgs.IC_CHANGE_LANGUAGE; // 圖片調(diào)用
 

注意事項

因wxml 文件不能應用js文件,所以數(shù)據(jù)全部通過data進行中轉(zhuǎn)  data的加載比生命周期要早,導致切換語言的時候,data數(shù)據(jù)沒有更新;所以在Page和Component中的ready方法之后,手動setData一次(因未找到更好的解決方案,暫定這種方式)  附帶[resUtils.js]代碼

 

				
  1. const localStorage = require('../utils/LocalStorage.js');
    /**
    * 國際化* @author Shirley.jiang
    */
    
    class ResUtils {
    static mInstance;
    
    mStrings = {};
    
    mImgs = {};
    
    mEnv;
    
    static getInstance() {
    if (!ResUtils.mInstance) {
    ResUtils.mInstance = new ResUtils();
    }
    return ResUtils.mInstance;
    }
    
    init(env) {
    this.mEnv = env;
    this.initStrings();
    this.initImgs();
    }
    /**
    * 引用字符配置
    */
    initStrings() {
    this.mStrings = {};
    let strings;
    let defaultStrings;
    
    try {
    strings = require('./values_' + this.mEnv + '/strings.js');
    } catch (err) { }
    try {
    defaultStrings = require('./values/strings.js');
    } catch (err) { }
    
    // 初始化默認的數(shù)據(jù)
    for (let key in defaultStrings) {
    if (!defaultStrings.hasOwnProperty(key)) {
    continue;
    }
    this.mStrings[key] = defaultStrings[key];
    }
    
    // 如果當前語言文件中定義的有,則直接覆蓋
    for (let key in strings) {
    if (!this.mStrings.hasOwnProperty(key)) {
    continue;
    }
    this.mStrings[key] = strings[key];
    }
    }
    
    /**
    * 引用圖片配置
    */
    initImgs() {
    this.mImgs = {};
    let imgs;
    let defaultImgs;
    
    try {
    imgs = require('./values_' + this.mEnv + '/img.js');
    } catch (err) { }
    try {
    defaultImgs = require('./values/img.js');
    } catch (err) { }
    
    // 初始化默認的數(shù)據(jù)
    for (let key in defaultImgs) {
    if (!defaultImgs.hasOwnProperty(key)) {
    continue;
    }
    this.mImgs[key] = defaultImgs[key];
    }
    
    // 如果當前語言文件中定義的有,則直接覆蓋
    for (let key in imgs) {
    if (!this.mImgs.hasOwnProperty(key)) {
    continue;
    }
    this.mImgs[key] = imgs[key];
    }
    }
    
    /**
    * 切換語言
    * @param {string} env 語言值
    */
    changeLanguage(env) {
    localStorage.setEnv(env);
    this.init(env);
    }
    }
    
    /**
    * zh_CN 中文* zh_TW 中文繁體(臺灣)
    * en 英文環(huán)境*/
    
    let env = localStorage.getEnv();
    ResUtils.getInstance().init(env);
    module.exports = ResUtils.getInstance();


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24879.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢