x

docs/uni-app-x/_sidebar.md

@@ -4,6 +4,7 @@
   * [与js开发的差别](tutorial/codegap.md)
   * [request联网教程](tutorial/request.md)
   * [全局变量与状态管理](tutorial/store.md)
+  * [几种组件标记的概念澄清](tutorial/idref.md)
 * 编译器
   * [概述](compiler/README.md)
   * [条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html)

docs/uni-app-x/component/text.md

@@ -6,8 +6,6 @@
 
 虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式，详见uvue的[样式不继承](uni-app-x/css/README.md#stylenoextends)章节。
 
-**注意：** 暂不支持[字符实体](https://developer.mozilla.org/zh-CN/docs/Glossary/Entity)。
-
 <!-- UTSCOMJSON.text.attrubute -->
 
 <!-- UTSCOMJSON.text.event -->
@@ -29,4 +27,5 @@ app-nvue中，text组件不能嵌套。
 <!-- UTSCOMJSON.text.reference -->
 
 ## Bug & Tips@tips
-- **tip**: app-uvue的selectable开启后，仅支持全部文字复制，不支持自由调整光标选择文字。如需自由选择文字，请使用[rich-text组件](rich-text.md)。
+- app-uvue不支持[HTML字符实体](https://developer.mozilla.org/zh-CN/docs/Glossary/Entity)。
+- app-uvue的selectable开启后，仅支持全部文字复制，不支持自由调整光标选择文字。如需自由选择文字，请使用[rich-text组件](rich-text.md)。
\ No newline at end of file

docs/uni-app-x/dom/element.md

@@ -242,3 +242,5 @@ getAttribute返回值从HBuilderX 3.93起，调整为string类型，不要使用
 <!-- CUSTOMTYPEJSON.Element.methods.takeSnapshot.compatibility -->
 
 <!-- CUSTOMTYPEJSON.Element.methods.takeSnapshot.tutorial -->
+
+截图的示例代码参考[hello uni-app x](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/API/element-takesnapshot/element-takesnapshot.uvue)
\ No newline at end of file

docs/uni-app-x/readme.md

@@ -153,7 +153,7 @@ uni-app x 一期，只包括常用的组件和API。
 - picker：可改用picker-view
 - canvas：目前没有完整的canvas组件，但
 	* 每个view，都提供了[draw API](dom/drawablecontext.md)，可以高性能的画各种形状、写字。
-	* 关于截图，无需像webview那样通过canvas中转，view会直接提供截图方案。
+	* 关于截图，无需像webview那样通过canvas中转，view直接提供截图方案，[takesnapshot](dom/element.md#takesnapshot)。
 	* 使用web-view中的canvas也是一种方案，uvue页面里的web-view组件可以和uvue页面里的uts代码双向通信。比如生成二维码，可以由web-view组件来渲染，复用web生态的库
 	* 当然后期uvue中也会补充正式的canvas组件
 - waterfall/grid-view：会补充

docs/uni-app-x/tutorial/idref.md

+# 组件标志
+
+开发者会遇到很多与组件标志有关的概念：id、ref、Element、NodeRef、context、ComponentPublicInstance...
+
+上述概念，其实都是为了给组件一个标记，通过标记拿到组件的上下文对象，然后操作这个对象的方法。
+
+但因为平台不同，制造了不同的概念。id在web和小程序中存在，ref是vue的概念。uni-app中这些皆而有之。
+
+我们以video为例，解释这些概念的相同和差别之处。
+
+## web开发中
+### 内置html标签
+html内置标签有id属性，通过document.getElmenetById("")可以返回一个Element。可以进一步调用Element的方法
+```html
+<video id="vid" src="uni.mp4"></video>
+<script>
+    document.getElementById("vid").play() //js写法
+	(document.getElementById("vid") as HTMLVideoElement).play(); //ts写法。只有HTMLVideoElement才有play方法
+</script>
+```
+
+### vue自定义组件@vuecomponent
+vue框架中组件有ref属性，通过this.refs可以返回一个组件实例ComponentPublicInstance。可以进一步调用组件的方法。
+
+对于html内置元素，在web中一般不通过ref获取。ref更多是服务于自定义的vue组件。
+
+假使有一个vue组件，其有一个方法getSome()，那么用法是：\
+template区：
+```html
+<component1 ref="c1"></component1>
+```
+scrip区：
+```js
+this.$refs.c1.getSome() //js写法
+this.$refs["c1"].getSome() //与上一行等价
+(this.$refs["c1"] as ComponentPublicInstance).getSome() //ts或uts写法，必须明确类型才能调用其方法和属性
+```
+
+## 小程序中
+### 小程序内置组件
+小程序的内置组件有id属性，有多种方式获取组件上下文对象：
+1. 通过uni.createXXXContext来获取，比如uni.createVideoContext()
+template区：
+```html
+<video id="vid" src="uni.mp4"></video>
+```
+
+scrip区：
+```js
+uni.createVideoContext('vid').play()
+```
+
+2. 通过uni.createSelectorQuery()，传入选择器，拿到返回的NodesRef，然后再.context，异步获取到组件的上下文对象
+```js
+  uni.createSelectorQuery().select('.the-video-class').context(function(res){
+    console.log(res.context) // 节点对应的 Context 对象。如：选中的节点是 <video> 组件，那么此处即返回 VideoContext 对象
+  }).exec()
+```
+
+### vue自定义组件
+uni-app编译到小程序时，vue组件的用法与web相同，具体[见上](#vuecomponent)。
+
+## uni-app x中
+
+uni-app x中，web、小程序、vue这3类概念都支持，所以id、ref、Element、NodeRef、context、ComponentPublicInstance这些概念都存在。
+
+分为如下几类：
+
+### 内置组件
+内置组件都支持Element。
+
+为了与小程序api拉齐，也有部分组件同时支持context，如video。
+
+不涉及小程序api拉齐的一些组件未提供context，比如`<unicloud-db>`组件只有Element。
+
+#### Element方式
+
+uni-app x提供了[uni.getElementById](../api/get-element.md)方法，返回的是[Element](../dom/element.md)类型。
+
+通用的元素操作方法，比如getAttribute、setStyle，在Element上就可以操作。
+
+UniVideoElement 继承自 Element，拥有video专用的一批方法。
+
+template区：
+```html
+<video id="vid" src="uni.mp4"></video>
+```
+script区：
+```uts
+(uni.getElementById("vid") as UniVideoElement).play() //注意没有document对象，getElementById方法在uni下。务必确保vid存在，否则as会崩溃
+uni.getElementById<UniVideoElement>("vid")!.play() //泛型写法
+```
+
+#### context方式
+script区：
+```uts
+uni.createVideoContext("vid")!.play()
+```
+
+#### NodeRef方式
+uni-app x 虽然支持 `uni.createSelectorQuery()` API，传入选择器，可以拿到返回的NodesRef。但无法继续获取.context子对象。无法通过这种方式拿到context。
+
+#### ref方式
+其实this.$refs获取到的内置组件，通过as也可以转换为Element。但一般ref用于vue自定义组件。
+script区：
+```js
+(this.$refs['vid'] as UniVideoElement).play(); //但一般ref用于vue自定义组件
+```
+
+
+### vue自定义组件
+
+uni-app x中vue组件的用法与web相同，具体[见上](#vuecomponent)。
\ No newline at end of file

docs/uts/README.md

@@ -85,7 +85,6 @@ str = "hello world"; // 报错，不允许重新赋值
 	* 编译至 Kotlin 平台时，等同于 Kotlin 平台的 var（允许重新赋值）
 - swift 中 let 是定义常量，而 uts 和 ts 中，let 是定义变量。注意勿混淆。
 - 类型定义的冒号，左右可以有一个空格，也可以没有空格。`let str:string` 和 `let str : string` 和 `let str :string` 和 `let str: string` 都是合法的。
-- 联合类型仅支持 [|null](data-type.md#null) （即可为空） 和 [字面量联合类型](data-type.md#literal-union-type)。不支持其他方式的联合类型。
 
 ### 变量命名规则
 

docs/uts/data-type.md

@@ -1637,4 +1637,8 @@ HBuilder支持给变量定义特殊值域string类型，这些类型在HBuilder
 
 ## 联合类型
 
-目前uts支持的
+目前uts支持的联合类型有限：
+- 支持 [|null](#null) （即可为空）
+- [字面量联合类型](#literal-union-type)
+
+不支持其他方式的联合类型。