微信小程序实现多语言

前言

在开发海外版小程序时，碰到客户提出需要多语言。于是自己捣鼓了一下，在这里记录和分享。

一、先创建语言包

//zh.js

export default {
  index:{
    site: '选择地点'
  }
} 

//en.js

export default {
  index:{
    site: 'select Site'
  }
}

二、在打开小程序时，设置一个默认语言

//app.js

import en from './util/lang/en.js'
import zh from './util/lang/zh.js'

App({  
    onLaunch: function (res) {    
        let that = this    
        let system = 'en';    
        let langArr = ['en', 'zh']    
        let slang = wx.getStorageSync('lang')    
        try {      
            const res = wx.getSystemInfoSync();      
            if (res.language.indexOf('zh') != -1) {        
                system = 'zh'      
            } else if (res.language.indexOf('en') != -1) {        
                system = 'en'      
            }      
            if (langArr.includes(system)) {        
                if(system == 'zh') {          
                    that.globalData.language = zh          
                    wx.setStorage({            
                        key:"lang",            
                        data: 'zh'          
                    })        
                }else if(system == 'en') {          
                    that.globalData.language = en          
                    wx.setStorage({            
                        key:"lang",            
                        data: 'en'          
                    })        
                }              
            }      
            if (slang) {               
                if(slang == 'zh') {          
                    that.globalData.language = zh          
                    wx.setStorage({            
                        key:"lang",            
                        data: 'zh'          
                    })        
                }else if(slang == 'en') {          
                    that.globalData.language = en          
                    wx.setStorage({            
                        key:"lang",            
                        data: 'en'          
                    })        
                }      
            }    
        } catch (e) {      
            // error    
        }  
    },  
    globalData: {    
        language:en  
    }
})

三、在页面中使用

// index.js

const app = getApp()

Page({
    data:{
        language:{}
    },
    onShow(){
        this.setData({
          language: app.globalData.language.index
        })
    }
})

//index.wxml

<text>{{language.site}}</text>

四、实现切换语言

const app = getApp()
import en from '../../util/lang/en.js'
import zh from '../../util/lang/zh.js'

Page({
    data:{
        lang: 'en'
    },
    onLoad(){
        let slang = wx.getStorageSync('lang')
        this.setData({
          lang: slang
        })
    },
    changeLocale(e) {
        let lang = e.currentTarget.dataset.lang
        if(lang == 'zh'){
          app.globalData.language = zh
        }else if(lang == 'en'){
          app.globalData.language = en
        }
        this.setData({
          lang: lang
        })
        wx.setStorage({
          key:"lang",
          data: lang
        })
    }
})

// lang.wxml

<view class="list" bindtap="changeLocale" data-lang="zh">中文</view>