Skip to content

Commit ffa959a

Browse files
wlxuquwlxuqu
committed
新增多语言切换教程
1 parent a9758b9 commit ffa959a

File tree

39 files changed

+454
-14308
lines changed

39 files changed

+454
-14308
lines changed

‎common/locales/en.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export default {
2+
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
3+
components: {
4+
desc: 'Numerous components cover the various requirements of the development process, and the components are rich in functions and compatible with multiple terminals. Let you integrate quickly, out of the box'
5+
},
6+
js: {
7+
desc: 'Numerous intimate gadgets are a weapon that you can call upon during the development process, allowing you to dart in your hand and pierce the Yang with a hundred steps'
8+
},
9+
template: {
10+
desc: 'Collection of many commonly used pages and layouts, reducing the repetitive work of developers, allowing you to focus on logic and get twice the result with half the effort'
11+
},
12+
nav: {
13+
components: 'Comonents',
14+
js: 'JS',
15+
template: 'Template'
16+
},
17+
common: {
18+
intro: 'UI framework for rapid development of multiple platforms',
19+
title: 'uView UI',
20+
},
21+
}

‎common/locales/zh.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export default {
2+
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
3+
components: {
4+
desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用'
5+
},
6+
js: {
7+
desc: '众多的贴心小工具，是你开发过程中召之即来的利器，让你飞镖在手，百步穿杨'
8+
},
9+
template: {
10+
desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
11+
},
12+
nav: {
13+
components: '组件',
14+
js: '工具',
15+
template: '模板'
16+
},
17+
common: {
18+
intro: '多平台快速开发的UI框架',
19+
title: 'uView UI',
20+
},
21+
}

‎components/page-nav/page-nav.vue

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,57 @@
44
<image class="logo" src="https://cdn.uviewui.com/uview/common/logo.png" mode="widthFix"></image>
55
<view class="nav-info">
66
<view class="nav-title__text">
7-
uView UI
7+
{{$t('common.title')}}
88
</view>
99
<view class="nav-slogan">
10-
多平台快速开发的UI框架
10+
{{$t('common.intro')}}
1111
</view>
1212
</view>
1313
</view>
1414
<view class="nav-desc">
1515
{{desc}}
1616
</view>
17+
<view class="lang" @tap="switchLang">
18+
<u-icon size="46" color="warning" :name="lang"></u-icon>
19+
</view>
1720
</view>
1821
</template>
1922

2023
<script>
2124
export default {
2225
props: {
23-
desc: String
26+
desc: String,
27+
title: String,
28+
},
29+
computed: {
30+
lang() {
31+
return this.$i18n.locale == 'zh' ? 'zh' : 'en';
32+
}
33+
},
34+
methods: {
35+
switchLang() {
36+
this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh' : 'en';
37+
this.vuex_tabbar[0].text = this.$t('nav.components')
38+
this.vuex_tabbar[1].text = this.$t('nav.js')
39+
this.vuex_tabbar[2].text = this.$t('nav.template')
40+
uni.setNavigationBarTitle({
41+
title: this.$t(this.title)
42+
});
43+
}
2444
}
2545
}
2646
</script>
2747

