Skip to content

Fakin's Blog

  • 首页
  • 前端
    • Vue
    • React
    • JavaScript
    • CSS
  • 技术
    • 织梦教程
  • 模板
    • 织梦模板
    • wordpress主题
  • 资源
  • 日记
  • 友链

uni-app国际化

十月 8, 2019 by Fakin

uniapp国际化

uniapp国际化不需要采用i18n的方法,具体方法如下

新建语言包


如图所示在根目录下新建语言包管理文件,在里面新建所需要的语言文件,如下图

语言文件示例

module.exports = {
    langType: 'zh',
    home: { // 首页
        title: '全自动核酸提取仪',
        entryButton: '进入'
    },
    program: { //程序页面
        searchPlaceholder: '文件名',
        fileCode: '文件码',
        reagentCode: '试剂码',
        step: '步骤',
        fileDelete: '文件删除',
        fileSave: '文件另存',
        allSelect: '全选',
        cancel: '取消',
        remove: '删除',
        confirm: '确定',
        preview: '预览',
        newFile: '新建文件'
    }
}

vuex中使用语言包

在根目录下的stroe>index.js中初始化语言包

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 国际化相关代码
try {
    // 1. 分析用户已经选择的语言 
    var userLang = uni.getStorageSync("userLang");
    // 2. 如果用户没有选择过获取用户手机的语言
    if (!userLang) {
        const sys = uni.getSystemInfoSync();
        userLang = sys.language;
    }
    // 以中英文切换为例, 其他语言请使用 getSystemInfoSync 获取语言对应的字符串
    // 然后扩展语言包即可
    if (userLang.substring(0, 2) == 'zh') {
        var lang = require('../language/zh.js');
    } else {
        var lang = require('../language/en.js');
    }
} catch (e) {
    // error
}

const store = new Vuex.Store({
    state:{
        lang: lang,
    },
    mutations:{
        getLang(state, callback) { //手动切换语言方法
            var userLang = uni.getStorageSync("userLang");
            if (!userLang) {
                const sys = uni.getSystemInfoSync();
                userLang = sys.language;
            }
            if (userLang.substring(0, 2) == 'zh') {
                var lang = require('../language/zh.js');
                uni.setStorageSync('userLang', 'zh')
            } else {
                var lang = require('../language/en.js');
                uni.setStorageSync('userLang', 'en')
            }
            state.lang = lang;
            callback()//回调函数
        },
    }
})

页面中使用vuex

按照常规的vuex与页面通信的方式即可

import {mapState} from "vuex";
computed: {
    ...mapState(['lang'])
}

重要提示

在Hbuildex2.2.5以下版本nvue中不能使用vuex

Post navigation

上一篇:

vue-cli3.0配置scss全局变量

下一篇:

uni-app中picker组件“确定”和“取消”文字的修改

最近文章

  • 仿element-ui中Layout 布局-xcLayout
  • node-sass-error 解决方法
  • 自我ESLint配置【仅供参考】
  • JavaScript实用工具库【持续更新】
  • vue技巧【持续更新】
  • uni-app中picker组件“确定”和“取消”文字的修改
  • uni-app国际化
  • vue-cli3.0配置scss全局变量

最近评论

  • 心灵博客发表在《JavaScript实用工具库【持续更新】》
  • Teacher Du发表在《友情链接》
  • 火辣辣发表在《友情链接》
  • 心灵博客发表在《uni-app跨域设置》
  • 腾讯云代金券发表在《element ui+七牛云上传》

更新日历

2021年一月
一 二 三 四 五 六 日
« 4月    
 123
45678910
11121314151617
18192021222324
25262728293031
© 2021 Fakin's Blog         | WordPress Theme by SuperbThemes | 蜀ICP备16017838号-2