From 061e41c3ba9913f7d81e36a21329e866ba374ec6 Mon Sep 17 00:00:00 2001 From: wanganxp Date: Fri, 26 Jan 2024 06:53:00 +0800 Subject: [PATCH] web --- docs/compiler/README.md | 2 +- docs/component/text.md | 5 ++--- docs/component/unsupport.md | 4 +++- docs/project.md | 22 +++++++++++++++++++--- docs/uts/function.md | 4 ++-- docs/web/README.md | 17 ++++++++++++----- 6 files changed, 39 insertions(+), 15 deletions(-) diff --git a/docs/compiler/README.md b/docs/compiler/README.md index 16e4b8dc..2810bae6 100644 --- a/docs/compiler/README.md +++ b/docs/compiler/README.md @@ -40,7 +40,7 @@ App原生语言的编译过程耗时较长，因此编译器引入了缓存机 ### 注意@tips -- `uni-app x`编译器会产生kt、class等临时文件。安全软件（如360、微软）会对其进行木马扫描，消耗电脑性能。建议将项目的unpackage目录设置为信任，以提升编译性能。 +- `uni-app x`编译器编译Android平台时会在磁盘很多产生kt、class等临时文件。安全软件（如360、微软）会对其进行木马扫描，消耗电脑性能。建议将项目的unpackage目录设置为信任，以提升编译性能。 > 360设置方式 diff --git a/docs/component/text.md b/docs/component/text.md index fb589913..b10e738d 100644 --- a/docs/component/text.md +++ b/docs/component/text.md @@ -14,7 +14,6 @@ -#### App平台 - App-Android平台文本换行规则（表现在文本断行位置等）可能和浏览器有差异。 ## 子组件 @@ -31,5 +30,5 @@ app-nvue中，text组件不能嵌套。 ## Bug & Tips@tips - app-uvue不支持[HTML字符实体](https://developer.mozilla.org/zh-CN/docs/Glossary/Entity)。 -- app-uvue的selectable开启后，仅支持全部文字复制，不支持自由调整光标选择文字。如需自由选择文字，请使用[rich-text组件](rich-text.md)。 -- app-uvue text组件嵌套时，子组件设置的部分CSS样式可能不生效。 \ No newline at end of file +- app-uvue text组件嵌套时，子组件设置的部分CSS样式可能不生效。 +- app-uvue的selectable开启后，仅支持全部文字复制，不支持自由调整光标选择文字。如需自由选择文字，请使用[rich-text组件](rich-text.md)。web默认就是可复制文字的，selectable无效。 \ No newline at end of file diff --git a/docs/component/unsupport.md b/docs/component/unsupport.md index 7b2c1541..1822eb89 100644 --- a/docs/component/unsupport.md +++ b/docs/component/unsupport.md @@ -23,4 +23,6 @@ uni-app x在App端还有一批组件未与uni-app js引擎版拉齐。有的在 ## 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 +uni-app x的web版从uni-app的js引擎版迁移而来，理论上所有uni-app js引擎版的组件在uni-app x的web版中都可以使用。但4.0版本的uni-app x的web版暂未对其他组件进行测试。 + +web平台也可以使用浏览器的内置标签，但不是写在template里，而是通过`document.createElement`的方式创建并append到view中。示例代码[详见](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/template/browser-canvas/browser-canvas.uvue) \ No newline at end of file diff --git a/docs/project.md b/docs/project.md index ebef3575..bb6f99b3 100644 --- a/docs/project.md +++ b/docs/project.md @@ -61,7 +61,9 @@ uni-app x的项目结构与[uni-app js引擎版的项目结构](https://uniapp.d -## 运行 +## App的运行和发行 + +### App运行 uni-app x的真机运行基座（playground），和uni-app js引擎版不同，是一个绿色圆形的U（之前是方型H），基座名称默认为`uni-app x`（之前叫HBuilder）。 ![](./static/playground.jpg) @@ -77,6 +79,20 @@ uni-app x运行时，控制台右上角可以选择开启原生日志。 目前支持真机运行、从HBuilderX 4.0起支持uts插件的debug断点。但目前还不支持uvue的断点debug。 -## 发行 +### App发行 + +uni-app x App平台，目前只能打包apk。暂不支持渠道包。不支持wgt热更新、不支持安心打包。下载到项目下的uts插件可打包含入。 + +## web的运行和发行 + +uni-app x运行到浏览器时，编译基于vite，其特点是按需编译。所以项目运行后很快能看到首页，但点击二级页时有等待延迟，因为此时正在先编译后再渲染。 + +这带来2个问题： +1. 运行时点击初次打开的二级页有等待过程。在一个运行的周期内，已编译过的页面再次进入时瞬间打开。 +2. 运行后未点到页面由于不会被编译，其中隐藏的类型错误不可知，需在发行时查阅。 + +发行时会编译全部项目。因为运行时未必点全所有页面，所以发行时可能看到更多编译报错。另外发行后由于已编译过，打开二级页面时很快。 + +发行后的文件如果部署uniCloud的前端网页托管，记得在uniCloud的web控制台点强制刷新。 -uni-app x App平台，目前只能打包apk。暂不支持渠道包。不支持wgt热更新、不支持安心打包。下载到项目下的uts插件可打包含入。 \ No newline at end of file +如果有条件的话，可以在重新部署后用各地ip访问一遍，让文件同步到各地的cdn节点，这样当地用户第一次访问时就会更快。 \ No newline at end of file diff --git a/docs/uts/function.md b/docs/uts/function.md index bf2800cf..b5a5bd93 100644 --- a/docs/uts/function.md +++ b/docs/uts/function.md @@ -92,7 +92,7 @@ function add(x: string, y: string): void { 使用 async 关键字来声明一个异步函数，异步函数返回一个 [Promise](./buildin-object-api/promise.md) 对象。 -注意：在 HBuilderX 3.93 以下的版本或者 iOS 平台，异步函数返回的不是 [Promise](./buildin-object-api/promise.md) 对象，请分别参考：[安卓 异步函数](https://uniapp.dcloud.net.cn/plugin/uts-for-android.html#_6-11-synchronized-lock-等线程同步概念-在uts里怎么写)、[iOS 异步函数](https://uniapp.dcloud.net.cn/plugin/uts-for-ios.html#_5-1-13-异步方法)。 +注意：在 iOS 平台 和 HBuilderX 3.93 以下的Android 平台，异步函数返回的不是 [Promise](./buildin-object-api/promise.md) 对象，请分别参考：[安卓 异步函数](https://uniapp.dcloud.net.cn/plugin/uts-for-android.html#_6-11-synchronized-lock-等线程同步概念-在uts里怎么写)、[iOS 异步函数](https://uniapp.dcloud.net.cn/plugin/uts-for-ios.html#_5-1-13-异步方法)。 注意：异步函数在底层使用协程实现，异步函数内与异步函数外同时操作同一个对象时，由于其能并发执行，**其操作顺序可能与预期不一致**，会产生竞态条件与线程安全性问题。HBuilderX 3.98 版本的 uni-app x 中已进行优化，默认与框架运行在同一线程。 @@ -346,4 +346,4 @@ fn('a', 'b', 'c') // 'a' ['b', 'c'] fn('a', ...['b', 'c']) // 'a' ['b', 'c'] ``` -注意：当用在 uni-app x 中时，在 uvue 页面的 methods 中定义的方法不支持剩余参数。 +注意：在app平台，uvue 页面的 methods 中定义的方法不支持剩余参数。 diff --git a/docs/web/README.md b/docs/web/README.md index d26d97e8..f02faa91 100644 --- a/docs/web/README.md +++ b/docs/web/README.md @@ -2,7 +2,14 @@ > 新增于4.0版本 -编译到web端时多数用法仍和编译到安卓端一致，本文档用于描述差异及需要注意的点。 +uni-app x 编译到web平台时，并非是与uni-app js引擎版一致。而是基于uts的统一规范，和编译到安卓端的一致性较高。 + +与App版相比，web版有几个较大的差别： +1. web版是一个spa的单页应用，而app是多页的。 +2. pages.json配置的导航栏和tabbar，在web端并非原生的，而是网页的一部分。虽然uvue页面仍然是在导航栏和tabbar之间的，但在web平台，开发者可以直接操作导航栏和tabbar的dom。 +3. web版默认有页面滚动；app没有。 + +本文档会介绍与web和Android的差异及注意事项。 ## vue @@ -60,16 +67,16 @@ export default { ``` -### 其他注意事项 +### 注意事项 - data内$开头的属性不可直接使用`this.$xxx`访问，需要使用`this.$data['$xxx']`，这是vue的规范。目前安卓端可以使用this.xxx访问是Bug而非特性，请勿使用此特性。 - 安卓端由于kotlin特性组件内部使用组件data内定义的属性时this可以省略，请勿在web端使用此特性。 -- web端使用`$root`会获取应用根组件，而不是页面根组件，这点与安卓端不同。 +- web端由于是一个单页应用，使用`$root`会获取应用根组件，而不是页面根组件。而安卓端是多页应用，`$root`获取的是页面根组件。 - web端使用`$parent`会获取父组件（含内置组件），安卓端只会获取父级非内置组件，web端后续会调整，请勿利用此特性。 ## uts -uts内编译到web端时可以使用任何ts特性。 +uts内编译到web端时可以使用任何ts特性。包括undefined、联合类型等。 ### 运行时类型保留 @@ -131,7 +138,7 @@ element.style.color === 'rgb(255, 0, 0)' // true ### fixed定位 -position: fixed定位时，web端为相对于整个浏览器页面进行定位，app端为相对于页面（除导航栏、tabbar）定位。可以使用css变量使两端表现一致 +position: fixed定位时，web端为相对于整个浏览器页面进行定位，app端为相对于页面（除导航栏、tabbar）定位。可以使用[css变量](../css/README.md#variable)使两端表现一致 ```css .fixed { -- GitLab