Skip to content

U
unidocs-uni-app-x-zh

DCloud / unidocs-uni-app-x-zh

通知 173
Star 2
Fork 41
U
unidocs-uni-app-x-zh
提交 33ed5b7d 编写于 作者: W wanganxp
浏览文件
操作

修改web兼容文档

上级 2f181749
显示空白变更内容
内联 并排
Showing with 89 addition and 60 deletion
docs/api/ext.md
浏览文件 @ 33ed5b7d
# 其它api
## uni api替代@uni
## Web平台
uni-app x的web版从uni-app的js引擎版迁移而来，理论上所有uni-app js引擎版的uni api在uni-app x的web版中都可以使用。但4.0版本的uni-app x的web版暂未对其他api进行测试。
## App平台uni api替代@uni
插件市场和hello示例中还有一批可替代uni内置api的插件或示例代码，比如：
- [剪切板](https://ext.dcloud.net.cn/search?q=%E5%89%AA%E5%88%87%E6%9D%BF&orderBy=Relevance&cat1=8&cat2=81)：`uni.setClipboardData`、`uni.getClipboardData`
- [拨打电话](https://ext.dcloud.net.cn/plugin?id=15235)：`uni.makePhoneCall`
......
docs/component/README.md
浏览文件 @ 33ed5b7d
......@@ -5,8 +5,7 @@ uni-app x支持的组件包括：
- 自定义vue组件
- uts组件插件
不支持的组件包括：
- 小程序wxml组件
除了微信小程序，其他平台不支持的小程序wxml组件。
支持[easycom](https://uniapp.dcloud.net.cn/component/index.html#easycom)。
......@@ -42,7 +41,7 @@ uni-app x支持的组件包括：
## props
- 仅支持[对象方式](https://cn.vuejs.org/guide/components/props.html#props-declaration)声明，不支持字符串数组方式声明。
- 支持[对象方式](https://cn.vuejs.org/guide/components/props.html#props-declaration)声明。从4.0版本qi支持字符串数组方式声明。
- 仅支持直接在 `export default` 内部声明，不支持其他位置定义后，在 `export default` 中引用。
- 复杂数据类型需要通过 `PropType` 标记类型，[详见](https://cn.vuejs.org/guide/typescript/options-api.html#typing-component-props)。
- `type` 不支持使用自定义的构造函数。
......@@ -135,7 +134,7 @@ export default {
## ref
在 `uni-app js 引擎版`中，非 `H5端` 只能用于获取自定义组件，不能用于获取内置组件实例（如：`view`、`text`）。\
在 `uni-app js 引擎版`中，非 `Web端` 只能用于获取自定义组件，不能用于获取内置组件实例（如：`view`、`text`）。\
在 `uni-app x` 中，内置组件会返回组件根节点的引用，自定义组件会返回组件实例。
**注意事项：**
......
docs/component/_sidebar.md
浏览文件 @ 33ed5b7d
......@@ -24,4 +24,4 @@
* [web-view](web-view.md)
* [animation-view](animation-view.md)
* [unicloud-db](unicloud-db.md)
* [未支持的组件及替代方案](unsupport.md)
\ No newline at end of file
* [其他组件](unsupport.md)
\ No newline at end of file
docs/component/button.md
浏览文件 @ 33ed5b7d
......@@ -10,6 +10,11 @@
<!-- UTSCOMJSON.button.compatibility -->
- 在web上，由于0.5px有兼容性问题，button的边框使用伪类实现。在App上，由于支持0.5px且不支持伪类，所以使用border实现。但由于伪类不占高度，border占高度，导致button的实际的渲染宽高在App上大于web端1px。
- button 的text区域文字，uvue下不支持 `\n` 方式换行，会直接显示 `\n` 字符。微信小程序下 `\n` 会变成一个空格。
- button按下后触发hover-class效果，在app平台，手指不松开、一直在屏幕上移动、离开button组件范围后，hover-class效果消失，同时也不会触发点击事件；在web和小程序平台，手指移动一点后，即便未离开button范围，hover-class效果也会消失，同时也不会触发点击事件。
- 无论在哪个平台，hover-class消失后松开手指，都不会触发点击事件。
<!-- UTSCOMJSON.button.children -->
<!-- UTSCOMJSON.button.reference -->
......@@ -66,5 +71,4 @@ button 组件没有 url 属性，如果要跳转页面，可以在@click中编
```
## tips
- button 的text区域文字，app-uvue下不支持 `\n` 方式换行，会直接显示 `\n` 字符。微信小程序下 `\n` 会变成一个空格
- button 的默认高度为46px，文字大小为18px，文字行高为46px。如果修改了默认高度，要注意手动调整文字行高
docs/component/image.md
浏览文件 @ 33ed5b7d
......@@ -7,6 +7,9 @@
<!-- UTSCOMJSON.image.event -->
### 图片格式
web端支持的图片格式，不同浏览器有差异，可查询caniuse。
app端支持的图片格式如下：
- [x] bmp
- [x] gif
- [x] ico
......
docs/component/input.md
浏览文件 @ 33ed5b7d
......@@ -14,3 +14,6 @@
<!-- UTSCOMJSON.input.reference -->
## Tips
- 从uni-app x 4.0起，App-Android平台 input 点击输入框外的屏幕会自动收起软键盘。
- 从uni-app x 4.0起，App-Android平台 input 的 font-size 默认值统一为 16px。
docs/component/textarea.md
浏览文件 @ 33ed5b7d
......@@ -14,7 +14,9 @@
<!-- UTSCOMJSON.textarea.reference -->
## 注意事项
## Tips
- 从 uni-app x 4.0 起，App-Android平台 textarea 点击输入框外的屏幕会自动收起软键盘。
* 从 uni-app x 4.0 起，App-Android平台 textarea 的 font-size 默认值统一为 16px，line-height 默认值为 1.2em，width 默认值为300px
* 在Android 9以下的系统版本，样式`line-height`点击键盘换行时行间距设置无效，此问题是Android系统的的bug，后续解决。
* 由于Android系统限制，textarea的键盘右下角按钮只能是`换行`，所以暂时不提供`confirm-type`属性。
\ No newline at end of file
docs/component/unsupport.md
浏览文件 @ 33ed5b7d
# 不支持的组件及替代方案
# 其他组件
## App平台
uni-app x在App端还有一批组件未与uni-app js引擎版拉齐。有的在排期中，有的提供了替代方案，有的需开发者自行开发插件。
......@@ -18,3 +20,7 @@ uni-app x在App端还有一批组件未与uni-app js引擎版拉齐。有的在
* 或使用web-view中的地图
- live-pusher：需开发uts组件
- label：用view加事件来替代
## Web平台
uni-app x的web版从uni-app的js引擎版迁移而来，理论上所有uni-app js引擎版的组件在uni-app x的web版中都可以使用。但4.0版本的uni-app x的web版暂未对其他组件进行测试。
\ No newline at end of file
docs/component/video.md
浏览文件 @ 33ed5b7d
......@@ -9,6 +9,9 @@
<!-- UTSCOMJSON.video.component_type -->
### 视频格式
web端支持的视频格式，不同浏览器有差异，可查询caniuse。
app端支持的视频格式如下：
- [x] mp4
- [x] m4v
- [x] mov
......@@ -44,9 +47,10 @@ video的操作api为[uni.createVideoContext()](../api/create-video-context.md)
<!-- UTSCOMJSON.video.reference -->
### Bug & Tips@tips
- 暂不支持横屏全屏后放置子组件
- App暂不支持横屏全屏后放置子组件
- 标准运行基座默认不包含intel x86 cpu的兼容so库，所以video组件在标准基座运行时无法在x86 cpu的设备上运行（常见于模拟器）。如需支持x86 cpu，请在manifest里配置`abiFilters`，打包或自定义基座后生效 [详见](https://uniapp.dcloud.net.cn/uni-app-x/manifest.html#android)
- 默认拦截触摸事件，目前会导致父组件无法响应触摸事件
- App默认拦截触摸事件，目前会导致父组件无法响应触摸事件
- video 默认宽度为300px，高度为225px。（App平台从 uni-app x 4.0起支持该默认宽高）
#### 本地文件播放
本地视频文件，有2种方式：
......
docs/component/web-view.md
浏览文件 @ 33ed5b7d
......@@ -12,6 +12,9 @@
<!-- UTSCOMJSON.web-view.compatibility -->
- web和小程序上，web-view是全屏的，即页面只能显示一个铺满的web-view。
- app端的web-view组件可以自由调整大小和位置。在uni-app x 4.0以前，默认宽、高为0px，页面中使用时需设置相应的 css 属性控制组件宽高才能正常显示。从4.0起改为默认宽高100%。
<!-- UTSCOMJSON.web-view.children -->
<!-- UTSCOMJSON.web-view.reference -->
......@@ -53,5 +56,4 @@ uts端在 `<web-view>` 组件的 `message` 事件回调 `event.detail.data` 中
## 注意
- web-view组件为系统web-view，内核版本号不由uni-app x框架控制。如需x5等webview，需使用uts插件，[详见](https://ext.dcloud.net.cn/search?q=x5)。
- web-view组件默认宽、高为0px，页面中使用时需设置相应的 css 属性控制组件宽高才能正常显示。
- 一个页面的web-view组件数量不宜太多，每个web-view都会占用不少内存
docs/css/README.md
浏览文件 @ 33ed5b7d
......@@ -296,10 +296,22 @@ App仅对同层的兄弟节点之间支持z-index来调节层级。不支持脱
|env() | | |
|calc() | | |
rpx是一个以设备750px为基准的单位，750rpx即为屏幕宽度，375rpx即为屏幕一半宽度。它比较适合适配不同宽度的手机。但rpx的性能和精度不如px，如果px可满足需求，尽量使用px。
**注意**
> App平台长度 `<length>` 可以不设置单位，不设置单位时当做 px 处理
> Web平台长度 `<length>` 必须设置单位，不设置单位时当做无效值处理
> 实际项目中为了更好的在各端兼容，推荐使用长度 `<length>` 时指定明确单位
- 长度默认值差异
* App平台长度 `<length>` 可以不设置单位，不设置单位时当做 px 处理
* Web平台长度 `<length>` 必须设置单位，不设置单位时当做无效值处理
实际项目中为了更好的在各端兼容，推荐使用长度 `<length>` 时指定明确单位
- 单位精度问题
px、rpx属于逻辑像素，在不同dpi的设备上，需要转换为物理像素。当产生浮点数时，由于精度保留策略的不同，在web和app可能造成细微的误差。
尤其是浏览器对于小数点的px兼容不够好，比如0.5px很难正常显示。
rpx和百分比，比px更容易产生浮点数，所以如果px能满足需求，尽量不用rpx和百分比。
## 颜色
|类别 |App支持情况 |备注 |
......
docs/css/border-width.md
浏览文件 @ 33ed5b7d
......@@ -10,11 +10,8 @@
<!-- CSSJSON.border-width.defaultValue -->
**注意**
- App平台
+ HBuilderX3.92及以前版本默认值为0px，HBuilderX3.93+版本调整默认值为thin
+ HBuilderX4.0+版本调整默认值为medium
- Web端
+ Android平台Chrome浏览器或内置Webview中实际默认值不是medium，是根据设备自动计算的介于thin和medium中间的值
- App平台，HBuilderX3.92及以前版本默认值为0px；HBuilderX3.93+版本调整默认值为thin；HBuilderX4.0+版本调整默认值为medium，与W3C规范保持一致。
- Android平台Chrome浏览器或内置Webview中，实际默认值不是medium，是根据设备自动计算的介于thin和medium中间的值。这与W3C规范不符，在uni-app x编译到web时，对其进行了css重置，调整默认值为medium。
<!-- CSSJSON.border-width.unixTags -->
......
docs/performance.md
浏览文件 @ 33ed5b7d
# uni-app x 性能优化
# uni-app x 的App性能优化
uni-app x 本质就是原生应用，性能达到了原生水平。
uni-app x 开发的App，本质是换了一种写法的原生应用，性能达到了原生水平。
但即便是原生开发者，使用传统的Android开发，如果代码写不好，也一样性能很差。
......
docs/project.md
浏览文件 @ 33ed5b7d
......@@ -75,14 +75,8 @@ uni-app x的真机运行基座（playground），和uni-app js引擎版不同，
uni-app x运行时，控制台右上角可以选择开启原生日志。
目前仅支持真机运行，不支持断点debug。
目前支持真机运行、从HBuilderX 4.0起支持uts插件的debug断点。但目前还不支持uvue的断点debug。
## 发行
uni-app x目前只能打包apk。
暂不支持渠道包。
不支持wgt热更新、不支持安心打包。
下载到项目下的uts插件可打包含入。
\ No newline at end of file
uni-app x App平台，目前只能打包apk。暂不支持渠道包。不支持wgt热更新、不支持安心打包。下载到项目下的uts插件可打包含入。
\ No newline at end of file
docs/readme.md
浏览文件 @ 33ed5b7d
......@@ -54,7 +54,7 @@ uvue是一套基于uts的、兼容vue语法的、跨iOS和Android的、原生渲
uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平台基础ui、css引擎。
有了uvue，开发者就可以使用vue语法、css来写一套页面，编译为不同平台的、高性能的纯原生界面。
有了uvue，开发者就可以使用vue语法、css来快速编写页面，编译为不同平台的、高性能的纯原生界面。
在过去的跨平台方案中，逻辑层和ui层的通信始终是痛点。
......@@ -62,7 +62,7 @@ uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平
> * 所以在nvue渲染时，增加了bindingX技术
> * 所以在skyline渲染时，增加了worklet技术
但这些补丁技术都不治根。过去只有flutter解决了dart和ui层的通信问题，但dart和原生层通信也还是有延时，对象传递需要序列化；另外混合原生控件的渲染也有问题，比如原生的信息流广告、输入法交互。
但这些补丁技术都不治根。过去只有flutter解决了dart和ui层的通信问题，但dart和原生层通信也还是有延时，对象传递需要序列化；另外混合原生控件的渲染也有问题，比如原生的信息流广告、输入法交互。[详见](select.md)
在 uni-app x 中，App端只有1种编程语言（Android里是kotlin），再也没有通信问题。渲染引擎也都是原生渲染，比混合渲染的内存占用更低、稳定性兼容性更好。
......@@ -110,11 +110,11 @@ uvue渲染引擎包括uts版的vue框架（组件、数据绑定...）、跨平
> 上述页面没有涉及uts不允许的动态类型，也没有涉及uvue不支持的css，所以它实际上和uni-app js版的vue页面没有区别。
uvue支持的vue语法，是按vue3实现的，但目前不支持setup。详见[vue语法](./vue/README.md)
uvue支持的是vue3语法，从uni-app x 4.0起支持组合式API。详见[vue语法](./vue/README.md)
uvue支持的css语法，是web的子集，类似于nvue的css。仅支持flex布局。但也足以布局出需要的界面。详见[css语法](./css/README.md)
uvue在App端支持的css语法，是web的子集，类似于nvue的css。仅支持flex布局。但也足以布局出需要的界面。详见[css语法](./css/README.md)
以上约束特指App端的uvue引擎。如果把uvue页面编译到小程序和web平台，它的script仍然会被编译为js，web的样式也都可以使用。
使用该css子集，可保证跨端。如果把uvue页面编译到web平台，则web的其他css也都可以使用。
更多示例代码参考：[hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x)
......@@ -125,15 +125,12 @@ uni-app x支持的组件包括：
- 自定义vue组件：使用内置组件和vue组件技术进行封装的组件，支持easycom。
- uts组件插件：用于原生sdk的ui以组件的方式嵌入。
不支持的组件包括：
- 小程序wxml组件
除了微信小程序，其他端不支持小程序wxml组件。
更多组件介绍，[详见](./component/README.md)
## 4. API
uni-app js引擎版，支持 plus API 和 weex API。但 uni-app x 中，不再支持这些API。
uni-app x支持的API包括：
1. uts的API [详见](./uts/buildin-object-api/global.md)
......@@ -172,12 +169,14 @@ uni.的api，大多是uts开发的，它们会陆续开源在[uni-api](https://g
插件市场也有很多做好的uts插件，方便开发者拿来即用。[uts插件](https://ext.dcloud.net.cn/?cat1=8&type=UpdatedDate)
uni-app js引擎版，支持 plus API 和 weex API。但 uni-app x 中，不再支持这些API。
## 5. 全局文件
- manifest.json 仅支持基本的名称图标配置，暂未支持splash，但uni-app x项目打包后启动速度飞快，可以自己做splash。[详见](./collocation/manifest.md)
- manifest.json [详见](./collocation/manifest.md)
- AndroidManifest.xml 与原生开发相同。注意Android权限配置在这里配置，而不是在manifest.json中 [详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android.html)
- app.uvue [详见](./collocation/app.md)
- pages.json 不支持app-plus的内容。[详见](./collocation/pagesjson.md)
- uni.scss 正常支持。但注意uvue仅能使用[css子集](./css/README.md)
- uni.scss 正常支持。但注意app-uvue仅能使用[css子集](./css/README.md)
## 6. 插件生态
......@@ -203,8 +202,6 @@ uts插件分类直达：[https://ext.dcloud.net.cn/?cat1=8&type=UpdatedDate](htt
uvue组件、uts sdk、uni-app x前端页面/项目模板。这些前端代码仍然使用uni-app x的vue、uts、css来开发。
后续DCloud会提供uni-app x编译为web，届时这些插件也可以适配到uni-app js引擎版的全端。
在插件市场搜索框下方有uni-app x的checkbox，勾选可见到所有适配uni-app x的插件：[https://ext.dcloud.net.cn/?uni-appx=1](https://ext.dcloud.net.cn/?uni-appx=1)
一般情况下，原生库的能力是大于js库的。不太可能有一个功能必须使用js库才能使用。比如md5，js有库，原生也有库，调用一个jar也很方便。
......@@ -222,18 +219,19 @@ uvue组件、uts sdk、uni-app x前端页面/项目模板。这些前端代码
- [easyX电商组件库](https://ext.dcloud.net.cn/plugin?id=15602)：电商业务常见的各种组件库
## 一期范围及路线图
## 路线图
除上述文档中声明已经完成的，还有如下需要注意：
- 平台支持：一期只有Android。虽然uts语言支持swift，可以写原生插件，但iOS版的uvue还未开发完毕。对于iOS或其他小程序、web平台，开发者可将uvue文件后缀改为vue或nvue，如果没有写Android专有代码，那么也可以使用uni-app js引擎版编译到其他平台，包括iOS App、web及各家小程序。尤其在app-iOS上，由于设备性能本就优秀，所以js的方案的性能也足够满足很多开发者。
- 一期不支持：横屏切换、暗黑模式、自定义路由、多语言、无障碍
- 一期不支持国际区账户创建和打包uni-app x，仅大陆区开发者账户可用。
- 平台支持：目前只有Android和Web。虽然uts语言支持swift，可以写原生插件，但iOS版的uvue还未开发完毕。目前替代方案有：
1. 将uni-app x编译为Web，在iOS上使用uni-app js引擎版的Web-view加载。
2. 对于iOS或其他小程序、web平台，开发者可将uvue文件后缀改为vue或nvue，调整后适配到到uni-app js引擎版编译到其他平台，包括iOS App、web及各家小程序。
3. 等待iOS发版，目前iOS已经在测试阶段，春节后将发版。
- 目前不支持：横屏切换、暗黑模式、自定义路由、多语言、无障碍
- 目前不支持国际区账户创建和打包uni-app x，仅大陆区开发者账户可用。
欢迎去[需求墙](https://vote.dcloud.net.cn/#/?name=uni-app%20x)投票，告诉我们你的需求优先级。
目前uni-app x的web版处于测试阶段、iOS版处于开发阶段。所以uni-app x的web版很快会上线，而iOS版也计划在插件大赛结束前上线。
很多开发者关心鸿蒙next的适配。uni-app x使用uts，而鸿蒙使用arkTs，都是ts的变种，适配并不复杂。DCloud和鸿蒙团队一直保持着沟通，会在合适的时机启动。
## 案例
......@@ -267,26 +265,26 @@ uni-app 的自动化测试教程详见：[https://uniapp.dcloud.net.cn/worktile/
uni-app x 毕竟是原生应用，内嵌flutter、rn这些没有任何问题，包括调用其他原生写的界面也可以。把之前的页面封装为[uts插件](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)，云打包就可以用。
插件市场已经有内嵌flutter的uts版本。[详见](https://ext.dcloud.net.cn/search?q=flutter&orderBy=Relevance&cat1=8)
插件市场已经有uts版本的[内嵌flutter插件](https://ext.dcloud.net.cn/search?q=flutter&orderBy=Relevance&cat1=8)、[内嵌compose ui插件](https://ext.dcloud.net.cn/search?q=compose+ui&orderBy=Relevance&cat1=8)
至于把 uni-app x 作为一个sdk内嵌到其他原生应用中，后续提供离线打包方案时会提供。
## FAQ
- uni-app x 支持uvue页面和vue页面混写吗？
仅支持uvue页面。没有js引擎，不能运行vue页面。但历史vue页面可以通过 uni小程序sdk 嵌入到uni-app x中。
仅支持uvue页面。Android平台没有内置js引擎，不能运行vue页面。但历史vue页面可以通过 uni小程序sdk 嵌入到uni-app x中。
- uni-app x 的app端能离线打包吗？
初期不能，后期会提供
- uni-app x 能热更新吗？
开发期间可以热刷，但打包后不能热更新。开发者可自行封装原生的插件动态加载方案或使用uni小程序sdk。
- uni-app x 的App能热更新吗？
开发期间可以热刷，但Android打包后不能热更新。开发者可自行封装原生的插件动态加载方案或使用uni小程序sdk。
- uni-app x 会搞插件大赛吗？
已经启动。欢迎大家做基于uts和uvue的插件。[详情](https://ask.dcloud.net.cn/article/40812)
- uni-app x 能调用所有原生API吗？
可以。在app端，kotlin和swift能调的，uts就能调。
可以。在app端，kotlin和swift能调用的，uts就能调。在浏览器端，所有js能调用的，uts也都能调。
- uni-app x 能集成原生sdk吗？
可以，通过uts插件，[https://uniapp.dcloud.net.cn/plugin/uts-plugin.html](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html)
......@@ -297,11 +295,12 @@ uni-app x 毕竟是原生应用，内嵌flutter、rn这些没有任何问题，
- uni-app x 的开发只能用HBuilderX吗？
是的。为三方ide做插件是一个投资大且充满不确定性的事情，官方有限精力会聚焦在自身产品优化上。但DCloud是开放的，不会限制三方ide的插件支持。
- uni-app x 支持最低的Android版本多少？
Android 5+
- uni-app x 支持最低的Android版本多少？浏览器版本多少？
Android App最低支持`Android 5`；Web版最低支持`chrome 64`、`safari 11.1`、`firefox 62`、`edge 79`、`safari on iOS 12`
- uni-app x开源吗？
uni-app x的组件和API实现都会开源，会陆续发布在项目[uni-component](https://gitcode.net/dcloud/uni-component)和[uni-api](https://gitcode.net/dcloud/uni-api)下。\
* Web版开源地址：[https://github.com/dcloudio/uni-app](https://github.com/dcloudio/uni-app)
* App版的组件和API实现都会开源，会陆续发布在项目[uni-component](https://gitcode.net/dcloud/uni-component)和[uni-api](https://gitcode.net/dcloud/uni-api)下。\
开发者可以了解组件和API的实现，直接修改或优化源码，修改后的代码以[ext api](https://uniapp.dcloud.net.cn/api/extapi.html)或组件的方式下载到项目中，即可实现在本项目中替换掉官方组件和API。
- 未来 uni-app js引擎版还维护吗？
......
docs/vue/README.md
浏览文件 @ 33ed5b7d
# vue
uni-app x的vue规范，按照vue3规范实现，但目前不支持setup组合式写法，仅支持option选项式写法。
uni-app x的vue规范，按照vue3规范实现，从4.0起支持组合式写法。
本文暂时只包括兼容性表格，vue功能详情另见 [vue3概述](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#)、[Vue3 API](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html)。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或