uniapp中使用vue-i18n实现国际化多语言

等级 876 0 0
标签: 前端

uniapp的项目中 需要用到国际化切换 做一个总结

1. 首先看一下目录结构

uniapp中使用vue-i18n实现国际化多语言

2. 准备好vue-i18n的js文件(下方有源码地址)

3. lang 文件夹下面写国际化语言的逻辑

1.将所需要的文件引入(en.js zh.js vue-i18n 等) 2. 获取设备信息 ,并保存本地

目的: 为了知道用户手机用的是什么语言,方便用户一进来看到的就是他设备设置的语言,我这里是将获取到的信息全部保存了(项目中需要),也可以只保存system_info.language 代码如下(写在lang/index.js文件中):

import LangEn from './en.js'
import LangChs from './zh.js'
import Vue from 'vue'
import VueI18n from './vue-i18n'
Vue.use(VueI18n)
const system_info = uni.getStorageSync('system_info')
if (!system_info) {
    // 获取设备信息
    uni.getSystemInfo({
        success: function (res) {
            uni.setStorageSync('system_info', res);
        }
    })
}
    const cur_lang = system_info.language == 'en' ? 'en' : 'zh_CN'
    const i18n = new VueI18n({
        locale: cur_lang || 'zh_CN',  // 默认选择的语言
        messages: {  
                'en': LangEn,
                'zh_CN': LangChs
            }
    })
    export default i18n

4. main.js中引入

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

import i18n from './lang/index' 
Vue.prototype._i18n = i18n
const app = new Vue({
    i18n,
        ...App
})
app.$mount()

5.项目中引入

uniapp 不支持在取值表达式中直接调方法,因此,$t方法不可用,所以通过计算属性的方式:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text>{{ i18n.game }}</text>  
        </view>
        <button type="primary" @tap="change">切换语言</button>
    </view>
</template>


computed: {  
  i18n () {  
     return this.$t('index')  
  }  
},

6.demo源码地址

https://github.com/menglin1997/changeLang

收藏
评论区

相关推荐

uniapp中使用vue-i18n实现国际化多语言
uniapp的项目中 需要用到国际化切换 做一个总结 1. 首先看一下目录结构 2. 准备好vuei18n的js文件(下方有源码地址) 3. la
uniapp中全局变量globalData使用
使用uniapp开发时,可以通过在app.vue中定义全局变量,在每个页面内通过globalData获取 1、app.vue文件的写法 <script export default { globalData: { loginSta: false }, onLaunch: function() {
前端使用低功耗蓝牙开发的坑2(分包操作之分包发送)
最近用uniapp开发微信小程序的一个项目中用到了低功耗蓝牙,但是其中收包 ,发包的时候不能超过20字节,所以就需要我们来进行分包操作了 以下是对分包发送的一些处理,分包接收操作请看上篇文章 说明: 我项目中的数据结构中05是帧头, FE是帧尾 image.png(https://imghelloworld.osscnbeijing.
uni-app实战之社区交友APP(1)项目介绍和环境搭建
如需查看本项目实际运行效果,可点击uniapp实战之社区交友APP(1)项目介绍和环境搭建(https://blog.csdn.net/CUFEECR/article/details/112793245)(免费试读)进行浏览。 如需本项目完整前端uniapp代码和资源文件,可以点击https://download.csdn.net/downloa
uniapp(vue通用)整合腾讯位置服务SDK---多平台小程序通用
专属邀请链接 这里进入腾讯位置服务官网: https://lbs.qq.com?lbs_inviteG9MRFLG(https://lbs.qq.com?lbs_inviteG9MRFLG) 项目开始于20210127 晚8 uniapp模板地址 https://ext.dcloud.net.cn/plugin?id4067(htt
uniapp上传图片显示进度
uniapp上传图片,官方文档写的比较清楚,此处笔记是因为客户特殊要求,上传提示进度条,查到方法特此笔记。 uploadImg(){ var _self this; uni.chooseImage({ count: 1, sizeType:'copressed', success:(res) { console.log(r
uni-app入门教程(1)uni-app简介、部署和目录结构
@toc 前言本文主要介绍了uniapp的基本情况,并引导快速创建和运行第一个uniapp项目,同时对项目的目录结构和代码规范进行详细说明,适合uniapp零基础初学者。 一、uniapp介绍uniapp是DCloud官方推出的重要产品,是一个使用Vue.js开发跨平台应用的前端框架,官网是。开发者通过编写一套Vue.js代码,即可
uni-app入门教程(2)页面样式、配置文件和生命周期
前言本文先介绍uniapp的页面样式和布局,包括尺寸单位、样式导入、内联样式和选择器等;再介绍两个配置文件,即pages.json和manifest.json的配置项和基本使用;最后简要介绍了生命周期的基本使用。 一、页面样式与布局 1.尺寸单位uniapp框架目前仅支持长度单位px和%。与传统web页面不同,px是相对于基准宽度
uni-app入门教程(4)组件的基本使用
@toc 前言本文主要介绍了uniapp中的组件,包括四大类:基础组件(scrollview、swiper、text等)、表单组件(button、checkbox、input等)、导航组件navigator和页面传参、媒体组件(audio、image和video等),详细说明了这些组件的常用属性和方法,并进行使用举例和演示。 一、基础组件组件是视
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
手把手带你使用uni-admin搭建后台管理系统
我们一般写应用都需要有后台管理系统,那么uniapp也不例外。本次内容假设我们已经完成了一个uniapp+uniCloud开发的程序。默认我们已经搭建好了服务空间。如果你还不知道服务空间如何创建,移步uniadmin和应用共用同一个服务空间此文章在华为云社区为首发我是代码哈士奇 此文章来源为代码哈士奇,个人主页: 创建uniadmin模板应用这里使用uni
「uniapp」自定义iconfont
1. 进入 2. 搜索自己需要的图标点击加入购物车中 3. 将购物车中的图标添加到项目中首先进入购物车点击添加至项目,没有项目就新建一个项目 4. 将图标下载至本地 5. 将文件复制到uniapp项目中// 将.ttf文件 @/common 引入@fontface fontfamily: "iconfont"; / Project id 2570483
Uniapp使用GoEasy实现websocket实时通讯
Uniapp作为近来最火的移动端开发技术,一套代码,可以打包成Android/iOS app和各种平台的小程序,可谓是没有最方便只有更方便。 GoEasy上架DCloud Uniapp插件市场已经有一个多月了,收到很多Uniapp开发人员的赞扬和好评,小编在此隔着屏幕向大家鞠躬,小编和GoEasy团队会继续努力,持续为Uniapp开发者提供最简单且优雅的A
uniapp中使用picker中的注意事项
APP端中picker点击后不弹出: 1、请确保picker标签里面嵌套了一个view,并且view里面有值 2、请确保picker中的默认值的格式跟该picker类型的值对应 例如下面: <view class="time_wrap"> <input type="tex
uniapp引入vue
首先目录结构是这样的 ![目录](https://oscimg.oschina.net/oscnet/up-c38df71b7be4ebcdafdc248216aa3f69e64.png "目录") > lib文件夹里面存放四个js文件,ch(存放中文语言)、en(存放英文语言)、index(设置语言)、vue-i18n(vue-i18n插件);同时在m