i18n.md 6.2 KB
Newer Older
Q
qiang 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
使用uni-app做出海App的开发者越来越多,大家都关心国际化的问题。

## 框架内置组件和API国际化

uni-app 从 3.1.5 版本开始框架内置组件开始完善国际化支持,这些组件内置如下语言:

* 中文简体
* 中文繁体
* 英语
* 法语
* 西班牙语

组件和接口显示会根据系统语言环境自动切换,未支持的系统语言环境会显示为英文

## 应用内容国际化
vue和js里的内容国际化是通行方案。
uni-app基于vue.js,有成熟的i18n插件,[这里是uni-app开发者分享的i18n插件的使用](https://ask.dcloud.net.cn/article/35102)

d-u-a's avatar
d-u-a 已提交
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
## uni-app 框架国际化@uni-framework

项目根目录支持 `locale` 目录,locale/uni-app.`语言地区代码`.json,如:uni-app.en.json,uni-app.zh-Hans.json,uni-app.zh-Hant.json


```
├── locale
│   ├── uni-app.en.json
│   ├── uni-app.zh-Hans.json
│   └── uni-app.zh-Hant.json
```

uni-app.zh-Hans.json 文件

```json
{
  "common": {
    "uni.app.quit": "再按一次退出应用",
    "uni.async.error": "连接服务器超时,点击屏幕重试",
    "uni.showActionSheet.cancel": "取消",
    "uni.showToast.unpaired": "请注意 showToast 与 hideToast 必须配对使用",
    "uni.showLoading.unpaired": "请注意 showLoading 与 hideLoading 必须配对使用",
    "uni.showModal.cancel": "取消",
    "uni.showModal.confirm": "确定",
    "uni.chooseImage.cancel": "取消",
    "uni.chooseImage.sourceType.album": "从相册选择",
    "uni.chooseImage.sourceType.camera": "拍摄",
    "uni.chooseVideo.cancel": "取消",
    "uni.chooseVideo.sourceType.album": "从相册选择",
    "uni.chooseVideo.sourceType.camera": "拍摄",
    "uni.previewImage.cancel": "取消",
    "uni.previewImage.button.save": "保存图像",
    "uni.previewImage.save.success": "保存图像到相册成功",
    "uni.previewImage.save.fail": "保存图像到相册失败",
    "uni.setClipboardData.success": "内容已复制",
    "uni.scanCode.title": "扫码",
    "uni.scanCode.album": "相册",
    "uni.scanCode.fail": "识别失败",
    "uni.scanCode.flash.on": "轻触照亮",
    "uni.scanCode.flash.off": "轻触关闭",
    "uni.startSoterAuthentication.authContent": "指纹识别中...",
    "uni.picker.done": "完成",
    "uni.picker.cancel": "取消",
    "uni.video.danmu": "弹幕",
    "uni.video.volume": "音量",
    "uni.button.feedback.title": "问题反馈",
    "uni.button.feedback.send": "发送"
  },
  "ios": {},
  "android": {}
}
```


## pages.json 国际化@pages

Q
qiang 已提交
75
pages.json不属于vue部分,其中的原生tabbar和原生导航栏里也有文字内容。这部分内容的国际化方案如下:
d-u-a's avatar
d-u-a 已提交
76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141

项目根目录的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

和 pages.json 一致,在项目根目录增加 locale/uni-app.`语言地区代码`.json 文件,然后在 `manifest.json` 中使用 %% 占位

```json
{
  "name" : "%app.name%",
  "appid" : "",
  "description" : "",
  "versionName" : "1.0.0",
  "versionCode" : "100",
  "locale": "zh-Hans" // 设置默认语言,
}
```

`manifest.json` 中支持配置默认语言,参见上面的示例,默认跟随系统语言

d-u-a's avatar
d-u-a 已提交
142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
## schema 国际化@schema

HBuilderX 3.3.0+

在项目根目录 uniCloud/database/locale/{数据库表名}/`语言地区代码`.json 文件,然后在 `*.schema.json` 文件中使用 %% 占位

```
├─uniCloud
│  ├─cloudfunctions
│  └─database
│      │  hello.schema.json
│      └─locale
│          └─hello
│              en.json
│              zh-Hans.json
```

hello.schema.json 文件内容

```json
// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
{
  "bsonType": "object",
  "required": [],
  "permission": {
    "read": false,
    "create": false,
    "update": false,
    "delete": false
  },
  "properties": {
    "_id": {
      "description": "ID"
    },
    "name": {
      "bsonType": "string",
      "label": "%name%",
      "errorMessage": {
        "format": "{label}%name.format%"
      }
    }
  }
}
```

en.json 文件内容

```json
{
  "name": "Name",
  "name.format": " invalid format"
}
```

zh-Hans 文件内容

```json
{
  "name": "姓名",
  "name.format": "格式无效"
}
```

Q
qiang 已提交
205 206

## 应用中原生ui界面的国际化
d-u-a's avatar
d-u-a 已提交
207
应用中调用到相册选择、地图等包含界面的原生能力时,这些原生界面的ui无法在前端控制。
Q
qiang 已提交
208 209 210 211 212
- 地图部分,可以使用web-view组件内嵌google的web地图,也可以用uni-app的原生插件机制封装google原生地图sdk。
- 其他原生ui界面如相册选择,无法国际化,可以自己开发一个原生插件来替代之。

## 应用名称及iOS隐私提示语的国际化
云打包详见[https://ask.dcloud.net.cn/article/35860](https://ask.dcloud.net.cn/article/35860)
d-u-a's avatar
d-u-a 已提交
213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238
离线打包自行在原生工程中配置。


## 语言API

[uni.getLocale](/api/ui/locale?id=getlocale)

获取当前区域设置(语言)

[uni.setLocale](/api/ui/locale?id=setlocale)

设置当前区域设置(语言)

[uni.onLocaleChange](/api/ui/locale?id=onlocalechange)

当前区域设置(语言)发生变化时,触发回调


## 国际化示例项目@helloi18n

Github: [hello i18n](https://github.com/dcloudio/hello-i18n.git)


**注意:**
- 小程序平台暂不支持动态变化,编译时仅生成默认语言json配置
- Android 平台因原生层限制,将自动重启,其他平台均实时变化,包括已打开的所有页面