项目中常常有需要配置多语言的需求，快应用中也有自己专门的接口。 因为目前版本快应用卡片不支持，那么如何在快应用卡片中配置多语言（中英文），故有了以下方案：
引言
- 快应用中官方文档中是支持配置多语言的，如何配置呢？ 官方文档直通车 但是呢，快应用卡片目前版本是不支持的，所以就自己写了一个： 会使用到快应用api:device :device可以获取系统语言 官方文档直通车
1.manifest.json文件中进行申明
{ "name": "system.device" }
2.utils/utils.js , device可以获取系统语言 官方文档直通车
import device from '@system.device'
export function getDeviceInfo() {
return new Promise(resolve => {
device.getInfo({
success: function(data) {
resolve(data)
},
fail: function(data) {
resolve(data)
}
})
})
}
项目中静态资源一般是放在json里面，因为很多语言都支持json，通过import的方式引入。
3、在 src/i18n 目录新增zh.json和en.json文件中, 添加如下代码
- zh.json
{
"name": "应用名称",
"loadingMsg": "正在加载",
"bind": "去绑定",
"updateTime": "更新时间",
"servicing": "服务器维护中暂不可用",
"outdateLine": "登录过期！",
"abnormal": "存在异常",
"noabnormal": "未见异常",
"noBindMes": "您未在“xxx平台”快应用中进行身份绑定，或绑定过期。"
}
- en.json
{
"name": "Epidemic prevention health code",
"loadingMsg": "Loading",
"bind": "To bind",
"updateTime": "UpdateTime",
"servicing": "Currently unavailable in server maintenance",
"outdateLine": "Login expired!",
"abnormal": "There is an exception",
"noabnormal": "No abnormality seen",
"noBindMes": "You are not identity bound in the National Government Platform fast application or binding expired."
}
4. 引入
import en from '../i18n/en.json'
import zh from '../i18n/zh.json'
5. 使用,src/demo/index 某些代码可能会省略
<template>
<!-- template里只能有一个根节点 -->
<div class="wrapper">
<text class="title">{{ getLanguage.name }}</text>
</div>
</template>
<script>
import en from '../../i18n/en.json'
import zh from '../../i18n/zh.json'
import {
getDeviceInfo
} from '../../utils/utils'
export default {
private: {
en,
zh,
language: '',
},
computed: {
getLanguage() {
return this.language == 'zh' ? this.zh : this.en
}
},
async onInit() {
const {
language
} = await getDeviceInfo();
this.language = language
},
}
</script>
<style lang="scss">
@import './../../assets/styles/style.scss';
.wrapper {
@include flex-box-mixins(column, center, center);
margin: 0 10 * $size-factor;
.title {
font-size: 8 * $size-factor;
text-align: center;
color: $black;
}
.desc {
margin-top: 10 * $size-factor;
color: $grey;
}
}
</style>
