微信小程序使用miniprogram-i18n-plus实现国际化语言的记录

参考的文档：
miniprogram-i18n-plus
https://www.jianshu.com/p/f34f3d6d1114

基础环境：原生微信小程序，ts

需求在某页面切换中英

使用这个插件时遇到的问题

1. 这个不可以像”共8条数据“ totalData: A total of ${num} pieces of data,不可以插入翻译（我没成功）。
2. i18nInstance.toggleLanguage(locale: string)在使用的时候一直报错，无法使用所以我直接使用 i18nInstance.setLocale()方法
3. 我是使用在data中data: {i18n: i18nInstance.getLanguage()}然后在onLoad和onShow重新setData让他可以拿到最新语言
4. 但是其实在onLoad方法里调用i18nInstance.effect(this);,也是可以的，但是它会报$language undefined，只要在data中$language: ''定义一下就可以使用了，也需要在onShow方法调用,然后就使用，比如–$language.login -登录（翻译例子）

开始使用

已有package.json 文件：

npm install miniprogram-i18n-plus -S

生成一个miniprogram-i18n-plus文件夹在node_modules文件里，然后在工具栏-工具-构建npm，然后看到miniprogram_npm里面有一个miniprogram-i18n-plus。
然后就是下载处理成功。

app.ts页面

// 需要到index页面，不然我的会报错
import i18nInstance from "./miniprogram_npm/miniprogram-i18n-plus/index";
import setSchoolLang from './lang/index' // 修改语言的，因为我这是学校类的名字就不改了
let lang = ""; // zh_CN en_US 
onLaunch() {
  // 判断有无存储在storage 的语言，没有的话就获取系统当前语言是什么语言，有就拿已存储的
  if(wx.getStorageSync('lang')) {
    lang = wx.getStorageSync('lang')
  } else {
  	wx.getSystemInfo({success:(res)=> {
      if(res.language === 'en') {
        lang = 'en_US'
      }else {
        lang = 'zh_CN'
     }
  wx.setStorageSync('lang', lang)
  }})
 }
setSchoolLang();
...
}

语言新建文件夹来存放

// lang-index.ts
import i18nInstance from "../miniprogram_npm/miniprogram-i18n-plus/index";
import enLocale from '../lang/en';
import zhLocale from '../lang/zh';
export default function setSchoolLang () {
  const locales = {
    zh_CN: {
      ...zhLocale
    },
    en_US: {
      ...enLocale
    },
  };
   // 更改语言
  let lang = wx.getStorageSync('lang')
  i18nInstance.setLocale(lang);
  i18nInstance.loadTranslations(locales);
}

在page中引用

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

data: {
  i18n: i18nInstance.getLanguage(),
}
/*
* 因为是页面直接点击按钮切换
* 所以在data的语言就只是初始值
* 还要在`onLoad`和`onShow`-不然切换页面时发现切换语言失败
*/
this.setData({
  i18n: i18nInstance.getLanguage()
})

如果需要更改自带的标题，在onLoad方法中

const i18n = i18nInstance.getLanguage();
wx.setNavigationBarTitle({
   title: i18n.login // login是语言文件自己定义的
})

在html中使用

<view>{{i18n.login}}</view>

在Component中引用

import i18nInstance from "../../../miniprogram_npm/miniprogram-i18n-plus/index";// 自己存放的位置
// 初始值
data: {
  i18n: i18nInstance.getLanguage(),
}

// 当前组件是满页的在初始的生命周期调用
lifetimes: {
    attached() {
      this.setData({
        i18n: i18nInstance.getLanguage(),
      })
    },
  },

// 当前页面是弹窗
// 在监听显示时调用
properties: {
 show: {
 	type: Boolean,
 	value: false,
 	observe(bol: boolean) {
 	  if(bol) {
 	  	...
 	  	this.setData({
          i18n: i18nInstance.getLanguage(),
       })
       ...
 	  }
 	}
 }
}

在切换语言的方法里，需要注意

changelang() {
  ...
  // 本地存储当前修改语言
  wx.setStorageSync('lang', lang)
  // 调用设置语言方法
  setSchoolLang();
 }

tabbar要切换语言

在utils创建一个文件

// 设置tabbar文字
export const setTabbarLang  = () => {
  if(storage.getLang() === 'en_US') {  
    wx.setTabBarItem({
     index: 0,
     text: 'Index',
   })
   wx.setTabBarItem({
     index: 1,
     text: 'Main',
   })
   wx.setTabBarItem({
     index: 2,
     text: 'Other',
   })
 }else {
  wx.setTabBarItem({
    index: 0,
    text: '首页',
  })
  wx.setTabBarItem({
    index: 1,
    text: '主要',
  })
  wx.setTabBarItem({
    index: 2,
    text: '其他',
  })
 }
}

然后在tabbar对应的页面onShow方法里分别引入这个setTabbarLang 再调用就可以了。