Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
d1da0f20
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3598
Star
108
Fork
921
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
109
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
109
合并请求
109
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
未验证
提交
d1da0f20
编写于
12月 03, 2021
作者:
DCloud_Heavensoft
提交者:
Gitee
12月 03, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs/collocation/i18n.md.
上级
970aabd0
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
96 addition
and
70 deletion
+96
-70
docs/collocation/i18n.md
docs/collocation/i18n.md
+96
-70
未找到文件。
docs/collocation/i18n.md
浏览文件 @
d1da0f20
使用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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录