tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/component/camera.md

@@ -0,0 +1,303 @@
+::: sourceCode
+## camera
+
+> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-camera
+
+> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-camera
+
+相机组件
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | 4.61 | 4.61 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| flash | auto \| on \| off \| torch | "auto" | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61（部分支持，见上） | 闪光灯，值为auto, on, off, torch |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| auto | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 自动 |
+| on | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 开 |
+| off | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 关 |
+| torch | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 常亮 |
+| device-position | back \| front | "back" | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61（部分支持，见上） | 前置或后置，值为front, back |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| back | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 后置 |
+| front | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 前置 |
+| mode | normal \| scanCode | "normal" | Web x / 微信小程序 4.41 / Android 4.71 / iOS 4.71 / HarmonyOS x（部分支持，见上） | *(string)*<br/>应用模式，只在初始化时有效，不能动态变更 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| normal | Web x / 微信小程序 4.41 / Android 4.71 / iOS 4.71 / HarmonyOS x（部分支持，见上） | 相机模式 |
+| scanCode | Web x / 微信小程序 4.41 / Android 4.71 / iOS 4.71 / HarmonyOS x（部分支持，见上） | 扫码模式 |
+| resolution | low \| medium \| high | "medium" | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | *(string)*<br/>分辨率，不支持动态修改 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| low | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 低 |
+| medium | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 中 |
+| high | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 高 |
+| frame-size | small \| medium \| large | "medium" | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | *(string)*<br/>指定期望的相机帧数据尺寸 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| small | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 小尺寸帧数据 |
+| medium | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 中尺寸帧数据 |
+| large | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | 大尺寸帧数据 |
+| photo-resolution | low \| medium \| high \| original | "medium" | Web x / 微信小程序 x / Android 4.81 / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>指定期望的拍照图片分辨率，不支持动态修改 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| low | Web x / 微信小程序 x / Android 4.81 / iOS x / HarmonyOS x（部分支持，见上） | 低分辨率 |
+| medium | Web x / 微信小程序 x / Android 4.81 / iOS x / HarmonyOS x（部分支持，见上） | 中分辨率 |
+| high | Web x / 微信小程序 x / Android 4.81 / iOS x / HarmonyOS x（部分支持，见上） | 高分辨率 |
+| original | Web x / 微信小程序 x / Android 4.81 / iOS x / HarmonyOS x（部分支持，见上） | 原始分辨率，相机的原始分辨率拍照质量最高，但是保存速度可能会较慢 |
+| @stop | (event: [UniCameraStopEvent](#unicamerastopevent)) => void |   | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61（部分支持，见上） | 摄像头在非正常终止时触发，如退出后台等情况 |
+| @error | (event: [UniCameraErrorEvent](#unicameraerrorevent)) => void |   | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61（部分支持，见上） | 用户不允许使用摄像头时触发 |
+| @initdone | (event: [UniCameraInitDoneEvent](#unicamerainitdoneevent)) => void |   | Web x / 微信小程序 4.41 / Android 4.61 / iOS 4.61 / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>相机初始化完成时触发，`e.detail = {maxZoom}` |
+| @scancode | (event: [UniCameraScanCodeEvent](#unicamerascancodeevent)) => void |   | Web x / 微信小程序 4.41 / Android 4.71 / iOS 4.71 / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>在扫码识别成功时触发，仅在 mode="scanCode" 时生效 |
+
+### 事件
+#### UniCameraStopEvent
+
+```mermaid
+graph LR
+  
+UniCameraStopEvent -- Extends --> UniCustomEvent&ltUniCameraStopEventDetail&gt
+  style UniCustomEvent&ltUniCameraStopEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniCameraStopEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniCameraStopEventDetail
+
+###### UniCameraStopEventDetail 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| errorCause | string | 否 |
+| errSubject | string | 否 |
+| errCode | number | 否 |
+| errMsg | string | 否 |
+| data | Object | 否 |
+| cause | Object | 否 |
+
+#### UniCameraErrorEvent
+
+```mermaid
+graph LR
+  
+UniCameraErrorEvent -- Extends --> UniCustomEvent&ltUniCameraErrorEventDetail&gt
+  style UniCustomEvent&ltUniCameraErrorEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniCameraErrorEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniCameraErrorEventDetail
+
+###### UniCameraErrorEventDetail 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| msg | string | 否 |
+| errSubject | string | 否 |
+| errCode | number | 否 |
+| errMsg | string | 否 |
+| data | Object | 否 |
+| cause | Object | 否 |
+
+#### UniCameraInitDoneEvent
+
+```mermaid
+graph LR
+  
+UniCameraInitDoneEvent -- Extends --> UniCustomEvent&ltUniCameraInitDoneEventDetail&gt
+  style UniCustomEvent&ltUniCameraInitDoneEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniCameraInitDoneEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniCameraInitDoneEventDetail
+
+###### UniCameraInitDoneEventDetail 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| maxZoom | number | 否 |
+
+#### UniCameraScanCodeEvent
+
+```mermaid
+graph LR
+  
+UniCameraScanCodeEvent -- Extends --> UniCustomEvent&ltUniCameraScanCodeEventDetail&gt
+  style UniCustomEvent&ltUniCameraScanCodeEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniCameraScanCodeEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniCameraScanCodeEventDetail
+
+###### UniCameraScanCodeEventDetail 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| type | string | 否 |
+| result | string | 否 |
+| rawData | string | 否 |
+| charSet | string | 否 |
+| scanArea | Array&lt;number&gt; | 否 |
+
+### 上下文对象API
+
+camera组件的操作api为[uni.createCameraContext()](../api/create-camera-context.md)。
+
+给camera组件设一个id属性，将id的值传入uni.createCameraContext()，即可得到camera组件的上下文对象，进一步可使用`.takePhoto()`、`.startRecord()`等方法。
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/camera/camera.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/camera/camera.uvue) 
+>
+> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 
+
+::: preview
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/camera/camera
+```uvue
+<template>
+	<view style="flex: 1;">
+		<camera style="width: 100%; height: 300px;" :resolution="'medium'" :device-position="devicePosition" photo-resolution="high"
+			:flash="flash" :frame-size="frameSize" @stop="handleStop" @error="handleError" @initdone="handleInitDone">
+		</camera>
+
+		<scroll-view style="flex: 1;">
+			<view>
+        		<button type="default" @click="handleScanCode">扫码</button>
+				<button type="default" @click="switchDevicePosition">切换前后摄像头</button>
+				<button type="default" @click="switchFlash">闪光灯</button>
+
+				<button type="default" @click="setOnFrameListener">设置帧数据监听</button>
+				<button type="default" @click="startFrameListener">开始捕捉帧数据</button>
+				<button type="default" @click="stopFrameListener">停止捕捉帧数据</button>
+				<view>
+					<view class="uni-title">
+						<text class="uni-title-text">设置预览缩放</text>
+					</view>
+					<view class="uni-camera-wrapper">
+						<slider class="uni-camera-test-host" :disabled="maxZoom == 0" :show-value="true" :min="1"
+							:max="maxZoom" :value="1" @changing="zoomSliderChange" />
+					</view>
+				</view>
+
+				<view>
+					<view class="uni-title">
+						<text class="uni-title-text">拍摄照片示例</text>
+						<button type="default" @click="handleTakePhoto">拍摄照片</button>
+						<radio-group style="flex-direction: row;" name="成像质量" @change="takePhotoQualityChange">
+							<view><radio value="normal" :checked="true" /><text>普通质量</text></view>
+							<view><radio value="low" /><text>低质量</text></view>
+							<view><radio value="high" /><text>高质量</text></view>
+							<view><radio value="original" /><text>原图</text></view>
+						</radio-group>
+					</view>
+					<view class="uni-camera-wrapper">
+						<image class="uni-camera-test-host-without-flex" style="width: 150px;height: 150px;"
+							v-if="imageSrc != ''" :src="imageSrc"></image>
+					</view>
+				</view>
+
+				<view>
+					<view class="uni-title">
+						<text class="uni-title-text">录制视频示例</text>
+						<view style="flex-direction: row;margin-top: 8px;">
+							<text class="uni-title-size">录制时长：</text>
+							<input class="uni-title-size"
+								style="width: 50px; margin-left: 10px;border: 0.5px solid grey;text-align: right;"
+								type="number" @input="timeoutInput" :value="timeout" />
+							<text class="uni-title-size" style="margin-left: 8px;">秒</text>
+						</view>
+						<button type="default" style="font-family: monospace;margin-top: 8px;" @click="startRecord"
+							:disabled="startRecordStatus">{{ startRecordStatus ? `${remain}秒` : "录制视频" }}</button>
+						<button type="default" @click="stopRecord">停止录制</button>
+						<radio-group style="flex-direction: row;margin-top: 8px;" name="是否压缩"
+							@change="startRecordCompressChange">
+							<view><radio value="0" :checked="true" /><text>未启动视频压缩</text></view>
+							<view><radio value="1" /><text>启动视频压缩</text></view>
+						</radio-group>
+					</view>
+					<view class="uni-camera-wrapper">
+						
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+
+
+<style>
+	.uni-title {
+		padding: 10px 0;
+	}
+
+	.uni-title-text {
+		font-size: 15px;
+		font-weight: bold;
+	}
+
+	.uni-camera-wrapper {
+		display: flex;
+		padding: 8px 13px;
+		margin: 5px 0;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		background-color: #ffffff;
+	}
+
+	.uni-camera-test-host {
+		height: 28px;
+		padding: 0px;
+		flex: 1;
+		background-color: #ffffff;
+	}
+
+	.uni-camera-test-host-without-flex {
+		height: 28px;
+		padding: 0px;
+		background-color: #ffffff;
+	}
+
+	.uni-title-size {
+		font-size: 22px;
+	}
+</style>
+
+```
+
+### 依赖库版本
+
+Android端实现相机组件所使用的依赖库
+
+```
+"androidx.camera:camera-core:1.4.1",
+"androidx.camera:camera-camera2:1.4.1",
+"androidx.camera:camera-lifecycle:1.4.1",
+"androidx.camera:camera-view:1.4.1",
+"androidx.appcompat:appcompat:1.7.0"
+```
+
+### 关于相机组件扫码能力的注意事项
+
+- Android/iOS平台 camera 组件仅在 uni-app x 项目中支持，扫码功能需更新到 HBuilderX4.71 及以上版本。
+- Android/iOS平台扫码功能是独立功能模块，需在 `manifest.json` 中勾选 “uni-barcode-scanning（相机组件扫码）”模块才能使用。
+  + [Android平台配置“uni-barcode-scanning（相机组件扫码）”](../collocation/manifest-android.md#modulesscan)
+  + [iOS平台配置“uni-barcode-scanning（相机组件扫码）”](../collocation/manifest-ios.md#modulesscan)
+
+### 关于预览画面与拍照尺寸的注意事项
+
+- camera 预览画面采用 FILL_CENTER（aspectFill）方式显示，会保持宽高比填满组件区域，超出部分居中裁剪。
+- `resolution`（预览）和 `photo-resolution`（拍照）是两个独立配置，系统分别协商实际分辨率，最终宽高比可能不同。
+- `takePhoto` 返回的是完整拍照画面，不会按预览可见区域裁剪，照片中可能包含预览中看不到的内容。
+- 不同设备支持的分辨率列表不同，预览与拍照的差异程度因设备而异。
+- 实现取景框裁剪时，需先根据 camera 组件显示宽高与照片实际宽高，按 FILL_CENTER 逻辑计算预览可见区域在照片中的对应范围，裁剪一致后再进行取景框二次裁剪。
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.camera)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/camera.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/camera.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=camera&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=camera&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=camera&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=camera&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=camera)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=camera&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/canvas.md

@@ -0,0 +1,230 @@
+::: sourceCode
+## canvas
+
+> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-canvas
+
+> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-canvas
+
+> 组件类型：UniCanvasElement 
+
+ 画布
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.21 | 4.41 | 4.25 | 4.25 | 4.61 |
+
+* 截图或海报需求，无需像webview那样通过canvas中转，app平台view直接提供截图API，[takesnapshot](../dom/unielement.html#takesnapshot)。
+
+在绘制形状、文字、图片方面，uni-app x有2种解决方案：`canvas组件`和 [DOM的DrawableContext API](../dom/drawablecontext.md)
+
+它们的区别是：
+1. canvas组件的语法是W3C标准语法；DrawableContext是对原生view的绘制API的封装，语法尽可能靠齐W3C规范，但不相同。
+2. canvas组件全平台支持，而DrawableContext仅app支持
+3. canvas组件是一个独立组件，而DrawableContext是对现有的view组件进行绘制
+4. DrawableContext在iOS上绘制文字的性能略低，其原生系统如此
+5. 对于复杂绘制场景，比如游戏，canvas组件的绘制速度优于DrawableContext；对于简单场景，canvas组件的内存占用高于普通view。
+6. canvas是一个独立模块，在Android和iOS平台占用几百K体积，鸿蒙平台封装自鸿蒙自身的canvas。canvas模块不使用时会被摇树摇掉
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| type | string |   | Web - / 微信小程序 4.41 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | *(string)*<br/>指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0) |
+| canvas-id | string |   | Web - / 微信小程序 4.41 / Android - / iOS - / HarmonyOS x（部分支持，见上） | *(string)*<br/>canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 |
+| disable-scroll | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 |
+| width | number | 0 | HarmonyOS(Vapor) 5.0（部分支持，见上） |   |
+| height | number | 0 | HarmonyOS(Vapor) 5.0（部分支持，见上） |   |
+| @touchstart | eventhandle |   | Web 4.21 / 微信小程序 4.41 / Android 4.25 / iOS 4.25 / HarmonyOS 4.61 | *(eventhandle)*<br/>手指触摸动作开始 |
+| @touchmove | eventhandle |   | Web 4.21 / 微信小程序 4.41 / Android 4.25 / iOS 4.25 / HarmonyOS 4.61 | *(eventhandle)*<br/>手指触摸后移动 |
+| @touchend | eventhandle |   | Web 4.21 / 微信小程序 4.41 / Android 4.25 / iOS 4.25 / HarmonyOS 4.61 | *(eventhandle)*<br/>手指触摸动作结束 |
+| @touchcancel | eventhandle |   | Web 4.21 / 微信小程序 4.41 / Android 4.25 / iOS 4.25 / HarmonyOS 4.61 | *(eventhandle)*<br/>手指触摸动作被打断，如来电提醒，弹窗 |
+| @longtap | eventhandle |   | Web 4.21 / 微信小程序 4.41 / Android 4.25 / iOS 4.25 / HarmonyOS 4.61 | *(eventhandle)*<br/>手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 |
+| @error | eventhandle |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>当发生错误时触发 error 事件，detail = {errMsg} |
+
+注意：Android平台默认会开启硬件加速无需额外设置
+
+### 子组件 @children-tags
+不可以嵌套组件
+
+## API
+
+老版 uni-app 的 canvas 使用了微信小程序的旧版规范，和 W3C 规范有差异。微信小程序新版的 canvas 规范已经与 W3C 规范拉齐。
+
+uni-app x 中废弃了老版方案，使用了 W3C 规范和微信小程序的新版规范。
+
+注意：在uni-app x 4.21版以前，Web平台开发者写的老版canvas是可以运行的。但从 4.21+ 支持新版规范起，不再支持老版规范。开发者需调整代码。
+
+注意：新版规范需要开发者根据自己的场景手动处理高清屏问题。
+
+canvas相关的API较多，参考如下：
+
+- [W3C 规范](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas)
+- canvas.toDataURL()  [W3C](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL)
+- uni.createCanvasContextAsync 获取[CanvasContext对象](../api/create-canvas-context-async.md)
+- [CanvasRenderingContext2D对象](../api/canvasrenderingcontext2d.md)
+- [动画帧](../api/animation-frame.md)
+
+## 获取组件上下文对象CanvasContext@CanvasContext
+
+1. 异步方式获取CanvasContext
+
+这种方式跨平台，一般推荐这种写法。需HBuilderX 4.25+支持。
+
+组合式
+
+```html
+<template>
+  <canvas id="canvas"></canvas>
+</template>
+
+```
+
+选项式
+
+```html
+<template>
+  <view>
+    <canvas id="canvas"></canvas>
+  </view>
+</template>
+
+```
+
+文档[详见](../api/create-canvas-context-async.md)
+
+2. 同步方式CanvasContext
+
+需HBuilderX 4.21+支持。
+
+同步方式不支持小程序。仅App和web可以使用。
+
+```html
+<template>
+  <canvas id="canvas"></canvas>
+</template>
+
+```
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/canvas/canvas.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/canvas/canvas.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/canvas/canvas
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/canvas/canvas
+
+>示例
+```vue
+<template>
+  <view class="page" id="page-canvas">
+    <page-intro content="本页演示 canvas 画布组件：toDataURL、createImage、createPath2D、requestAnimationFrame 等；可跳转 CanvasContext API 子页，展示绘图与异步上下文。"></page-intro>
+    <canvas id="canvas" class="canvas-element"></canvas>
+    <scroll-view class="scroll-view">
+      
+      <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
+      <view>
+        <text>testToBlobResult: {{data.testToBlobResult}}</text>
+      </view>
+      
+      <button class="canvas-drawing-button" id="toDataURL" @click="canvasToDataURL">canvasToDataURL</button>
+      <view class="text-group" v-if="data.dataBase64.length>0">
+        <text>canvasToDataURL:</text>
+        <text>{{data.dataBase64.slice(0,22)}}...</text>
+      </view>
+      <button @click="onCreateImage">createImage</button>
+      <button @click="onCreatePath2D">createPath2D</button>
+      <button @click="startAnimationFrame">requestAnimationFrame</button>
+      <button @click="stopAnimationFrame">cancelAnimationFrame</button>
+      <view style="padding: 8px 10px;">CanvasContext API 演示</view>
+      <navigator url="./canvas-context">
+        <button>CanvasContext API</button>
+      </navigator>
+
+      <view class="text-group">
+        <text>获取 CanvasContext 结果：</text>
+        <text id="testCanvasContext">{{data.testCanvasContext}}</text>
+      </view>
+      <view class="text-group">
+        <text>测试 ToDataURL 结果：</text>
+        <text id="testToDataURLResult">{{data.testToDataURLResult}}</text>
+      </view>
+
+      <view class="text-group">
+        <text>测试 createImage 结果：</text>
+        <text id="testCreateImage">{{data.testCreateImage}}</text>
+      </view>
+
+      <view class="text-group">
+        <text>测试 createPath2D 结果：</text>
+        <text id="testCreatePath2D">{{data.testCreatePath2D}}</text>
+      </view>
+
+      <view class="text-group">
+        <text>测试 createCanvasContextAsync 结果：</text>
+        <text @click="testCreateContextAsync" id="createCanvasContextAsync">{{testCanvasCtx}}</text>
+      </view>
+      <canvas-child ref="canvasChildRef"></canvas-child>
+    </scroll-view>
+  </view>
+</template>
+
+
+
+<style>
+  .page {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .scroll-view {
+    flex: 1;
+  }
+
+  .canvas-element {
+    width: 100%;
+    height: 250px;
+    background-color: #ffffff;
+  }
+
+  .btn-to-image {
+    margin: 10px;
+  }
+
+  .text-group {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 10px;
+  }
+</style>
+
+```
+
+## 场景
+
+canvas有很多应用场景，插件市场有很多封装好的插件：
+
+* 图表需求：
+	在蒸汽模式下，npm上的echart for小程序等图表组件可以直接使用。\
+	插件市场也有uts版本：[echart](https://ext.dcloud.net.cn/search?q=chart&orderBy=Relevance&uni-appx=1)、[F2](https://ext.dcloud.net.cn/search?q=f2&orderBy=Relevance&uni-appx=1)
+* 二维码展示：[见插件市场](https://ext.dcloud.net.cn/search?q=%E4%BA%8C%E7%BB%B4%E7%A0%81&uni-appx=1)
+* 手写签名：[见插件市场](https://ext.dcloud.net.cn/search?q=%E7%AD%BE%E5%90%8D&orderBy=Relevance&uni-appx=1)
+* 抽奖转盘：[见插件市场](https://ext.dcloud.net.cn/search?q=%E8%BD%AC%E7%9B%98&orderBy=Relevance&uni-appx=1)
+* 刮刮卡：[见插件市场](https://ext.dcloud.net.cn/search?q=%E5%88%AE%E5%88%AE%E5%8D%A1&orderBy=Relevance&uni-appx=1)
+
+一些web平台的canvas插件，并没有适配uts。此时使用web-view中的canvas也是一种方案，uvue页面里的[web-view组件](./web-view.md)可以和uvue页面里的uts代码双向通信。
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.canvas.canvas)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/canvas.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=canvas&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=canvas&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=canvas&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=canvas&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=canvas)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=canvas&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/channel-live.md

@@ -0,0 +1,27 @@
+::: sourceCode
+## channel-live
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| feed-id | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>视频 feedId |
+| finder-user-name | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>视频号 id，以“sph”开头的id，可在视频号助手获取。视频号必须与当前小程序相同主体。 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.channel-live)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/channel-live.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=channel-live&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=channel-live&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=channel-live&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=channel-live&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=channel-live)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=channel-live&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/channel-video.md

@@ -0,0 +1,38 @@
+::: sourceCode
+## channel-video
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| feed-id | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>仅视频号视频与小程序同主体时生效。若内嵌非同主体视频，请使用 feed-token。 |
+| finder-user-name | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>视频号 id，以“sph”开头的id，可在视频号助手获取。视频号必须与当前小程序相同主体。 |
+| feed-token | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>仅内嵌小程序非同主体视频号视频时使用，获取方式参考[本指引](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/channels-activity#feed-token)。 |
+| autoplay | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>是否自动播放。仅视频号视频与小程序同主体时支持设置为 true。 |
+| loop | boolean | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否循环播放 |
+| muted | boolean | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否静音播放 |
+| object-fit | boolean | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>当视频大小与 video 容器大小不一致时，视频的表现形式 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| contain | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 包含 |
+| fill | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 填充 |
+| cover | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 覆盖 |
+| @error | eventhandle | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>视频播放出错时触发 |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.channel-video)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/channel-video.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=channel-video&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=channel-video&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=channel-video&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=channel-video&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=channel-video)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=channel-video&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)