2848
<style lang="scss" scoped>
2949
.nav-wrap {
3050
padding: 30rpx;
51+
position: relative;
52+
}
53+
54+
.lang {
55+
position: absolute;
56+
top: 30rpx;
57+
right: 30rpx;
3158
}
3259
3360
.nav-title {
@@ -48,6 +75,7 @@
4875
4976
.logo {
5077
width: 140rpx;
78+
flex: 0 0 140rpx;
5179
height: auto;
5280
}
5381

‎main.js

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,34 @@ Vue.mixin(vuexStore)
2929
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
3030
Vue.mixin(mpShare)
3131

32+
// i18n部分的配置
33+
// 引入语言包，注意路径
34+
import Chinese from '@/common/locales/zh.js';
35+
import English from '@/common/locales/en.js';
36+
37+
// VueI18n
38+
import VueI18n from 'vue-i18n'
39+
40+
// VueI18n
41+
Vue.use(VueI18n)
42+
43+
const i18n = new VueI18n({
44+
// 默认语言
45+
locale: 'zh',
46+
// 引入语言文件
47+
messages: {
48+
'zh': Chinese,
49+
'en': English,
50+
}
51+
})
52+
53+
// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
54+
Vue.prototype._i18n = i18n
55+
3256
const app = new Vue({
33-
store,
34-
...App
57+
i18n,
58+
store,
59+
...App
3560
})
3661

3762
// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
@@ -43,4 +68,3 @@ import httpApi from '@/common/http.api.js'
4368
Vue.use(httpApi, app)
4469

4570
app.$mount()
46-

‎manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name" : "uView",
33
"appid" : "__UNI__60F4B81",
44
"description" : "多平台快速开发的UI框架",
5-
"versionName" : "1.5.8",
5+
"versionName" : "1.6.0",
66
"versionCode" : "100",
77
"transformPx" : false,
88
"app-plus" : {

‎package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "uView",
3+
"version": "1.0.0",
4+
"description": "<p align=\"center\">\r <img alt=\"logo\" src=\"https://uviewui.com/common/logo.png\" width=\"120\" height=\"120\" style=\"margin-bottom: 10px;\">\r </p>\r <h3 align=\"center\" style=\"margin: 30px 0 30px;font-weight: bold;font-size:40px;\">uView</h3>\r <h3 align=\"center\">多平台快速开发的UI框架</h3>",
5+
"main": "main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/YanxinNet/uView.git"
12+
},
13+
"keywords": [],
14+
"author": "",
15+
"license": "ISC",
16+
"bugs": {
17+
"url": "https://github.com/YanxinNet/uView/issues"
18+
},
19+
"homepage": "https://github.com/YanxinNet/uView#readme",
20+
"dependencies": {
21+
"vue-i18n": "^8.20.0"
22+
}
23+
}

‎pages.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
"easycom": {
33
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
44
},
5-
// "condition": { //模式配置，仅开发期间生效
6-
// "current": 0, //当前激活的模式(list 的索引项)
7-
// "list": [{
8-
// "name": "test", //模式名称
9-
// "path": "pages/componentsC/test/index", //启动页面，必选
10-
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11-
// }]
12-
// },
5+
"condition": { //模式配置，仅开发期间生效
6+
"current": 0, //当前激活的模式(list 的索引项)
7+
"list": [{
8+
"name": "test", //模式名称
9+
"path": "pages/componentsC/test/index", //启动页面，必选
10+
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
11+
}]
12+
},
1313
"pages": [
1414
// 演示-组件
1515
{
@@ -61,9 +61,9 @@
6161
{
6262
"path": "test/index",
6363
"style": {
64-
// "navigationBarTitleText": "navbar-自定义导航栏",
65-
"navigationStyle": "custom" ,// 隐藏系统导航栏
66-
"navigationBarTextStyle": "white" // 状态栏字体为白色
64+
"navigationBarTitleText": "navbar-自定义导航栏"
65+
// "navigationStyle": "custom" ,// 隐藏系统导航栏
66+
// "navigationBarTextStyle": "white" // 状态栏字体为白色
6767
}
6868
},
6969
// gap-间隔槽

‎pages/componentsB/image/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<view class="u-demo-wrap">
44
<view class="u-demo-title">演示效果</view>
55
<view class="u-demo-area u-flex u-row-center">
6-
<u-image border-radius="100%" :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
6+
<u-image :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
77
<u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading>
88
<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view>
99
</u-image>

‎pages/componentsC/test/index.vue

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,23 @@
11
<template>
2-
<view style="padding-top: 200px;">
3-
<u-button @click="show = true" :custom-style="{
4-
color: 'red',
5-
borderColor: 'blue'
6-
}">打开</u-button>
2+
<view style="margin-top: 200rpx;">
73
</view>
84
</template>
95

106
<script>
117
export default {
128
data() {
139
return {
14-
show: true,
15-
list: [{
16-
name: '待收货'
17-
}, {
18-
name: '待付款'
19-
}, {
20-
name: '待评价'
21-
}],
22-
current: 0
10+
// 错误示例，切换语言时，这个intro并不会自动更新到视图
11+
// intro: this.$t('lang.intro')
2312
}
2413
},
25-
onLoad() {
26-
// setTimeout(() => {
27-
// this.show = false;
28-
// }, 2000)
14+
computed: {
15+
// 正确用法
16+
2917
},
30-
methods: {
31-
close() {
32-
//console.log('close');
33-
},
34-
change(index) {
35-
this.current = index;
36-
}
37-
}
18+
onShow() {
19+
20+
},
21+
3822
}
39-
</script>
23+
</script>

0 commit comments

Comments
 (0)