国际化

components/base/changeLanguage.vue

@@ -0,0 +1,78 @@
+<template>
+	<view class="change-language">
+		<uv-picker ref="picker"
+		:columns="languageList"
+		keyName="name"
+		:itemHeight="70"
+		@confirm="confirm"></uv-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		props : {
+			url : {
+				default : '/pages/index/index',
+				type : String,
+			}
+		},
+		data(){
+			return {
+				languageList: [
+					[
+						{
+							name:'简体中文',
+							key : "zh-Hans"
+						},
+						{
+							name:'English',
+							key : "en"
+						},
+					]
+				],
+			}
+		},
+		methods : {
+			open() {
+				this.$refs.picker.open();
+			},
+			confirm(e) {
+				this.changeLanguage(e.value.pop())
+			},
+			//修改当前语言
+			changeLanguage(res){
+				
+				//#ifdef  H5
+				this.$router.go(0); //刷新页面，不然validate.js不好国际化
+				//#endif
+				
+				//#ifdef  APP-PLUS
+				uni.navigateTo({
+					url: this.url // 要刷新的页面路径
+				});
+				//#endif
+				
+				if(!res.key){
+					return
+				}
+				
+				uni.setStorage({
+					key: 'language',
+					data: res.key
+				})
+				
+				this.$i18n.locale = res.key
+				uni.setLocale(res.key) //切换语言环境必须在this.$i18n.locale之后，否则app端会有意想不到的bug
+				
+				uni.$responseMessage = this.$t('responseMessage')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.change-language{
+		position: relative;
+		z-index: 999999999;
+	}
+</style>

components/base/tabbar.vue

@@ -14,7 +14,7 @@
 					item.iconPath" class="icon-image" mode=""></image>
 				</view>
 				<view class="title">
-					{{ item.title }}
+					{{ $t(item.title) }}
 				</view>
 			</view>
 		</view>
@@ -36,33 +36,25 @@
 						"selectedIconPath": "/static/image/tabbar/home-a.png",
 						"iconPath": "/static/image/tabbar/home.png",
 						"pagePath": "/pages/index/index",
-						"title": "首页"
-					},
-					{
-						"selectedIconPath": "/static/image/tabbar/category-a.png",
-						"iconPath": "/static/image/tabbar/category.png",
-						"pagePath": "/pages/index/category",
-						"title": "分类",
-						isNotShop : true,
+						"title": "tabbar.title.1"
 					},
 					{
 						"selectedIconPath": "/static/image/tabbar/order-a.png",
 						"iconPath": "/static/image/tabbar/order.png",
 						"pagePath": "/pages/index/order",
-						"title": "订单中心"
+						"title": "tabbar.title.2"
 					},
 					{
 						"selectedIconPath": "/static/image/tabbar/cart-a.png",
 						"iconPath": "/static/image/tabbar/cart.png",
 						"pagePath": "/pages/index/cart",
-						"title": "购物车",
-						isNotShop : true,
+						"title": "tabbar.title.3"
 					},
 					{
 						"selectedIconPath": "/static/image/tabbar/center-a.png",
 						"iconPath": "/static/image/tabbar/center.png",
 						"pagePath": "/pages/index/center",
-						"title": "个人中心"
+						"title": "tabbar.title.4"
 					}
 				]
 			};
@@ -95,7 +87,7 @@
 	flex-direction: row;
 	height: 120rpx;
 	padding-bottom: env(safe-area-inset-bottom);
-	z-index: 999999;
+	z-index: 99999;
 	bottom: 0;
 	left: 0;
 	color: #BCBCBC;
@@ -118,7 +110,7 @@
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			-o-text-overflow: ellipsis;
-			font-size: 23rpx;
+			font-size: 22rpx;
 			line-height: 35rpx;
 		}
 	}

locale/en.json

@@ -0,0 +1,21 @@
+{
+	"tabbar.title.1": "Home",  
+	"tabbar.title.2": "TradingPlatform",  
+	"tabbar.title.3": "CustomsClearance",  
+	"tabbar.title.4": "PersonalCenter",
+	"pages" : {
+		"index" : {
+			"index" : {
+				"agreement" : "Agreement content",
+				"language" : "Change Language"
+			}
+		}
+	},
+	"components" : {
+		"config" : {
+			"configPopup" : {
+				
+			}
+		}
+	}
+}

locale/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+import zhHans from './zh-Hans.json' // 中文简体
+import en from './en.json' // 中文简体
+
+Vue.use(VueI18n)
+
+// 所需要用的语言包
+let messages = {
+	'zh-Hans' : zhHans,
+	en,
+}
+
+if(!uni.getStorageSync('language') || !messages[uni.getStorageSync('language')]){
+	uni.setStorageSync('language', 'zh-Hans')
+}
+
+const lang = uni.getStorageSync('language');//获取缓存中的语言
+// const lang = 'en';
+// VueI18n构造函数所需要的配置
+const i18nConfig = {
+    locale: lang,//当前语言
+    messages
+}
+const i18n = new VueI18n(i18nConfig)
+export default i18n

locale/zh-Hans.json

@@ -0,0 +1,24 @@
+{
+	"tabbar.title.1" : "首页",
+	"tabbar.title.2" : "交易平台",
+	"tabbar.title.3" : "清关服务",
+	"tabbar.title.4" : "个人中心",
+	"responseMessage" : {
+		
+	},
+	"pages" : {
+		"index" : {
+			"index" : {
+				"agreement" : "协议内容",
+				"language" : "切换语言"
+			}
+		}
+	},
+	"components" : {
+		"config" : {
+			"configPopup" : {
+				"noData" : "内容未找到：404"
+			}
+		}
+	}
+}

main.js

@@ -14,6 +14,9 @@ import store from '@/store/store'
 import './config'
 import './utils/index.js'
 
+
+import i18n from './locale/index.js'
+
 //组件注册
 import configPopup from '@/components/config/configPopup.vue'
 import navbar from '@/components/base/navbar.vue'
@@ -24,6 +27,7 @@ Vue.component('navbar',navbar)
 const app = new Vue({
 	...App,
 	store,
+	i18n,
 })
 app.$mount()
 // #endif

pages/index/index.vue

@@ -3,6 +3,11 @@
 		
 		<navbar/>
 		
+		<view style="padding: 20rpx;"
+		@click="$refs.changeLanguage.open()">
+			{{ $t('pages.index.index.language') }}
+		</view>
+		
 		<view class="search">
 		
 			<view @click="showSelectArea" class="left-area">
@@ -108,24 +113,24 @@
 		
 		<!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> -->
 		
-		<PrivacyAgreementPoup/>
+		<changeLanguage ref="changeLanguage" />
 		
 		<tabber select="0"/>
 	</view>
 </template>
 
 <script>
-	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
 	import Position from '@/utils/position.js'
 	import tabber from '@/components/base/tabbar.vue'
 	import productList from '@/components/user/productList.vue'
 	import { mapGetters } from 'vuex'
 	// import selectArea from '../../components/selectArea.vue';
+	import changeLanguage from '@/components/base/changeLanguage.vue'
 	export default {
 		components : {
 			tabber,
 			productList,
-			PrivacyAgreementPoup,
+			changeLanguage
 		},
 		data() {
 			return {