Projects often need to configure multi-language requirements, and fast applications also have their own specialized interfaces. Because the current version of the quick application card does not support, so how to configure multiple languages (Chinese and English) in the quick application card, so there are the following solutions:

The introduction

  • The official document of fast application supports configuration of multiple languages. How to configure it? Official documents through train

However, the current version of the fast application card is not supported, so I wrote a: will use the fast application API: Device: Device can obtain the system language official document through train

1. Declare in the manifest.json file

{ "name": "system.device" }
Copy the code

Utils /utils. Js, device can obtain the system languageOfficial documents through train

import device from '@system.device'
export function getDeviceInfo() {
    return new Promise(resolve= > {
        device.getInfo({
            success: function(data) {
                resolve(data)
            },
            fail: function(data) {
                resolve(data)
            }
        })
    })
}
Copy the code
Static resources in a project are typically stored in JSON, since many languages support JSON and import them as imports.

3. Add the following code to the en.json and en.json files in the SRC /i18n directory

  • zh.json
{
  "name": "Application Name"."loadingMsg": "Loading"."bind": "Unbind"."updateTime": "Update Time"."servicing": "Server unavailable for maintenance"."outdateLine": "Login expired!"."abnormal": "There is an exception"."noabnormal": "Nothing abnormal"."noBindMes": "You have not performed identity binding in the XXX Platform express application, or the binding has expired."
}

Copy the code
  • 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."
}

Copy the code

4. Introduce

import en from '.. /i18n/en.json'
import zh from '.. /i18n/zh.json'
Copy the code

5. Use, SRC /demo/index some code may be omitted

<template>
    <! -- Template can only have one root node -->
    <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>
Copy the code

Finally, it can, I hope my article can give you a little help, pen core