阅读 109

快应用卡片中配置多语言(中英文)的解决方案

项目中常常有需要配置多语言的需求,快应用中也有自己专门的接口。 因为目前版本快应用卡片不支持,那么如何在快应用卡片中配置多语言(中英文),故有了以下方案:

引言

但是呢,快应用卡片目前版本是不支持的,所以就自己写了一个: 会使用到快应用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>
复制代码

最后,就可以啦 ,希望我的文章能给你带来一点小小的帮助,笔芯

文章分类
前端
文章标签