未验证 提交 d1da0f20 编写于 作者: DCloud_Heavensoft's avatar DCloud_Heavensoft 提交者: Gitee

update docs/collocation/i18n.md.

上级 970aabd0
使用uni-app做出海App的开发者越来越多,大家都关心国际化的问题 uni-app的国际化,即多语言,分为应用部分和框架部分
## 框架内置组件和API国际化 - 应用部分,即开发者自己的代码里涉及的界面部分
- 框架部分,即uni-app内置组件和API涉及界面的部分
uni-app 从 3.1.5 版本开始框架内置组件开始完善国际化支持,这些组件内置如下语言: 不同端的国际化方案也有差异,uni-app 自 3.1.5起,App 和 H5 支持框架国际化。小程序平台的国际化依赖于小程序平台框架自身。一般而言海外用户更多使用的是App和H5。
* 中文简体 可以在HBuilderX新建项目里选择`Hello i18n`示例或者插件市场查看[https://ext.dcloud.net.cn/plugin?id=6462](https://ext.dcloud.net.cn/plugin?id=6462)
* 中文繁体
* 英语
* 法语
* 西班牙语
组件和接口显示会根据系统语言环境自动切换,未支持的系统语言环境会显示为英文 ## vue界面和js内容的国际化
## 应用内容国际化 vue和js里的内容国际化是与web通行的方案。
vue和js里的内容国际化是通行方案。
main.js 引入并初始化 VueI18n main.js 引入并初始化 VueI18n
...@@ -92,7 +88,85 @@ export function createApp() { ...@@ -92,7 +88,85 @@ export function createApp() {
注意:页面中设置语言后需要调用 `this.$i18n.locale = 'zh-Hans'` 后生效 注意:页面中设置语言后需要调用 `this.$i18n.locale = 'zh-Hans'` 后生效
## uni-app 框架国际化@uni-framework ## pages.json 国际化@pages
pages.json不属于vue页面,其中的原生tabbar和原生导航栏里也有文字内容。这部分内容的国际化方案如下:
项目根目录的locale目录下配置语言json文件,locale/`语言地区代码`.json,如:en.json,zh-Hans.json,zh-Hant.json
```
├── locale
│ ├── en.json
│ ├── zh-Hans.json
│ └── zh-Hant.json
```
语言文件示例(zh-Hans.json)
```json
{
"app.name": "Hello uni-app",
"index.title": "首页"
}
```
pages.json 示例
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "%index.title%" // locale目录下 语言地区代码.json 文件中定义的 key,使用 %% 占位
}
}
],
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "%index.home%"
}
]
}
}
```
pages.json 支持以下属性配置国际化信息
- navigationBarTitleText
- titleNView->titleText
- titleNView->searchInput->placeholder
- tabBar->list->text
注:小程序下不支持这种国际化方案,也可以使用设置tabbar和navigationbar的API来设置文字。或者废弃原生tabbar和navigationbar,使用自定义方式。
## 框架内置组件和API国际化
uni-app 有内置的基础组件,比如picker,或者与界面相关的API,比如showModal。这些界面包含的文字也需要国际化。
自 3.1.5 版本起,App和H5平台内置的基础组件和接口相关的文字内容支持国际化。
这部分国际化,提供了2种策略,有自动策略,也有自定义方案。
### 自动适配手机或浏览器语言
uni-app 基础组件和API,内置如下语言:
* 中文简体
* 中文繁体
* 英语
* 法语
* 西班牙语
内置组件和接口显示会根据系统语言环境自动切换,未支持的系统语言环境会显示为英文。
> uni-ui在1.4.8版本后也支持国际化
### 自定义国际化内容@uni-framework
如果自动适配语言不满足你的需求,比如需要预置的5种语言外的更多语言。那么可以使用自定义方案。在指定目录创建指定文件,用同名词条来替换。
项目根目录支持 `locale` 目录,locale/uni-app.`语言地区代码`.json,如:uni-app.en.json,uni-app.zh-Hans.json,uni-app.zh-Hant.json 项目根目录支持 `locale` 目录,locale/uni-app.`语言地区代码`.json,如:uni-app.en.json,uni-app.zh-Hans.json,uni-app.zh-Hant.json
...@@ -146,57 +220,6 @@ uni-app.zh-Hans.json 文件 ...@@ -146,57 +220,6 @@ uni-app.zh-Hans.json 文件
``` ```
## pages.json 国际化@pages
pages.json不属于vue部分,其中的原生tabbar和原生导航栏里也有文字内容。这部分内容的国际化方案如下:
项目根目录的locale目录下配置语言json文件,locale/`语言地区代码`.json,如:en.json,zh-Hans.json,zh-Hant.json
```
├── locale
│ ├── en.json
│ ├── zh-Hans.json
│ └── zh-Hant.json
```
语言文件示例(zh-Hans.json)
```json
{
"app.name": "Hello uni-app",
"index.title": "首页"
}
```
pages.json 示例
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "%index.title%" // locale目录下 语言地区代码.json 文件中定义的 key,使用 %% 占位
}
}
],
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "%index.home%"
}
]
}
}
```
pages.json 支持以下属性配置国际化信息
- navigationBarTitleText
- titleNView->titleText
- titleNView->searchInput->placeholder
- tabBar->list->text
## manifest.json 国际化@manifest ## manifest.json 国际化@manifest
...@@ -219,6 +242,8 @@ pages.json 支持以下属性配置国际化信息 ...@@ -219,6 +242,8 @@ pages.json 支持以下属性配置国际化信息
HBuilderX 3.3.0+ HBuilderX 3.3.0+
schema中涉及字段的显示名称、错误格式提示语,这些也需要国际化。
在项目根目录 uniCloud/database/locale/{数据库表名}/`语言地区代码`.json 文件,然后在 `*.schema.json` 文件中使用 %% 占位 在项目根目录 uniCloud/database/locale/{数据库表名}/`语言地区代码`.json 文件,然后在 `*.schema.json` 文件中使用 %% 占位
``` ```
...@@ -279,10 +304,10 @@ zh-Hans 文件内容 ...@@ -279,10 +304,10 @@ zh-Hans 文件内容
``` ```
## 应用中原生ui界面的国际化 ## App第三方SDK界面的国际化
应用中调用到相册选择、地图等包含界面的原生能力时,这些原生界面的ui无法在前端控制 uni-app App端sdk国际化依赖于sdk自身,一般而言推荐直接使用适配海外的SDK
- 地图部分,可以使用web-view组件内嵌google的web地图,也可以用uni-app的原生插件机制封装google原生地图sdk。
- 其他原生ui界面如相册选择,无法国际化,可以自己开发一个原生插件来替代之 如map的sdk,海外可直接使用google地图。相关插件在插件市场均可搜到
## 应用名称及iOS隐私提示语的国际化 ## 应用名称及iOS隐私提示语的国际化
云打包详见[https://ask.dcloud.net.cn/article/35860](https://ask.dcloud.net.cn/article/35860) 云打包详见[https://ask.dcloud.net.cn/article/35860](https://ask.dcloud.net.cn/article/35860)
...@@ -291,6 +316,8 @@ zh-Hans 文件内容 ...@@ -291,6 +316,8 @@ zh-Hans 文件内容
## 语言API ## 语言API
uni-app内置了一批与国际化相关的API和生命周期,如下:
[uni.getLocale](/api/ui/locale?id=getlocale) [uni.getLocale](/api/ui/locale?id=getlocale)
获取当前区域设置(语言) 获取当前区域设置(语言)
...@@ -306,9 +333,8 @@ zh-Hans 文件内容 ...@@ -306,9 +333,8 @@ zh-Hans 文件内容
## 国际化示例项目@helloi18n ## 国际化示例项目@helloi18n
Github: [hello i18n](https://github.com/dcloudio/hello-i18n.git) HBuilderX 3.3 起,新建项目可以直接选择`hello i18n`模板,或者去插件市场查阅[https://ext.dcloud.net.cn/plugin?id=6462](https://ext.dcloud.net.cn/plugin?id=6462)
**注意:** **注意:**
- 小程序平台暂不支持动态变化,编译时仅生成默认语言json配置 - 小程序平台暂不支持动态变化,编译时仅生成默认语言json配置
- Android 平台因原生层限制,将自动重启其他平台均实时变化,包括已打开的所有页面 - Android 平台因原生层限制,将自动重启其他平台均实时变化,包括已打开的所有页面
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册