原生微信小程序使用?miniprogram-i18n-plus

第一步：

npm install miniprogram-i18n-plus -S

安裝完成后，會在項目文件文件夾?node_modules文件里生成?miniprogram-i18n-plus，?然后在工具欄-工具-構建npm，然后看到miniprogram_npm里面有一個miniprogram-i18n-plus

第二步：

在app.js文件中設置? 進入小程序判斷有無存儲在storage 的語言，沒有的話就獲取系統當前語言是什么語言，有就拿已存儲設置得語言

import storage from './utils/storage';   // 自定義得緩存文件
import setLanguage from "./i18n/index";  // 引入得 miniprogram-i18n-plus 處理得文件
let language = "en_US"; // zh_CN en_US   // 默認得語言
App({onLaunch() {// 判斷有無存儲在storage 的語言，沒有的話就獲取系統當前語言是什么語言，有就拿已存儲的if(storage.get('language')) {language = storage.get('language')} else {wx.getSystemInfo({success:(res)=> {if(res.language === 'en') {language = 'en_US'}else {language = 'zh_CN'}storage.set('language', language)}})}setLanguage.setLanguage();},globalData: {statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],}
})

在文件中創建一個i18n文件夾，里面創建index.js文件和中文語言文件zh.js和英文文件en.js,

index.js文件代碼

import i18nInstance from "../miniprogram_npm/miniprogram-i18n-plus/index";  //引入得插件
import storage from '../utils/storage';  // 緩存文件
import en_US from './en';                // 英文文件
import zh_CN from './zh';                // 中文文件
function setLanguage () {const locales = {...zh_CN,...en_US};// 更改語言let language= storage.get('language')  // 語言緩存i18nInstance.setLocale(language);        i18nInstance.loadTranslations(locales);
}
module.exports = {setLanguage: setLanguage
}

en.js 文件?

const languageMap = {"title": 'Must-Read for Beginners ',"tips": 'Hot Topic ',
}
module.exports = {en_US: languageMap
}

zh.js 文件

const languageMap = {title: '新手必讀',tips: '熱門話題',
}
module.exports = {zh_CN: languageMap
}

第三步：

在文件中使用 需要引入??miniprogram-i18n-plus? 在data 中定義?

i18n: i18nInstance.getLanguage()

import { i18nInstance } from "../../miniprogram_npm/miniprogram-i18n-plus/index";Page({data: {i18n: i18nInstance.getLanguage()}
})

也可以使用官網得方法? 在onLoad 函數中設置

Page({data: {language: {},},onLoad() {i18nInstance.effect({context: this,callback: this.setLanguage,});},setLanguage() {this.setData({language: i18nInstance.getLanguage(),});},
});

最后：

在文件中調用??index.wxml??

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