微信小程序国际化 miniprogram-i18n-plus

需求：项目需要加语言国际化功能；

网上一般可以搜到的两种方案，一种是微信的 miniprogram-i18n，一种是大佬写的 miniprogram-i18n-plus；微信的 miniprogram-i18n 使用有点麻烦，可自行了解；这里只记录 miniprogram-i18n-plus 的使用方法（在大佬 git 文档的基础上稍作补充，可结合本文与大佬的git文档一起看），避免以后继续踩坑；

第一步：
检查项目中是否有 package.json 文件，如果没有的话，需要在微信开发工具终端中使用命令行： npm init 来生成 package.json 文件，如果有该文件，可以跳过这步执行第二步；

npm init

执行命令期间需要按几次回车键

image.png

第二步
继续在微信开发者工具终端中执行命名行 npm install miniprogram-i18n-plus -S ；执行完成后，会生成一个 node_modules 文件；

npm install miniprogram-i18n-plus -S

第三步：
生成 node_modules 文件后，需要点开开发工具的工具栏；工具 -> 构建 npm

image.png

npm构建成功后，又会生成一个 miniprogram_npm 文件

image.png

构建不成功的同学可以参考下这个方案（https://blog.csdn.net/Mitin_/article/details/125929168）修改 prject.config.json 文件的配置项；

以上步骤均完成，就可以根据文档中的说明，引用文件，调用方法了；
在 app.js 文件中写入以下方法，初始化语言展示设置：

// app.js
// 以下是git文档中的引入路径，我的需要再多引入一层 index（import i18nInstance from "./miniprogram_npm/miniprogram-i18n-plus/index";） 否则会报错，大家可以根据自己的情况看看；
import i18nInstance from "./miniprogram_npm/miniprogram-i18n-plus";

App({
  onLaunch() {
    // 需要展示的文字内容
    const locales = {
      zh_CN: {
        test: "测试",
      },
      en_US: {
        test: "Test",
      },
    };
    // 可根据系统语言来动态设置
    //  ******重点*****： 这里设置的字符串内容（zh_CN  en_US），要与上面 locales 对象中写的对应（大小写，下划线均要一模一样），如果有错误，会报错
    // let lang = wx.getAppBaseInfo().language
    // let resultL = lang.toLowerCase().includes('zh_cn') ? 'zh_CN' : 'en_US'
    // i18nInstance.setLocale(resultL);
   
    i18nInstance.setLocale("zh_CN");
    i18nInstance.loadTranslations(locales);
  },
});

在需要使用的页面中：
index.js

// index.js

import i18nInstance from "./miniprogram_npm/miniprogram-i18n-plus";

Page({
  onLoad() {
    i18nInstance.effect(this);
  },
});

index.wxml

<view>{{ $language.test }}</view>

补充：大佬的git文档中并没有说，怎么处理 js 文件中的文字，即在 js 中修改 navigationBarTitleText
index.js

import i18nInstance from "../../miniprogram_npm/miniprogram-i18n-plus/index";

Page ({
    
  data: {
   
  },

onLoad: function (options) {
     
   i18nInstance.effect(this);

    wx.setNavigationBarTitle({
      title: $language.test,
    })
  }
})

(以上写法会报错： VM5282 WAService.js:1 ReferenceError: $language is not defined)

wxml 文件中可以使用 $language 来调用文字，但是 js 中会报错；

解决办法：
直接使用 i18nInstance.getLanguage() 方法来获取当前的语言对象，不使用原先的 i18nInstance.effect(this) 方式
index.js

import i18nInstance from "../../miniprogram_npm/miniprogram-i18n-plus/index";

Page ({
    
  data: {
     i18nL: i18nInstance.getLanguage()
  },

onLoad: function (options) {
     
    wx.setNavigationBarTitle({
      title: this.data.i18nL.test,
    })
  }
})

wxml 文件也需要做出相应的改变
index.wxml

<view>{{ i18nL.test }}</view>

最后编辑于：2023.04.20 08:55:45