微信小程序国际化探索（附源码地址）

随着小程序应用越来越广泛，国际化支持逐渐成了刚需。

官方文档给出了一个 国际化方案，但觉得配置起来稍微有点复杂，对项目结构还有一定的要求。如果是旧项目改动成本太大，遂决定自己实现一个小程序国际化方案。

源码地址：https://github.com/cachecats/miniprogram-i18n

一、项目结构

整体目录结构如下图：

• assets 存放资源文件，如图片
• constants 存放项目中用到的常量
• i18n 存放语言文件，中文是 zh-CN.js 英文是 en-US.js ，如果还需要支持其他语言再建一个 js 即可
• pages 存放业务逻辑代码
• utils 存放工具类。LangUtils 是封装的国际化工具类。

二、工具类封装及语言包准备

2.1 语言包准备

i18n 目录下的各语言包结构要一致，即对象的 key 保持一致，value 是对应的语言文本。

建议每个小模块分为一个对象，单个对象的内容不宜过多。

zh-CN.js

export default {
   
  common: {
   
    language: '语言',
    chinese: '中文',
    english: '英语',
  },
  tabBarTitles: ['主页', '论坛', '我的'],
  navTitle: {
   
    home: '主页',
    forum: '论坛',
    mine: '我的',
    setting: '设置'
  },
  home: {
   
    motto: '我们宁愿拥有一个不完美的变革，也不愿看到一个没有希望的未来',
    respect: '致勇者',
    getUserInfo: '获取头像昵称'
  },
  forum: {
   
    forumModule: '我是论坛模块',
    tip: '下面是一个组件，用来展示组件的国际化配置'
  },
  comment: {
   
    title: '评论组件',
    msg: '网络一线牵，珍惜这段缘'
  },
  mine: {
   
    title: '这是我的页面',
    toNewPage: '跳转到新页面'
  },
  setting: {
   
    title: '我是设置页面'
  }
}

en-US.js

export default {
   
  common: {
   
    language: 'Language',
    chinese: 'Chinese',
    english: 'English',
  },
  tabBarTitles: ['Home', 'Forum', 'Mine'],
  navTitle: {
   
    home: 'Home',
    forum: 'Forum',
    mine: 'Mine',
    setting: 'setting'
  },
  home: {
   
    motto: 'We would rather have an imperfect change than see a hopeless future',
    respect: 'to warrior',
    getUserInfo: 'Get avatar nickname'
  },
  forum: {
   
    forumModule: 'I am forum module',
    tip: 'The following is a component to show the international configuration of the component'
  },
  comment: {
   
    title: 'Comment Components',
    msg: 'The network leads, cherish this relationship'