如何實現(xiàn)微信小程序國際化探索

export default {
 common: {
 language: '語言',
 chinese: '中文',
 english: '英語',
 },
 tabBarTitles: ['主頁', '論壇', '我的'],
 navTitle: {
 home: '主頁',
 forum: '論壇',
 mine: '我的',
 setting: '設(shè)置'
 },
 home: {
 motto: '我們寧愿擁有一個不完美的變革，也不愿看到一個沒有希望的未來',
 respect: '致勇者',
 getUserInfo: '獲取頭像昵稱'
 },
 forum: {
 forumModule: '我是論壇模塊',
 tip: '下面是一個組件，用來展示組件的國際化配置'
 },
 comment: {
 title: '評論組件',
 msg: '網(wǎng)絡一線牽，珍惜這段緣'
 },
 mine: {
 title: '這是我的頁面',
 toNewPage: '跳轉(zhuǎn)到新頁面'
 },
 setting: {
 title: '我是設(shè)置頁面'
 }
}

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'
 },
 mine: {
 title: 'This is mine page',
 toNewPage: 'Go to new page'
 },
 setting: {
 title: 'I am setting page'
 }
}

import zh from '../i18n/zh-CN.js'
import en from '../i18n/en-US.js'
import Constants from '../constants/Constants';

export default{

 //初始化語言設(shè)置。在 app.js 里調(diào)用這個方法。
 initLang(){
 //先獲取是不是已存在語言的設(shè)置
 let lang = wx.getStorageSync('lang')
 if(!lang){
  //如果不存在,設(shè)置默認語言為中文
  this.setLang(Constants.langCN)
 }
 },

 //設(shè)置語言
 setLang(lang){
 try{
  wx.setStorageSync('lang', lang)
 }catch(e){
  console.log('設(shè)置語言失敗', e)
 }
 },

 //獲取語言設(shè)置
 getLang(){
 try{
  let lang = wx.getStorageSync('lang')
  return lang;
 }catch(e){
  console.log('獲取語言設(shè)置失敗', e)
 }
 },

 //獲取當前語言下的資源文件
 getLangSrc(){
 let lang = this.getLang();
 if(lang === Constants.langCN){
  return zh;
 } else if(lang === Constants.langEN){
  return en;
 }else{
  return zh;
 }
 },

 //設(shè)置 NavigationBarTitle
 setNavigationBarTitle(title){
 wx.setNavigationBarTitle({
  title: title
 })
 },

 /**
 * 設(shè)置 tabBar。因為 tabBar 是在 app.json 里寫死的，需要使用 wx.setTabBarItem
 * 循環(huán)設(shè)置 tabBar
 */
 setTabBarLang(){
 let tabBarTitles = this.getLangSrc().tabBarTitles;
 console.log('tabBarTitles', tabBarTitles)
 tabBarTitles.forEach((item, index) => {
  console.log(item, index)
  wx.setTabBarItem({
  index: index,
  text: item,
  success: (res) => {
   console.log('setTabBarItem success', res)
  },
  fail: (err) => {
   console.log('setTabBarItem fail', err)
  }
  });
 });
 },
}

Constants.js

/**
 * 保存項目中的常量
 */
export default{
 //中文編碼
 langCN: 'zh-CN',
 //英文編碼
 langEN: 'en-US',
}

//初始化國際化語言設(shè)置
import LangUtils from './utils/LangUtils'

App({
 onLaunch: function () {
 // 國際化的初始化
 LangUtils.initLang();
 LangUtils.setTabBarLang();
 }
})

// pages/setting/setting.js
import LangUtils from '../../utils/LangUtils'
let langSrc = LangUtils.getLangSrc()

Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 lang: {
  ...langSrc.setting
 }
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function () {
 this.setLanguage();
 },

 /**
 * 重新設(shè)置語言
 */
 setLanguage() {
 langSrc = LangUtils.getLangSrc();
 this.setData({
  lang: {
  ...langSrc.setting
  }
 })
 // 設(shè)置 NavigationBarTitle
 LangUtils.setNavigationBarTitle(langSrc.navTitle.setting);
 }
})

<view class="setting-container">
	<text class="title">{{lang.title}}</text>
</view>

// pages/forum/components/comment.js
import LangUtils from '../../../../utils/LangUtils'
let langSrc = LangUtils.getLangSrc();

Component({
 data: {
 lang: {
  ...langSrc.comment
 }
 },

 pageLifetimes: {
 // 組件所在頁面的生命周期函數(shù)
 show: function () { 
  console.log('page show---')
  this.setLanguage();
 },
 },

 /**
 * 組件的方法列表
 */
 methods: {
 /**
  * 重新設(shè)置語言
  */
 setLanguage() {
  langSrc = LangUtils.getLangSrc();
  this.setData({
  lang: {
   ...langSrc.comment
  }
  })
 }
 }
})

//index.js
//獲取應用實例
const app = getApp()

import Constants from '../../constants/Constants'
// 獲取對應語言的資源文件
import LangUtils from '../../utils/LangUtils'
let langSrc = LangUtils.getLangSrc();

// 語言選項
const LANGUAGE_OPTIONS = [{
 key: Constants.langCN,
 value: '中文'
 },
 {
 key: Constants.langEN,
 value: 'English'
 }
]

Page({
 data: {
 // 通過解構(gòu)賦值將 common 和 home 下的變量賦值給 lang。最好每個模塊建一個對象
 // 對象里的屬性不宜過多，否則在 data 里放入太多內(nèi)容會影響性能，用到什么放什么。
 lang: {
  ...langSrc.common,
  ...langSrc.home
 },
 langOptions: LANGUAGE_OPTIONS,
 index: 0
 },

 onLoad: function () {
 // 根據(jù)當前語言設(shè)置 picker 默認選中的值
 let lang = LangUtils.getLang();
 this.setData({
  index: lang === Constants.langCN ? 0 : 1
 })
 },
 onShow: function () {
 //每次 onShow 重新設(shè)置語言，以防語言更新
 this.setLanguage();
 },

 getUserInfo: function (e) {
 console.log(e)
 app.globalData.userInfo = e.detail.userInfo
 this.setData({
  userInfo: e.detail.userInfo,
  hasUserInfo: true
 })
 },

 /**
 * 選擇語言變化回調(diào)函數(shù)
 */
 onLanguageChange(e) {
 const index = e.detail.value
 console.log(e)
 this.setData({
  index: index
 })
 // 更改語言
 LangUtils.setLang(this.data.langOptions[index].key);
 // 重新設(shè)置 tabBar 的語言
 LangUtils.setTabBarLang();
 this.setLanguage();
 },

 /**
 * 重新設(shè)置語言
 */
 setLanguage() {
 langSrc = LangUtils.getLangSrc();
 this.setData({
  lang: {
  ...langSrc.common,
  ...langSrc.home
  }
 })
 // 設(shè)置 NavigationBarTitle
 LangUtils.setNavigationBarTitle(langSrc.navTitle.home);
 }
})