微信小程序国际化 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序国际化

发表时间:2020-11-4

发布人:葵宇科技

浏览次数:60

只是替换静态文本,就是简单的键值匹配,按照这个流程,保证很快上手国际化,语言切换采用的是登录微信小程序时 识别系统语言做出中英文切换,并不是点击切换


1、在 utils 目录下新建一个 i18n.js 文件

// /utils/i18n.js
let T = {
    locale: null,
    locales: {},
    langCode: ['zh-Hans', 'en']
}

T.registerLocale = function (locales) {
    T.locales = locales;
}

T.setLocale = function (code) {
    T.locale = code;
}

T.setLocaleByIndex = function(index) {
    T.setLocale(T.langCode[index]);
}


T.getLanguage = function() {
    return T.locales[T.locale];
}

export default T

2、定义中英文模板

// /utils/locales.js
export default {
    'zh-Hans': {
        //------- 联系人 -----------
        "chineseName": "中文姓名",
        "englishName": "英文姓名",
        "gender": "性别",
        "birthday": "生日",
        "specialAnniversary": "特殊纪念日",
        "hobby": "爱好",
        "description": "其他说明",
        "department": "部门",
        "position": "职务",
        "mobilePhone": "手机号",
        "wechat": "微信号",
        "otherContactMethod": "其他联系方式",
        "createBy": "新增人",

        //------- 联系人 end --------

    },
    'en': {
    
        //------- 联系人 -----------
        "chineseName": "CHINESE NAME",
        "englishName": "ENGLISH NAME",
        "gender": "GENDER",
        "birthday": "BIRTHDAY",
        "specialAnniversary": "SPECIAL ANNIVERSARY",
        "hobby": "HOBBY",
        "description": "DESCRIPTION",
        "department": "DEPARTMENT",
        "position": "POSITION",
        "mobilePhone": " MOBILE PHONE",
        "wechat": "WECHAT",
        "otherContactMethod": "OTHER CONTACT METHOD",
        "createBy": "CREATE BY",

        //------- 联系人 end --------

    }
}

3、定义 events.js

// /utils/events.js
let events = {};

function>import locales from './utils/locales'
import T from './utils/i18n'
import event from './utils/event'

T.registerLocale(locales);  // (1)
T.setLocaleByIndex(wx.getStorageSync('langIndex') || 0); // (2)
wx.T = T;  // (3)


onLaunch:function(){
wx.getSystemInfo(){

success(res){

// 判断系统语言 确定小程序语言
if ( res.language === 'zh_CN') {
  wx.T.setLocaleByIndex(0);
  event.emit('languageChanged');
  wx.setStorage({
    key: 'langIndex',
    data: 0
  })
}else{
  wx.T.setLocaleByIndex(1);
  event.emit('languageChanged');
  wx.setStorage({
    key: 'langIndex',
    data: 1
  })
}


'''''
}}

5、实际应用

在应用的时候,首先修改 js , 初始化一下语言模板

import event from '../../utils/event'

data: {
  language: '',
   .........
}


onLoad: function(){
.....
// 国际化
this.setLanguage();  // (1)
event.on("languageChanged", this, this.setLanguage); // (2)
......

}


.....
// 国际化
setLanguage() {
  this.setData({
    language: wx.T.getLanguage()
  });
},
......

然后在 wxml 中引用语言模板

{{language.chineseName}}

这样在中文系统下,这里展示的就是 配置在loacles 里面的 中文姓名,其他系统语言 展示的是 CHINESE NAME

参考资料:https://upupming.site/2018/07/23/mini-program-i18n/#%E5%88%9B%E5%BB%BA%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%E5%B9%B6%E6%B3%A8%E5%86%8C%E5%88%B0-wx-%E4%B9%8B%E4%B8%8B

相关案例查看更多