tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/component/movable-view.md

@@ -0,0 +1,157 @@
+::: sourceCode
+## movable-view
+
+可移动的视图容器，在页面中可以拖拽滑动
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 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> |
+
+之所以有movable-area和movable-view，是因为逻辑层和视图层分离，从视图层发送数据给逻辑层，处理后再传回视图层会产生损耗，导致拖动卡顿。
+
+于是通过一个框架实现好的组件，在视图层内部处理拖动，避免来回通信。
+
+在uni-app和小程序上确实存在这个问题，但在uni-app x的web和app上其实都不存在通信损耗。
+
+在hello uni-app x里有示例，可以自由的监听view的拖动并移动其位置。[详见](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/component/general-event/touch-event.uvue)
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| direction | string | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | movable-view的移动方向，属性值有all、vertical、horizontal、none |
+| 合法值 |
+| :- |
+| all |
+| vertical |
+| horizontal |
+| none |
+| inertia | boolean | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | movable-view 是否带有惯性。 |
+| out-of-bounds | boolean | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 超过可移动区域后，movable-view 是否还可以移动。 |
+| x | string \| number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。 |
+| y | string \| number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。 |
+| damping | number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。 |
+| friction | number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 2。 |
+| disabled | boolean | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 是否禁用。 |
+| scale | boolean | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内。 |
+| scale-min | number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 定义缩放倍数最小值，默认为 0.5。 |
+| scale-max | number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 定义缩放倍数最大值，默认为 10。 |
+| scale-value | number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 定义缩放倍数，取值范围为 0.5 - 10 |
+| animation | boolean | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 是否使用动画，默认为 true。 |
+| htouchmove | eventhandle | Web - / 微信小程序 4.41 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | *(eventhandle)*<br/>初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch |
+| vtouchmove | eventhandle | Web - / 微信小程序 4.41 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | *(eventhandle)*<br/>初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch |
+| @change | (event: UniEvent) => void | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}。其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）。 |
+| @scale | (event: UniEvent) => void | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}。 |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/movable-view/movable-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/movable-view/movable-view.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/movable-view/movable-view
+
+>示例
+```vue
+<template>
+  <view class="page-body">
+    <page-head title="movable-view,可拖动视图"></page-head>
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title uni-common-mt">
+        示例 1
+        <text>\nmovable-view 区域小于 movable-area</text>
+      </view>
+      <movable-area>
+        <movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
+      </movable-area>
+      <view @tap="tap" class="uni-link uni-center uni-common-mt">
+        点击这里移动至 (30px, 30px)
+      </view>
+      <view class="uni-title uni-common-mt">
+        示例 2
+        <text>\nmovable-view区域大于movable-area</text>
+      </view>
+      <movable-area>
+        <movable-view class="max" direction="all">text</movable-view>
+      </movable-area>
+      <view class="uni-title uni-common-mt">
+        示例 3
+        <text>\n只可以横向移动</text>
+      </view>
+      <movable-area>
+        <movable-view direction="horizontal">text</movable-view>
+      </movable-area>
+      <view class="uni-title uni-common-mt">
+        示例 4
+        <text>\n只可以纵向移动</text>
+      </view>
+      <movable-area>
+        <movable-view direction="vertical">text</movable-view>
+      </movable-area>
+      <view class="uni-title uni-common-mt">
+        示例 5
+        <text>\n可超出边界</text>
+      </view>
+      <movable-area>
+        <movable-view direction="all" out-of-bounds>text</movable-view>
+      </movable-area>
+      <view class="uni-title uni-common-mt">
+        示例 6
+        <text>\n带有惯性</text>
+      </view>
+      <movable-area>
+        <movable-view direction="all" inertia>text</movable-view>
+      </movable-area>
+      <view class="uni-title uni-common-mt">
+        示例 7
+        <text>\n可放缩</text>
+      </view>
+      <movable-area scale-area>
+        <movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4"
+          :scale-value="scale">text</movable-view>
+      </movable-area>
+      <view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:40px;">
+        点击这里放大3倍
+      </view>
+    </view>
+  </view>
+</template>
+
+
+
+<style>
+  movable-view {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 75px;
+    width: 75px;
+    background-color: #007AFF;
+    color: #fff;
+  }
+
+  movable-area {
+    height: 150px;
+    width: 100%;
+    background-color: #D8D8D8;
+    overflow: hidden;
+  }
+
+  .max {
+    width: 250px;
+    height: 250px;
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.movable.movable-view)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/movable-view.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=movable-view&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=movable-view&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=movable-view&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=movable-view&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=movable-view)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=movable-view&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/native-component.md

@@ -0,0 +1,21 @@
+::: sourceCode
+## native-component
+
+### 兼容性 
+| 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> |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.other.native-component)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=native-component&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=native-component&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=native-component&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=native-component&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=native-component)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=native-component&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/native-view.md

@@ -0,0 +1,342 @@
+::: sourceCode
+## native-view
+
+> 组件类型：UniNativeViewElement 
+
+ 自定义原生View组件
+
+`native-view`自身没有渲染内容，需要开发者监听 `@init` 事件，在此事件中创建平台原生view与 [UniNativeViewElement](../api/dom/uninativeviewelement.md) 进行绑定，`native-view`将展示该view的渲染内容。
+
+`<native-view>`组件是uni-app x下扩展原生组件（如map）的重要方式。事实上官方的camera/map/web-view/video等组件就是使用`<native-view>`开发的。详见下方的使用场景章节。
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| <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> | 4.31 | 4.31 | 4.61 |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| @init | (event: [UniNativeViewInitEvent](#uninativeviewinitevent)) => void | Web x / 微信小程序 x / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | native-view初始化时回调，event.detail = { element: 'native-view元素实例对象'} |
+
+### 事件
+#### UniNativeViewInitEvent
+native-view 组件 init事件event
+```mermaid
+graph LR
+  
+UniNativeViewInitEvent -- Extends --> UniCustomEvent&ltUniNativeViewInitEventDetail&gt
+  style UniCustomEvent&ltUniNativeViewInitEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniNativeViewInitEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniNativeViewInitEventDetail
+
+###### UniNativeViewInitEventDetail 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| element | UniNativeViewElement | 是 |
+
+### 使用场景
+
+`native-view` 适用于开发[uts插件-标准模式组件](../plugin/uts-component-vue.md)
+
+### 使用教程
+
+#### 获取 UniNativeViewElement
+
+`native-view`提供 @init 监听元素初始化，通过事件[UniNativeViewInitEvent](#uninativeviewinitevent)的 detail.element 获取到 [UniNativeViewElement](../dom/uninativeviewelement.md)。
+
+#### UniNativeViewElement绑定原生view
+
+**Android 平台：**
+
+[UniNativeViewElement](../dom/uninativeviewelement.md) 提供[bindAndroidView](../dom/uninativeviewelement.md#bindandroidview)函数与`native-view`绑定android平台原生view
+
+**IOS 平台：**
+
+[UniNativeViewElement](../dom/uninativeviewelement.md) 提供[bindIOSView](../dom/uninativeviewelement.md#bindiosview)函数与`native-view`绑定ios平台原生view
+
+**Harmony 平台：**
+
+[UniNativeViewElement](../dom/uninativeviewelement.md) 提供 [bindHarmonyWrappedBuilder](../dom/uninativeviewelement.md#bindharmonywrappedbuilder) / [bindHarmonyFrameNode](../dom/uninativeviewelement.md#bindharmonyframenode) 函数与 `native-view` 绑定。
+
+#### 分发自定义事件
+
+[UniNativeViewElement](../dom/uninativeviewelement.md) 提供了dispatchEvent分发event事件API，注意：事件数据类型暂时只支持[UniNativeViewEvent](./common.md#uninativeviewevent)。
+
+具体示例请参考：[native-button](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/uni_modules/native-button/components/native-button/native-button.uvue)插件，该插件使用`native-view`封装原生button实现的native-button。
+
+### 注意事项
+
++ app平台`native-view`组件绑定原生view后自动适配[组件全局属性](common.md#组件全局属性)
++ app平台`native-view`组件绑定原生view后自动适配[组件全局事件](common.md#组件全局事件)
+	- android平台如果绑定的view设置了`setOnTouchListener`会导致touch部分全局事件失效
++ app平台`native-view`组件不支持自定义属性，使用[uts插件-标准模式组件-声明属性props](../plugin/uts-component-vue.md#组件声明属性props)实现自定义属性目的
++ app平台`native-view`组件不支持子组件
++ app平台`native-view`组件不支持渲染样式：[background](../css/background.md)、[border](../css/border.md)、[box-shadow](../css/box-shadow.md)
++ android平台`native-view`组件有以下限制
+  - android平台VDOM模式不支持[list-item复用机制](list-item.md#list-item复用机制)，list-item其他子组件不受影响正常启动复用业务  
+  - android平台verflow样式不支持visible，仅支持hidden
++ 支付宝小程序不支持 `native-view` 组件，使用时需通过条件编译排除支付宝小程序
+
+### 子组件 @children-tags
+不可以嵌套组件
+
+### 示例
+#### native-view
+展示使用 native-view 封装的原生view的UTS插件-标准模式组件
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/native-view/native-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/native-view/native-view.uvue) 
+>
+> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 
+
+::: preview
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/native-view/native-view
+```uvue
+<template>
+  
+  <scroll-view style="flex: 1;">
+  
+    <page-intro content="本页演示 native-view 原生视图与 UTS 插件组件：调用组件方法、native-button 与容器、native-view 样式；可跳转 native-time-picker 等原生能力。"></page-intro>
+    <view style="padding-bottom: 50px;">
+      
+      <text class="tips">说明：如果本地无 uts 插件编译环境请提交打包自定义基座查看效果</text>
+      
+      <text>在 uvue 页面中使用 native-button</text>
+      <button type="primary" @tap="testCallMethod">调用组件方法</button>
+      
+      <native-button id="helloView" class="native-button" style="width: 200px; height: 100px;" :text="buttonText" @buttonTap="ontap"
+        @load="onload"></native-button>
+      <native-button-container></native-button-container>
+      
+      <button type="primary" @click="gotoTimePicker">调用native-time-picker</button>
+      
+
+      <text class="uni-title-text">native-view样式（仅支持排版相关样式）</text>
+      <view class="styled-native-container">
+        <native-view class="styled-native-view"></native-view>
+      </view>
+
+      <text class="uni-title-text">test-native-view fixed + v-if 复现</text>
+      <view class="fixed-case-panel">
+        <button id="toggle-fixed-test-native-view" type="primary" @click="toggleFixedTestNativeView">切换 fixed test-native-view</button>
+      </view>
+
+      <test-native-view v-if="showFixedTestNativeView" id="fixed-test-native-view" class="fixed-test-native-view"></test-native-view>
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .tips {
+    font-size: 14px;
+    color: #BEBEBE;
+    margin: 25px auto 25px auto;
+    text-align: center;
+  }
+
+  .native-button {
+    height: 100px;
+    width: 100px;
+    margin: 25px auto 25px auto;
+  }
+
+  .styled-native-container {
+    background-color: cyan;
+    align-self: center;
+  }
+
+  .styled-native-view {
+    width: 80px;
+    height: 80px;
+    margin: 20px 30px;
+  }
+
+  .fixed-case-panel {
+    margin-top: 20px;
+    flex-direction: column;
+  }
+
+  .fixed-test-native-view {
+    position: fixed;
+    right: 10px;
+    bottom: 20px;
+    width: 40px;
+    height: 40px;
+    background-color: #ff0000;
+  }
+</style>
+
+```
+
+#### native-button
+通过 native-view 绑定原生 button 实现的UTS插件-标准模式组件
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/uni_modules/native-button/components/native-button/native-button.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//uni_modules/native-button/components/native-button/native-button.uvue) 
+>
+> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 
+```uvue
+<template>
+  
+  <view>
+    <native-view style="height: 100px;" @init="onviewinit" @customClick="ontap"></native-view>
+    <button style="width: 50%;margin: 10px 0px;align-self: center;">测试按钮</button>
+  </view>
+</template>
+
+```
+
+NativeButton原生对象代码如下：
+
+::: preview
+
+> Android
+
+```uts
+import { Button } from "android.widget"
+
+export class NativeButton {
+	$element: UniNativeViewElement;
+
+	constructor(element: UniNativeViewElement) {
+		this.$element = element;
+		this.bindView();
+	}
+
+	button: Button | null = null;
+	bindView() {
+		//通过UniElement.getAndroidActivity()获取android平台activity 用于创建view的上下文
+		this.button = new Button(this.$element.getAndroidActivity()!);  //构建原生view
+		//限制原生Button 文案描述不自动大写
+		this.button?.setAllCaps(false)
+		//监听原生Button点击事件
+		this.button?.setOnClickListener(_ => {
+			const detail = {}
+			//构建自定义UniNativeViewEvent返回对象
+			const event = new UniNativeViewEvent("customClick", detail)
+			//响应分发原生Button的点击事件
+			this.$element.dispatchEvent(event)
+		})
+		//UniNativeViewEvent 绑定 安卓原生view
+		this.$element.bindAndroidView(this.button!);
+	}
+
+	updateText(text: string) {
+		//更新原生Button 文案描述
+		this.button?.setText(text)
+	}
+
+	destroy() {
+		//数据回收
+	}
+}
+```
+
+> iOS
+
+```uts
+import { UIButton, UIControl } from "UIKit"
+
+export class NativeButton {
+
+	element : UniNativeViewElement;
+	button : UIButton | null;
+
+	constructor(element : UniNativeViewElement) {
+    // 接收组件传递过来的UniNativeViewElement
+		this.element = element;
+		super.init()
+		this.bindView();
+	}
+
+	// element 绑定原生view
+	bindView() {
+    // 初始化原生 UIButton
+    this.button = new UIButton(type=UIButton.ButtonType.system)
+    // 构建方法选择器
+    const method = Selector("buttonClickAction")
+    // button 绑定点击回调方法
+    button?.addTarget(this, action = method, for = UIControl.Event.touchUpInside)
+    // UniNativeViewElement 绑定原生 view
+		this.element.bindIOSView(this.button!);
+	}
+
+	updateText(text : string) {
+    // 更新 button 显示文字
+		this.button?.setTitle(text, for = UIControl.State.normal)
+	}
+
+	/**
+	 * 按钮点击回调方法
+	 * 在 swift 中，所有target-action (例如按钮的点击事件，NotificationCenter 的通知事件等)对应的 action 函数前面都要使用 @objc 进行标记。
+	 */
+	@objc buttonClickAction() {
+    //构建自定义 UniNativeViewEvent 对象
+		let event = new UniNativeViewEvent("customClick")
+    //触发自定义事件
+		this.element.dispatchEvent(event)
+	}
+
+	destroy() {
+    // 释放 UTS 实例对象，避免内存泄露
+		UTSiOS.destroyInstance(this)
+	}
+}
+
+```
+
+> Harmony
+
+```uts
+import { BuilderNode } from "@kit.ArkUI"
+// 导入混编实现的声明式UI构建函数
+// 完整代码可参考 https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/uni_modules/native-button/utssdk/app-harmony
+import { buildButton } from "./builder.ets"
+
+import { INativeButtonContext } from "../interface.uts"
+// 定义 buildButton 的参数类型
+interface NativeButtonOptions {
+    text : string
+    onClick : () => void
+}
+
+export class NativeButton {
+    private $element : UniNativeViewElement;
+    private builder : BuilderNode<[NativeButtonOptions]> | null = null
+    // 初始化 buildButton 默认参数
+    private params : NativeButtonOptions = {
+        text: '',
+        onClick: () => {
+            this.$element.dispatchEvent(new UniNativeViewEvent("customClick", {}))
+        }
+    }
+
+    constructor(element : UniNativeViewElement) {
+        // 绑定 wrapBuilder 函数
+        this.builder = element.bindHarmonyWrappedBuilder(wrapBuilder<[NativeButtonOptions]>(buildButton), this.params)
+    }
+
+    updateText(text : string) {
+        this.params.text = text
+        // 调用 builder update 函数来更新 UI
+        this.builder?.update(this.params)
+    }
+}
+
+```
+
+具体示例请参考：[native-button](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/uni_modules/native-button/components/native-button/native-button.uvue)插件
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.native-view)
+- [微信小程序文档](https://developers.weixin.qq.com/doc/search.html?source=enter&query=native-view&doc_type=miniprogram)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=native-view&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=native-view&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=native-view&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=native-view&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=native-view)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=native-view&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/navigation-bar.md

@@ -0,0 +1,44 @@
+::: sourceCode
+## navigation-bar
+
+页面导航条配置节点
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| √ | 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> |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| title | string | Web 4.0 / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 导航条标题 |
+| title-icon | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 标题icon |
+| titleIcon-radius | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 标题icon圆角 |
+| subtitle-text | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 副标题文字内容，显示在主标题下方 |
+| subtitle-size | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 副标题文字字体大小，如 14px |
+| subtitle-color | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 副标题文字颜色，支持 #RRGGBB 或 rgba 格式 |
+| subtitle-overflow | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 副标题超出显示区域时的处理方式，支持 clip 和 ellipsis |
+| title-align | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 标题对齐方式，支持 center、left 和 auto |
+| background-image | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 导航条背景图片路径或线性渐变 |
+| background-repeat | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 背景图片重复方式，支持 repeat、repeat-x、repeat-y 和 no-repeat |
+| blur-effect | string | Web 4.0 / 微信小程序 x / Android x / iOS x（部分支持，见上） | 标题栏背景高斯模糊效果，支持 dark、extralight、light 和 none |
+| loading | string | Web 4.0 / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 是否在导航条显示 loading 加载提示 |
+| front-color | string | Web 4.0 / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 |
+| background-color | string | Web 4.0 / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 导航条背景颜色值，有效值为十六进制颜色 |
+| color-animation-duration | number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果） |
+| color-animation-timing-func | string | Web 4.0 / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.page-meta.navigation-bar)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/navigation-bar.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigation-bar.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=navigation-bar&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=navigation-bar&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=navigation-bar&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=navigation-bar&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=navigation-bar)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=navigation-bar&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)