国际化（微信小程序+TS）-Toy模板网

这篇具有很好参考价值的文章主要介绍了国际化（微信小程序+TS）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、环境配置

1、安装根目录依赖

2、安装minprogram依赖

3、新建gulpfile文件

二、i18文本定义

1、中文 zh-CN.json

2、英文 en-US.json

三、使用

1、WXML中的使用

2、Javascript中的使用

3、中英文切换

四、打包编译

1、配置TS

2、配置project.config.js

3、打包

参考文档

一、环境配置

目录结构示例

├── dist               // 小程序构建目录
├── gulpfile.js
├── node_modules
├── package.json
└── miniprogram                // 小程序源文件目录
|   ├── app.js
|   ├── app.json
|   ├── app.wxss
|   ├── i18n           // 国际化文本目录
|   |   ├── en-US.json
|   |   └── zh-CN.json

1、安装根目录依赖

在项目根目录运行以下命令安装 gulp 及 miniprogram-i18n 的 gulp 插件。

npm i -D gulp @miniprogram-i18n/gulp-i18n-locales @miniprogram-i18n/gulp-i18n-wxml

2、安装minprogram依赖

1）初始化仓库 npm init

一直回车，最后输入yes，minprogram中生成package.json文件，即初始化成功，此时即可安装依赖。

国际化（微信小程序+TS）

2）安装依赖。

在 miniprogram下进入终端，输入以下命令

npm i -S @miniprogram-i18n/core

3）构建npm

小程序开发工具左上角>工具>构建npm，构建成功之后minprogram中会生成一个miniprogram_npm这个文件夹，这个时候就已经可以使用依赖了。

3、新建gulpfile文件

在根目录创建gulpfile.js文件

国际化（微信小程序+TS）

复制以下代码

/* eslint-disable require-jsdoc */
const {src, dest, series} = require('gulp');
const gulpI18nWxml = require('@miniprogram-i18n/gulp-i18n-wxml');
const gulpI18nLocales = require('@miniprogram-i18n/gulp-i18n-locales');

function mergeAndGenerateLocales() {
  return src('miniprogram/i18n/*.json')
      .pipe(gulpI18nLocales({defaultLocale: 'zh-CN', fallbackLocale: 'zh-CN'}))
      .pipe(dest('dist/i18n/'));
}

function transpileWxml() {
  return src('miniprogram/**/*.wxml')
      .pipe(gulpI18nWxml({
        wxsPath: 'miniprogram/i18n/locales.wxs',
      }))
      .pipe(dest('dist/'));
}

function copyToDist() {
  return src(['miniprogram/**/*', '!miniprogram/**/*.wxml', '!miniprogram/i18n/*.json'])
      .pipe(dest('dist/'));
}

exports.default = series(copyToDist, transpileWxml, mergeAndGenerateLocales);

二、i18文本定义

在minprogram中新建i18n文件夹，新建相应的json文件（内容为空时，必须有一个{}，否则报错）

（ps：目前 miniprogram-i18n 仅支持纯文本及文本插值，后续会对其他 i18n 特性进行支持）

1、中文 zh-CN.json

// i18n/zh-CN.json
{
  "cc": "超",
  "withdata": "{value}超"
}

2、英文 en-US.json

// i18n/en-US.json
{
  "cc": "chao",
  "withdata": "{value} chao"
}

三、使用

1、WXML中的使用

直接通过 t（'cc'）使用即可

<view>{{ t('cc') }}</view>
<view>{{t('cc',{value：'kk'})}}</view>

2、Javascript中的使用

先引入，然后通过 i18n.t（'cc'） 直接使用即可

import { getI18nInstance } from '@miniprogram-i18n/core'
const i18n = getI18nInstance()

3、中英文切换

setLocale 设置当前语言

getLocale 获取当前语言

getFallbackLocale 获取备选语言

onLocaleChange（（）=> {}）语言改变时触发的回调

import { I18nPage } from '@miniprogram-i18n/core'
I18nPage({
  onLoad() {
    // 语言切换时触发
    this.onLocaleChange((locale) => {
      // 获取当前语言
      console.log('current locale:', this.getLocale(), locale)
    })
    // 设置中文
    this.setLocale('zh-CN')
  },
   
  toggleLocale() {
    // 切换语言
    this.setLocale(
      this.getLocale() === 'zh-CN' ? 'en-US' : 'zh-CN'
    )
  },
})

四、打包编译

1、配置TS

打开文件：typings>types>index.d.ts，在最后一行注入以下代码

（declare就是告诉TS编译器你担保这些变量和模块存在，并声明了相应类型，编译的时候不需要提示错误）

declare module '@miniprogram-i18n/core'

2、配置project.config.js

将minprogram修改为dist

国际化（微信小程序+TS）

3、打包

1）在根目录的package.json文件中添加命令 “build”：“gulp”

国际化（微信小程序+TS）

2）打开终端，输入npm run build

国际化（微信小程序+TS）

3）完成

注意：修改miniprogram代码的内容后，重新npm run build即可。

参考文档

https://github.com/wechat-miniprogram/miniprogram-i18nhttps://github.com/wechat-miniprogram/miniprogram-i18n

一键完成小程序国际化 | 微信开放社区本文介绍了一个用于小程序国际化的工具https://developers.weixin.qq.com/community/develop/article/doc/000aea41d44be836fbf882e845b813文章来源地址https://www.toymoban.com/news/detail-484464.html

到了这里，关于国际化（微信小程序+TS）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！