UNI-APP开发之多语言（国际化）的具体实现

╰半橙微兮° 2022-12-23 12:27 239阅读 0赞

1、下载插件，解压，引入vue-i18n.js包

![2020112510290017.png][]

2、在static目录中创建lang文件夹，并创建cn.json和en.json文件

![20201125103057845.png][]

cn.json

{
    	"tab": {
    		"user":"我的"
    	},
    	"user": {
    		"customer":"客户：",
    		"switch_account":"切换账号",
    		"logout":"退出登录",
    		"funs_1": "密码修改",
    		"funs_2": "App二维码1",
    		"funs_3": "App二维码2",
    		"funs_4": "App二维码3",
    		"funs_5": "App二维码4",
    		"funs_6": "App二维码5"
    	}
    }

en.json

{
    	"tab": {
    		"user":"User"
    	},
    	"user": {
    		"customer":"Customer:",
    		"switch_account":"Switching accounts",
    		"logout":"Logout",
    		"funs_1": "Change password",
    		"funs_2": "App QRcode1",
    		"funs_3": "App QRcode2",
    		"funs_4": "App QRcode3",
    		"funs_5": "App QRcode4",
    		"funs_6": "App QRcode5"
    	}
    }

3、修改main.js

import Vue from 'vue'
    import App from './App'
    //引入国际化
    import VueI18n from 'vue-i18n'
    
    Vue.config.productionTip = false
    
    Vue.use(VueI18n)
    
    App.mpType = 'app'
    
    const i18n = new VueI18n({
    	locale: 'cn',
    	messages: {
    		'cn': require('./static/lang/cn.json'),
    		'en': require('./static/lang/en.json')
    	}
    });
    
    Vue.prototype._i18n = i18n
    
    const app = new Vue({
    	i18n,
        ...App
    })
    app.$mount()

4、使用\{ \{$t('user.customer')\}\}或者this.$t('tab.user')进行国际化

<template>
    	<view class="my_page">
    		
    		<uni-nav-bar contentColor="#ffffff" :status-bar="true" :title="title" backgroundColor="#155dff"/>
    		
    		<view class="user_info">
    			<image :src="userInfo.avatar" class="login_avatar"></image>
    			<view class="login_info">
    				<view class="login_account">{
       {userInfo.account}}</view>
    				<view class="login_nickname">{
       {$t('user.customer')}}{
       {userInfo.nickname}}</view>
    			</view>
    		</view>
    		
    		<view class="user_func">
    			
    			<view class="user_item" v-for="(item, index) in userFuncs" :key="index" @click="navigate(index)">
    				<view class="user_item_left">
    					<image :src="item.icon" class="user_item_left_img"></image>
    					<view class="user_item_left_text">{
       {item.title}}</view>
    				</view>
    				<view class="user_item_right">
    					<image src="../../../static/images/arr_right.png" class="user_item_right_img"></image>
    				</view>
    			</view>
    		</view>
    		
    		<view class="user_btns">
    			<view class="btn_item">{
       {$t('user.switch_account')}}</view>
    			<view class="btn_item">{
       {$t('user.logout')}}</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: this.$t('tab.user'),
    				userInfo:{
    					avatar: "../../static/images/user_head.png",
    					account: "VEICHI",
    					nickname: "VEICHI",
    				},
    				userFuncs:[
    					{icon: "../../static/images/icon_liebiaomoshi@2x.png", "title": this.$t('user.funs_1')},
    					{icon: "../../static/images/icon_liebiaomoshi@2x.png", "title": this.$t('user.funs_2')},
    					{icon: "../../static/images/icon_liebiaomoshi@2x.png", "title": this.$t('user.funs_3')},
    					{icon: "../../static/images/icon_liebiaomoshi@2x.png", "title": this.$t('user.funs_4')},
    					{icon: "../../static/images/icon_liebiaomoshi@2x.png", "title": this.$t('user.funs_5')},
    					{icon: "../../static/images/icon_liebiaomoshi@2x.png", "title": this.$t('user.funs_6')}
    				]
    			}
    		},
    		onLoad() {
    			
    		},
    		methods: {
    			navigate(index){
    				switch(index){
    					case 0:
    						uni.navigateTo({
    							url: "../mine/change_pwd/change_pwd"
    						});
    						break;
    					case 1:
    						uni.navigateTo({
    							url: "../map/map"
    						});
    						break;
    					default:
    						uni.navigateTo({
    							url: "../mine/app_qr/app_qr"
    						});
    						break;
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    	@import url("mine_page.css");
    </style>

完！！！

[2020112510290017.png]: /images/20221120/6ab514f2579949eeba0a835f83cb86bb.png
[20201125103057845.png]: /images/20221120/c165f55a3ac04f269ff2147d3a9e3fe6.png