Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
cc9782aa
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
cc9782aa
编写于
6月 27, 2024
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新文档
上级
442e1b4e
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
332 addition
and
16 deletion
+332
-16
docs/_sidebar.md
docs/_sidebar.md
+5
-3
docs/i18n.md
docs/i18n.md
+315
-0
docs/readme.md
docs/readme.md
+9
-12
docs/worktile/README.md
docs/worktile/README.md
+3
-1
未找到文件。
docs/_sidebar.md
浏览文件 @
cc9782aa
...
...
@@ -33,8 +33,10 @@
*
[
uts插件Android Debug
](
https://uniapp.dcloud.net.cn/tutorial/debug/uni-uts-debug.html
)
*
[
uts插件iOS Debug
](
https://uniapp.dcloud.net.cn/tutorial/debug/uni-uts-debug-ios.html
)
*
[
性能优化
](
performance.md
)
*
[
源码和示例
](
sample.md
)
*
[
uni错误规范
](
https://uniapp.dcloud.net.cn/tutorial/err-spec.html
)
*
[
暗黑模式
](
api/theme.md
)
*
[
国际化
](
i18n.md
)
*
[
源码和示例
](
sample.md
)
*
[
跨平台框架及原生对比
](
select.md
)
*
更新日志
*
[
正式版
](
release.md
)
...
...
docs/i18n.md
0 → 100644
浏览文件 @
cc9782aa
uni-app x的国际化,即多语言,分2种情况:
1.
固定一种外语:这种方式很简单,自己直接写就可以
2.
动态切换语言:内置多种语言,根据条件动态切换。这种略微复杂,需要仔细读下文。
首先需要分清楚,一个应用分为开发者的代码,和uni-app x框架代码2部分。它们都涉及国际化。
-
开发者代码:即开发者自己的代码里涉及的界面部分
-
框架部分:即uni-app x内置组件和API涉及界面的部分
## 开发者代码的国际化
这里的国际化指动态切换语言。如果是写死一种语言,直接在代码里写就好了。
### App平台
i18n这个vue插件库还没有适配uts,但自己实现一个语言替换机制也不难。
推荐使用这个插件来解决动态语言切换,
[
lime-i18n
](
https://ext.dcloud.net.cn/plugin?id=18954
)
### Web平台
Web平台可以使用标准的vue-i18n插件。
main.uts 引入并初始化 VueI18n。(注意写条件编译,避免App平台报错)
```
js
// 国际化 json 文件,文件内容详见下面的示例
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
(),
// 获取已设置的语言
messages
}
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
}
}
```
国际化json文件内容
```
json
{
"index.title"
:
"Hello i18n"
}
```
页面模板中使用
`$t()`
获取,并传递国际化json文件中定义的key,js中使用
`this.$t('')`
```
html
<template>
<view
class=
"container"
>
<view
class=
"title"
>
{{$t('index.title')}}
</view>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
}
}
}
</script>
```
注意:页面中设置语言后需要调用
`this.$i18n.locale = 'zh-Hans'`
后生效
## pages.json 国际化@pages
Web平台和App平台,可以通过设置tabbar和navigationbar的API来设置文字。
Web平台还额外支持如下使用方式:
项目根目录的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
## 框架内置组件和API国际化
uni-app x 的部分组件和API涉及界面,框架内置如下5种语言,如果手机os或浏览器语言在这5种内,会自适应。如果不在5种内,会默认为英文。
*
中文简体
*
中文繁体
*
英语
*
法语
*
西班牙语
涉及界面的组件和API包括:
-
showModal:默认的确定和取消按钮文字。会根据os和浏览器的语言自适应。也可以在API中通过参数自己指定文字。
-
showActionSheet:取消按钮文字。会根据os和浏览器的语言自适应。
-
chooseImage和chooseVideo:
*
打开的相机时是系统相机,跟随系统语言,不受uni-app x内置的5种语言限制。
*
打开相册时,web平台是浏览器界面,不受uni-app x内置5种语言限制;app平台内置中英文,在这2种中自适应。
### 自定义国际化内容@uni-framework
> 仅web平台支持
如果自动适配语言不满足你的需求,比如需要预置的5种语言外的更多语言。那么可以使用自定义方案。在指定目录创建指定文件,用同名词条来替换,语言地区代码请遵循 BCP47 规范。
项目根目录支持
`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.async.error"
:
"连接服务器超时,点击屏幕重试"
,
"uni.showActionSheet.cancel"
:
"取消"
,
"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.setClipboardData.success"
:
"内容已复制"
,
},
"ios"
:
{},
"android"
:
{}
}
```
## manifest.json 国际化@manifest
云打包暂不支持动态调整应用名称的语言。目前只能写死一种语言。
离线打包可自行在离线打包工程中配置。
## info.plist国际化
info.plist中涉及隐私弹框时的提示文字。
云打包文档待补充。
离线打包可自行在离线打包工程中配置。
## uniCloud国际化
注:大陆以外的终端用户访问uniCloud,开通阿里云的海外加速后可以提高访问速度。
[
详见
](
https://doc.dcloud.net.cn/uniCloud/faq.html#global-accelerate
)
### DB Schema 国际化@schema
uniCloud的 DB Schema 中涉及字段的显示名称、错误格式提示语,这些也需要国际化。
在项目根目录 uniCloud/database/locale/{数据库表名}/
`语言地区代码`
.json 文件,然后在
`*.schema.json`
文件中使用 %% 占位
```
├─uniCloud
│ ├─cloudfunctions
│ └─database
│ │ hello.schema.json
│ └─locale
│ └─hello
│ en.json
│ zh-Hans.json
```
hello.schema.json 文件内容
```
json
//
文档教程:
https://doc.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"
:
"格式无效"
}
```
## App第三方SDK界面的国际化
Web平台 内置支持Google地图。
其他如海外的支付、登录等app sdk,需自行开发插件或去插件市场搜索。
## 语言API
uni-app内置获取os或浏览器语言的API。
-
[
uni.getSystemInfo
](
./api/get-system-info.md
)
-
[
uni.getDeviceInfo
](
./api/get-device-info.md
)
Web平台还支持以下更多功能。
Web平台注意要区分系统语言和应用语言的概念。
可以得到设备OS的语言、运行宿主host的语言以及应用自身的语言。
-
[
uni.getLocale
](
/api/ui/locale?id=getlocale
)
获取应用当前使用的语言
-
[
uni.setLocale
](
/api/ui/locale?id=setlocale
)
设置应用语言
-
[
uni.onLocaleChange
](
/api/ui/locale?id=onlocalechange
)
当前应用语言发生变化时,触发回调。也就是
`uni.setLocale`
执行时。
## 语言代码
语言代码通常为两个或三个字母,参考
[
ISO 639
](
https://zh.wikipedia.org/wiki/ISO_639-1%E4%BB%A3%E7%A0%81%E8%A1%A8
)
规范
语言代码-地区代码,地区代码为两个字母,参考
[
ISO 3166-2
](
https://zh.wikipedia.org/wiki/ISO_3166-2
)
规范
\ No newline at end of file
docs/readme.md
浏览文件 @
cc9782aa
...
...
@@ -109,7 +109,7 @@ uvue渲染引擎包括uts版的vue框架(组件、数据绑定...)、跨平
```
uvue支持的是vue3语法,支持组合式API。详见
[
vue语法
](
./vue/README.md
)
uvue支持的是vue3语法,支持组合式API
和选项式API
。详见
[
vue语法
](
./vue/README.md
)
uvue在App端支持的css语法,是web的子集,类似于但优于nvue的css。仅支持flex布局,但也足以布局出需要的界面。详见
[
css语法
](
./css/README.md
)
...
...
@@ -275,9 +275,8 @@ uni-app x支持npm,但npm的大多数库是for web的,无法跨端,这些
除上述文档中声明已经完成的,还有如下需要注意:
-
平台支持:Android、Web、iOS版已发布。小程序、鸿蒙还未支持。虽然uts语言支持swift,可以写原生插件,但uvue的iOS版目前只上线了js逻辑层,还未发布swift逻辑层。
-
小程序平台:目前也可以通过编译到H5,在小程序的web-view里临时替代使用
-
鸿蒙next平台:DCloud内部已经立项。推荐不熟悉ts的开发者先学习ts,鸿蒙的artTs和uts,都是ts的变种,掌握类型系统是必须的。
-
目前不支持:暗黑模式(一些三方组件库自行实现了主题切换)、自定义路由、多语言、无障碍
-
小程序平台:目前也可以通过编译到H5,在小程序的web-view里临时替代使用。24年下半年会正式支持小程序。
-
鸿蒙next平台:24年7月会发布uni-app编译为鸿蒙hap,采用web-view;下半年内会提供uni-app x编译为鸿蒙hap,采用原生渲染。推荐不熟悉ts的开发者先学习ts,鸿蒙的artTs和uts,都是ts的变种,掌握类型系统是必须的。
-
目前不支持国际区账户创建和打包uni-app x,仅大陆区开发者账户可用。
::: info
...
...
@@ -321,19 +320,16 @@ uni-app x 毕竟是原生应用,内嵌flutter、rn这些没有任何问题,
## FAQ
-
uni-app x 支持uvue页面和vue页面混写吗?
\
仅支持uvue页面。Android平台没有内置js引擎,不能运行vue页面。但历史vue页面可以通过
uni小程序sdk
嵌入到uni-app x中。
仅支持uvue页面。Android平台没有内置js引擎,不能运行vue页面。但历史vue页面可以通过
[
uni小程序sdk
](
https://ext.dcloud.net.cn/plugin?id=17638
)
嵌入到uni-app x中。
-
uni-app x 的app端能离线打包吗?
\
初期不能,后期会提供
可以。
[
详见
](
./native/README.md
)
-
uni-app x 的App能热更新吗?
\
开发期间可以热刷,但打包后不能热更新。
\
Android作为原生应用,可以使用
uni小程序sdk
,热更新小程序。当然开发者也可自行封装原生的插件动态加载方案。
\
Android作为原生应用,可以使用
[
uni小程序sdk
](
https://ext.dcloud.net.cn/plugin?id=17638
)
,热更新小程序。当然开发者也可自行封装原生的插件动态加载方案。
\
iOS平台的js逻辑层模式,未来会推出wgt更新。
-
uni-app x 会搞插件大赛吗?
\
已经启动。欢迎大家做基于uts和uvue的插件。
[
详情
](
https://ask.dcloud.net.cn/article/40812
)
-
uni-app x 能调用所有原生API吗?
\
可以。在app端,kotlin和swift能调用的,uts就能调。在浏览器端,所有js能调用的,uts也都能调。
...
...
@@ -341,7 +337,8 @@ uni-app x 毕竟是原生应用,内嵌flutter、rn这些没有任何问题,
可以,通过uts插件,
[
https://uniapp.dcloud.net.cn/plugin/uts-plugin.html
](
https://uniapp.dcloud.net.cn/plugin/uts-plugin.html
)
-
uvue页面里的script可以直接调用原生代码吗?还是必须封装成uni_modules方式的uts原生插件?
\
uvue的script里写的就是uts,Android端可以直接调原生代码。无所谓它在
`uni_modules`
里还是外。但如果是大段的原生代码调用,还是推荐封装为独立的
`uni_modules`
。iOS平台如果是js逻辑层模式,只能在独立
`uni_modules`
中才能调用原生。
uvue的script里写的就是uts,Android端可以直接调原生代码。无所谓它在
`uni_modules`
里还是外。但如果是大段的原生代码调用,还是推荐封装为独立的
`uni_modules`
。
\
iOS平台如果是js逻辑层模式,只能在独立
`uni_modules`
中才能调用原生。
-
uni-app x 的开发只能用HBuilderX吗?
\
是的。为三方ide做插件是一个投资大且充满不确定性的事情,官方有限精力会聚焦在自身产品优化上。但DCloud是开放的,不会限制三方ide的插件支持。欢迎社区投入支持。
...
...
@@ -354,7 +351,7 @@ uni-app x 毕竟是原生应用,内嵌flutter、rn这些没有任何问题,
-
uni-app x开源吗?
*
Web版开源地址:
[
https://github.com/dcloudio/uni-app
](
https://github.com/dcloudio/uni-app
)
*
App版的组件和API实现大都开源,
会陆续发布
在项目
[
uni-api
](
https://gitcode.net/dcloud/uni-api
)
和
[
uni-component
](
https://gitcode.net/dcloud/uni-component
)
下。
\
*
App版的组件和API实现大都开源,
持续更新
在项目
[
uni-api
](
https://gitcode.net/dcloud/uni-api
)
和
[
uni-component
](
https://gitcode.net/dcloud/uni-component
)
下。
\
开发者可以了解组件和API的实现,直接修改或优化源码,修改后的代码以
[
ext api
](
https://uniapp.dcloud.net.cn/api/extapi.html
)
或组件的方式下载到项目中,即可实现在本项目中替换掉官方组件和API。
-
未来 uni-app js引擎版还维护吗?
\
...
...
docs/worktile/README.md
浏览文件 @
cc9782aa
...
...
@@ -3,5 +3,7 @@
uni-app x 支持的工程化支持,主要包括:
-
版本管理控制:如git/svn
-
运行环境管理
-
运行环境管理
:如
`if (process.env.NODE_ENV === 'development') `
,
[
详见
](
https://uniapp.dcloud.net.cn/worktile/running-env.html
)
-
自动化测试
uni-app x不支持cli创建项目,但HBuilderX创建的项目,可以调用HBuilderX的cli来通过命令行打包。
[
详见
](
https://hx.dcloud.net.cn/cli/README
)
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录