【uniapp】微信小程序国际化详细版
2024-05-25 12:00:38
目录
一、步骤
1、main.js 引入并初始化 VueI18n
2、创建文件夹locale
二、应用
1、页面（固定数据）
2、动态数据
3、系统
官网详解：https://uniapp.dcloud.net.cn/tutorial/i18n.html
我创建项目的时候选择的模板是uni-ui项目，所以不需要npm vue-i18n
一、步骤
1、main.js 引入并初始化 VueI18n
import messages from './locale/index'//(1)let i18nConfig = { //(2)locale: uni.getLocale(),//获取系统语言messages
}// #ifndef VUE3
import Vue from 'vue'
import App from './App'
import store from './store'
import api from '@/http/vmeitime-http/index.js'
import share from '@/utils/share.js'
Vue.mixin(share)import VueI18n from 'vue-i18n'//(3)
Vue.use(VueI18n)//(4)
const i18n = new VueI18n(i18nConfig)//(5)Vue.config.productionTip = false
Vue.prototype.$store = store
Vue.prototype.api = apiApp.mpType = 'app'const app = new Vue({...App,store,share,i18n,//(6)
})
app.$mount()
// #endif// #ifdef VUE3
import {createSSRApp
} from 'vue'
import App from './App.vue'
//(7)
import {createI18n
} from 'vue-i18n'
const i18n = createI18n(i18nConfig)//(8)
export function createApp() {const app = createSSRApp(App)app.use(i18n)//(9)return {app}
}
// #endif
2、创建文件夹locale
locale文件夹是与pages同级
locale/en.json（英文模板）
{"locale.auto": "System","locale.en": "English","locale.zh-hans": "简体中文","index.scene": "Scene","index.company": "Company Profile","index.package": "Package","index.details": "Details","word.whole": "whole","word.download": "Download Records","word.preservation": "Transfer to my mobile phone","word.forward": "Forward to friends","me.WeChat": "WeChat name","me.message": "Message feedback","me.myDownloads": "My Downloads","me.contact": "contact us","me.logout": "Log out"
}
locale/ zh-Hans（简体中文）
{"locale.auto": "系统","locale.en": "English","locale.zh-hans": "简体中文","index.scene": "场景","index.company": "公司介绍","index.package": "产品包","index.details": "详情","word.whole": "全部","word.download": "下载记录","word.preservation": "转存到我的手机","word.forward": "转发给朋友","me.WeChat": "微信名","me.message": "留言反馈","me.myDownloads": "我的下载","me.contact": "联系我们","me.logout": "退出登录"
}
locale/index.js
import en from './en.json'
import zhHans from './zh-Hans.json'export default {en,'zh-Hans': zhHans,
}
二、应用
1、页面（固定数据）
在首页pages/index/index.vue
在首页必须这样写，其他页面就只要写（5）即可
<template><view class="container">//(5)<view>{{$t('index.scene')}}</view> </view>
</template><script>export default {computed: { //(1)locales() {return [{text: this.$t('locale.auto'),code: 'auto'},{text: this.$t('locale.en'),code: 'en'}, {text: this.$t('locale.zh-hans'),code: 'zh-Hans'}]}},data() {return {applicationLocale: '', //语言//(2)systemLocale:''};},onLoad() {//(3)let systemInfo = uni.getSystemInfoSync();this.systemLocale = systemInfo.language;this.applicationLocale = uni.getLocale();this.isAndroid = systemInfo.platform.toLowerCase() === 'android';uni.onLocaleChange((e) => {this.applicationLocale = e.locale;})//h5页面设置成英文/*#ifdef H5*/this.applicationLocale = 'en';this.$i18n.locale = 'en'/*#endif*/},methods: {//(4)onLocaleChange(e) {if (this.isAndroid) {uni.showModal({content: this.$t('index.language-change-confirm'),success: (res) => {if (res.confirm) {uni.setLocale(e.code);}}})} else {uni.setLocale(e.code);this.$i18n.locale = e.code;}},}}
</script>注意：
（1）、在template中使用的格式：{{$t('index.scene')}}
（2）、在data里数值的替换方法：this.$t('index.scene')
<template><view class="me-container"><uni-list v-for="(item,index) in list" :key='index'><uni-list-item :title="item.title" clickable="true" thumb-size="medium" showArrow:rightText="item.rightText?item.rightText:''" @click="pages(item,index)"><template v-slot:header><view class="slot-box"><image class="slot-image" :src="item.thumb" mode="widthFix"></image></view></template></uni-list-item></uni-list></view>
</template><script>export default {data() {return {list: [],};},onLoad() {//template正常写，不变，数组使用push的方法，对象同理//必须使用push的方式，若使用list:[me.message,me.myDownloads]无效this.list.push( {title: this.$t('me.message'),thumb: '../../static/lyfkicon.png'},{title: this.$t('me.myDownloads'),thumb: '../../static/wdxzicon.png'}, {title: this.$t('me.contact'),rightText: '400-123-1234',thumb: '../../static/lxwmicon.png'}, {title: this.$t('me.logout'),thumb: '../../static/tcdlicon.png'})},}
</script>2、动态数据
先获取系统语言，然后把获取的语言存储起来，方便之后判断。
后端传给我的是以下格式：
{Name:'名字'//中文Name_EN:'name'//英文
}app.vue
onLaunch: function() {this.$store.commit('SET_LOCALE', uni.getLocale())
},store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({state: {getLocale: 'zh-Hans'},getters: {getLocale: state => state.getLocale,},mutations: {SET_LOCALE: (state, getLocale) => {state.getLocale = getLocale},}
})export default store
页面使用
<template><view class="container">//第一种<text>{{applicationLocale==='zh-Hans'?list.Title2:list.Title2_EN}}</text>//第二种<text>{{list.Name}}</text></view>
</template><script>export default {data() {return {list: [], //资源包的数据SceneData: {}, //上一页携带的参数applicationLocale: '', //语言};},onLoad(e) {this.applicationLocale = this.$store.state.getLocale//第二种，直接在函数中判断赋值，template中正常写this.GetDataGramsList()//第一种，获取到上一页参数，然后直接在template中使用三元表达式判断即可//这里上一页参数就是后端传过来的数据this.SceneData = JSON.parse(e.Scene)uni.setNavigationBarTitle({title: this.SceneData.Name,})},methods: {GetDataGramsList() {let that = thisthis.api.GetDataGramsList({sceneid: that.SceneData.Id}).then(res => {this.list = res.data.Datathis.list.forEach(i => {if (this.applicationLocale !== 'zh-Hans') {i.Name = i.Name_ENi.Img = i.Img_ENi.Id = i.Idi.Introduction = i.Introduction_ENi.Scene = i.Scene_EN}})})},}}
</script>3、系统
（1）页面标题替换
pages.json固定数据
{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/homr/index","style": {"navigationBarTitleText": "%index.title%"}}, {"path": "pages/word/index","style": {"navigationBarTitleText": "%index.word%","enablePullDownRefresh": false}}],
}动态参数--由后端返回的数据作为标题
pages.json
{"pages": [{"path": "pages/word/index","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],
}页面
onLoad(e) {let that = thisthis.content = JSON.parse(e.item)if (this.$store.state.getLocale === 'zh-Hans') {uni.setNavigationBarTitle({title: that.content.Name,})} else {uni.setNavigationBarTitle({title: that.content.Name_EN,})}},（2）导航栏替换
pages.json固定数据
{"tabBar": {"color": "#7A7E83","selectedColor": "#007AFF","borderStyle": "black","backgroundColor": "#F8F8F8","list": [{"pagePath": "pages/home/index","text": "%index.home%"},{"pagePath": "pages/word/index","text": "%index.word%"}]},
}若是不生效那就只能在tab页面中使用uni.setTabBarItem
我是把所有的都写了首页的onShow里面
onShow() {uni.setTabBarItem({index: 0,pagePath: "pages/index/index",iconPath: "static/syicon1.png",selectedIconPath: "static/syicon2.png",text: this.$t('pages.home')})uni.setTabBarItem({index: 1,pagePath: "pages/word/index",iconPath: "static/chanpin.png",selectedIconPath: "static/wjicon.png",text: this.$t('pages.word')})uni.setTabBarItem({index: 2,pagePath: "pages/me/index",iconPath: "static/wdicon1.png",selectedIconPath: "static/wdicon2.png",text: this.$t('pages.me')})},（3）弹窗文字替换
uni.showModal({title: "提示",content: "请输入正确的信息！",success: res => {if (res.confirm) {this.popupShow = true} else {}}});uni.showModal({title: this.$t('uniapp.title'),content: this.$t('uniapp.content'),success: res => {if (res.confirm) {this.popupShow = true} else {}}});【uniapp】微信小程序国际化详细版相关推荐
- uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）
前言 网上的教程都太乱了,功能不好用且一堆 BUG,没有注释很难改造示例为自己用. 本文实现了 uniapp 微信小程序平台,授权麦克风进行录音并保存为音频的功能,内置播放器可播放录音文件, 您直接复 ...
- 如何使用框架进行微信小程序开发(详细版！)
一.mpVue(Vue in Mini Program) 1.1 简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架 2.融合了原生小程序和Vue.js的特点 3.可完全组件化开发 ...
- uniapp微信小程序引用标准版交易组件
跳过前期准备,具体可看官方文档: 标准版组件引用 1.引入组件 pages.json "plugins": {"mini-shop-plugin": {&quo ...
- uniapp 微信小程序 选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能 最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
- uniapp - 微信小程序接入腾讯视频播放器功能插件，uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
效果图 在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...
- uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释
效果图 uniapp 项目编译微信小程序,一些常见的登录方式及源代码,示例代码干净整洁无BUG拿来即用. 本文示例实现了 uniapp 微信小程序项目的登录功能,包含微信授权登录.获取微信手机号登录. ...
- vue uniapp 微信小程序 搜索下拉框 模糊搜索
vue uniapp 微信小程序 搜索下拉框 模糊搜索 话不多说 直接贴代码 template <template><view class="index"> ...
- uni-app 微信小程序接入高德SDK
uni-app 微信小程序接入高德SDK 参考文档:https://lbs.amap.com/api/wx/gettingstarted 一.获取高德Key 配置高德key 二.获取高德key的操作步 ...
- uni-app 微信小程序 用高德sdk获取地理位置，以及天气信息
uni-app 微信小程序采用高德sdk获取地理位置和天气信息主要有以下几个步骤: 1. 注册高德开发者,并获取应用key 概述-微信小程序插件 | 高德地图API 在这个网页最下面,按步骤来就可以了 ...
最新文章
- 基于Grafana+SimpleJson的灵活报表解决方案
- 记一次小机器的 Python 大数据分析
- 在PyPI上发布自己的python包
- 第三章 Spark运行模式及原理
- args和kwargs以及argv用法
- 使用 Ajax 实现本地化后的客户端消息验证
- 6-23 分离链接法的删除操作函数 (20 分)
- 关于RadASM使用编译资源脚本功能无法找到指定头文件的解决方案
- 未来教育c语言二级51套答案,未来教育版计算机二级C语言上机题库(含答案)
- html在线客服,网页在线客服代码_jQuery QQ客服
- mpchart点击_在MPAndroidChart中，如何为Barchart中的每个Bar添加click事件？
- Python编程要点：列表操作和Python的Fraction类（代码实现和练习）
- 电脑通过二维码打开手机链接
- 基于神经网络的人工智能,人工神经网络心得体会
- NSG44273低侧驱动IC
- yii2框架 电商系统在线直播开发
- Lessonnbsp;52nbsp;Anbsp;prett…
- 汽车概论结业报告计算机系,无人驾驶汽车概论
- 大一新生的pta错题归纳
- 二面泛微成都Java岗 (2022.3.23)