uniapp微信小程序开发需要配置双语，并且记录语言，下次进入小程序保留之前语言配置。

安装语言依赖插件

npm i vue-i18n --save

main.js配置

import App from './App'
import uView from '@/uni_modules/uview-ui'
import messages from './locale/index'

let i18nConfig = {
  locale: uni.getLocale(),
  messages
}

// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  i18n,
  ...App
})
require('./config/request.js')(app)
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'
const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  return {
    app
  }
}
// #endif

语言文件

locale/index.js

import enus from './en-us.json'
import zhcn from './zh-cn.json'
export default {
	'en-us': enus,
	'zh-cn': zhcn,
}

zh-cn.json配置

{
	"index.title": "包裹预报",
}

en-us.json配置

{
	"index.title": "Parcel Notice"	
}

page页面标题配置双语

{
	"pages": [
		{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "%login.title%"
			}
		}
	]
	
}

切换语言组件

<template>
	<div>
		<view class="top-bar clearfix">
			<view class="top-lang" @click="show = true">
				<image :src="language[langCur].icon" mode="" class="icon"></image>
				<view class="top-lang-select">
					<view class="top-lang-text">{{language[langCur].tit}}</view>
					<view class="top-lang-arrow">
						<text class="iconfont icon-down"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" mode="center" :round="20">
			<view class="lang-boxy">
				<view class="lang-row" v-for="(item,index) in language" @tap="setLanguage(index,item)" :key="index">
					<image :src="item.icon" mode=""></image><text>{{item.tit}}</text>
					<view v-if="index == langCur" class="rt">
						<u-icon name="checkbox-mark" color="#a63030"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				langCur: 0,
				show: false,
				// en-us 英文
				// zh-cn 中文
				language: [{
						tit: '中文',
						flag: 'zh-cn',
						icon: '/static/image/ucenter/guo1.png',
					},
					{
						tit: 'NZ',
						flag: 'en-us',
						icon: '/static/image/ucenter/en.png',
					}
				],
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			}
		},
		mounted() {
			this.getLanguage()
		},
		methods: {
			getLanguage() {
				var that = this;
				let lang = uni.getStorageSync('lang')
				if (lang == 'en-us') {
					this.langCur = 1
				} else {
					this.langCur = 0
				}
			},
			setLanguage(index, item) {
				uni.setLocale(item.flag);
				uni.setStorageSync('lang', item.flag)
				this.$i18n.locale = item.flag;
				this.langCur = index
				this.show = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.top-bar {
		position: relative;
		margin-bottom: 20rpx;


		.top-lang {
			background-color: rgba(214, 56, 10, 0.5);
			border-radius: 28rpx;
			padding: 10rpx 14rpx;
			display: flex;
			align-items: center;
			float: right;

			.icon {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				margin-right: 14rpx;
			}

			.top-lang-select {
				position: relative;

				.top-lang-text {
					font-size: 24rpx;
					color: #fff;
					padding-right: 30rpx;
					line-height: 34rpx;
				}

				.top-lang-arrow {
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -12rpx;
					width: 24rpx;
					height: 24rpx;
					line-height: 1;

					.iconfont {
						font-size: 24rpx;
						color: #fff;
						display: block;
					}
				}
			}
		}

		.top-bar-info {
			.user-flex {
				display: flex;
				align-items: center;

				.name {
					font-size: 32rpx;
					color: #ffffff;
					margin-right: 12rpx;
				}

				.user-info {
					font-size: 24rpx;
					padding: 0 20rpx;
					line-height: 54rpx;
					color: #fff;
					background-color: #ff9000;
					border-radius: 28rpx;
				}
			}

			.user-id {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
</style>

获取已设置的语言

app.vue

<script>
	export default {
		onLaunch: function() {
			var that=this;
			console.log('App Launch')
			let systemInfo = uni.getSystemInfoSync();
			var systemLocale = systemInfo.language;
			var applicationLocale = uni.getLocale();
			let lang = uni.getStorageSync('lang')
			if (lang == 'en-us') {
				uni.setLocale('en-us');
				that.$i18n.locale = 'en-us';
			} else {
				uni.setLocale('zh-cn');
				that.$i18n.locale = 'zh-cn';
			}
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

gitee

gitee