插件市場下載示例

hello-i18n 示例工程 - DCloud 插件市場

項目使用

main.js引入

// 國際化 json 文件，文件內(nèi)容詳見下面的示例
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
const messages = {
	en,
	'zh-Hans': zhHans,
	'zh-Hant': zhHant
}

let i18nConfig = {
  locale: uni.getLocale(),// 獲取已設(shè)置的語言
  messages
}

// VUE2
// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'// v8.x
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  i18n,
  ...App
})
app.$mount()
// #endif

// VUE3
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'// v9.x
const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  return {
    app
  }
}
// #endif

創(chuàng)建文件

?en.json----"自定義key":"英文"

?zh-Hans.json----"自定義key":"中文"? ??

?注意：json文件中的名稱需要中英文對應(yīng)。

index.js

import en from './en.json'
import zhHans from './zh-Hans.json'
export default {
	en,
	'zh-Hans': zhHans,
}

?頁面中使用

vue頁面模板使用----$t('')

<template>
  <view class="container">
<--  index.title 為json文件中 自定義key -->
    <view class="title">{{$t('index.title')}}</view>
  </view>
</template>

nvue頁面模板使用----t('')

import messages from '../../locale/index.js'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	const {
		t
	} = initVueI18n(messages)

        // 初始化
		created() {
			const {
				t
			} = initVueI18n(messages);
			this.t = t;
		},

pages.json 使用 ----%index.title%

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "%index.title%" // locale目錄下 語言地區(qū)代碼.json 文件中定義的 key，使用 %% 占位
      }
    }
  ],
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "%index.home%"
      }
    ]
  }
}

data中使用---this.$t('')

data() {
			return {
              // json 文件中定義的 key
				name: this.$t('dhjl'),
			}
		},

切換語言---在某一個頁面寫入

<view class="" style="margin-top: 20px;margin-left: 290px;">
			<u-radio-group v-model="radiovalue1" placement="column">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in locales" :key="index"
					:label="item.text" :name="item.text" @change="onLocaleChange(item)">
				</u-radio>
			</u-radio-group>
		</view>

computed:{
		  locales() {
		    return [{
		        text: this.$t('locale.en'),
		        code: 'en'
		      },
		      {
		        text: this.$t('locale.zh-hans'),
		        code: 'zh-Hans'
		      }
		    ]
		  }
		},

// 更改語言
			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;
			  }
			},

啟動項目，就可以成功切換語言了。

如果遇到切換語言的時候不能全局切換，可以嘗試注釋掉以下代碼。

以上就是關(guān)于在uniapp中使用國際化的一些說明，內(nèi)容不多，操作簡單。文章來源地址http://www.zghlxwxcb.cn/news/detail-463484.html

到了這里，關(guān)于使用uniapp開發(fā)國際化---app，vue,nvue的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！