tmui-cli 2.0.4 → 2.0.5

package/data/uniappx/component/textarea.md

@@ -317,10 +317,8 @@ if (view != null && view instanceof UITextView) {
           :selection-start="data.selectionStart" :selection-end="data.selectionEnd" @blur="onSelectionBlurChange" />
       </view>
 
-      <view class="title-wrap">
-        <view>设置hold-keyboard</view>
-        <switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="data.hold_keyboard"></switch>
-      </view>
+      <boolean-data :defaultValue="data.hold_keyboard" title="设置hold-keyboard"
+        @change="changeHoldKeyboard"></boolean-data>
       <view class="textarea-wrap">
         <textarea class="textarea-instance" :hold-keyboard="data.hold_keyboard" />
       </view>
@@ -332,10 +330,8 @@ if (view != null && view instanceof UITextView) {
           <textarea id="both-model-value" class="textarea-instance" v-model='data.defaultModel' value='456'></textarea>
       </view>
 
-      <view class="title-wrap">
-        <view>设置adjust-position</view>
-        <switch style="margin-left: 10px;" @change="changeAdjustPosition" :checked="data.adjust_position"></switch>
-      </view>
+      <boolean-data :defaultValue="data.adjust_position" title="设置adjust-position"
+        @change="changeAdjustPosition"></boolean-data>
       <view class="textarea-wrap">
         <textarea class="textarea-instance" :adjust-position="data.adjust_position" />
       </view>

package/data/uniappx/component/uni-ui-x/uni-badge-view.md

@@ -65,10 +65,10 @@ badge组件的badge-class和badge-style属性，直接作用在角标view上，
 ```vue
 <template>
 	
-	<scroll-view style="flex: 1;padding: 20px 5px 5px;">
+	<scroll-view class="uni-theme-root" style="flex: 1;padding: 20px 5px 5px;">
 	
 	
-	<view style="padding: 20px 5px 5px;">
+	<view class="uni-theme-root" style="padding: 20px 5px 5px;">
 	
 	<uni-badge-view text="99+" >
 		<view style="width: 50px; height: 20px; background-color: green;"></view>

package/data/uniappx/component/uni-ui-x/uni-collapse.md

@@ -123,21 +123,22 @@ uni-collapse-item的标题栏的自定义：
 >示例
 ```vue
 <template>
-  <scroll-view class="page uni-theme-root">
+  
+  <scroll-view class="page">
     <view class="section">
       <text class="section-title">手风琴模式</text>
       <uni-collapse :accordion="true">
-        <uni-collapse-item class="theme-collapse-item" title="面板 A（默认展开）" :open="data.enableOpen" @change="onPanelAChange" title-wrap-class="theme-collapse-title-wrap" title-class="theme-collapse-title" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow">
+        <uni-collapse-item title="面板 A（默认展开）" :open="data.enableOpen" @change="onPanelAChange">
           <view class="content-box" @click="onPanelAClick">
             <text class="content-text">手风琴模式下，同时只会保持一个面板展开。点击当前标题会自动收起其他面板。</text>
           </view>
         </uni-collapse-item>
-        <uni-collapse-item class="theme-collapse-item" title="面板 B" @change="onPanelBChange" title-wrap-class="theme-collapse-title-wrap" title-class="theme-collapse-title" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow">
+        <uni-collapse-item title="面板 B" @change="onPanelBChange">
           <view id="panel-b" class="content-box">
             <text class="content-text">当前项展开时，其他已展开的项会自动收起。这里用于验证切换动画和事件回调。</text>
           </view>
         </uni-collapse-item>
-        <uni-collapse-item class="theme-collapse-item" title="禁用项" :disabled="true" title-wrap-class="theme-collapse-title-wrap" title-class="theme-collapse-title" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow">
+        <uni-collapse-item title="禁用项" :disabled="true">
           <view class="content-box">
             <text class="content-text">禁用状态下不会响应点击，也不会触发展开或收起。</text>
           </view>
@@ -148,7 +149,7 @@ uni-collapse-item的标题栏的自定义：
     <view class="section">
       <text class="section-title">普通模式-可同时展开的分组折叠列表</text>
       <uni-collapse :accordion="false">
-        <uni-collapse-item v-for="(group, index) in categoryGroups" :key="group.title" class="theme-collapse-item" :title="group.title" @change="onCategoryChange(group.title, $event as boolean)" title-wrap-class="theme-collapse-title-wrap" title-class="theme-collapse-title" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow">
+        <uni-collapse-item v-for="(group, index) in categoryGroups" :key="group.title" :title="group.title" @change="onCategoryChange(group.title, $event as boolean)">
           <view class="category-list">
             <view v-for="(item, itemIndex) in group.items" :key="item.title" class="category-list-item"
               :class="{'category-list-item--last': itemIndex == group.items.length - 1}">
@@ -163,17 +164,17 @@ uni-collapse-item的标题栏的自定义：
     <view class="section">
       <text class="section-title">externalClass 示例</text>
       <uni-collapse :accordion="false">
-        <uni-collapse-item class="theme-collapse-item" title="自定义标题文字" title-wrap-class="theme-collapse-title-wrap" title-class="theme-collapse-title demo-title-emphasis" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow">
+        <uni-collapse-item title="自定义标题文字" title-class="demo-title-emphasis">
           <view class="content-box">
             <text class="content-text">通过 title-class 可以覆盖 title 属性对应 text 组件的样式。</text>
           </view>
         </uni-collapse-item>
-        <uni-collapse-item class="theme-collapse-item" title="自定义箭头样式" title-wrap-class="theme-collapse-title-wrap" title-class="theme-collapse-title" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow demo-arrow-large">
+        <uni-collapse-item title="自定义箭头样式" arrow-class="demo-arrow-large">
           <view class="content-box">
             <text class="content-text">通过 arrow-class 可以覆盖默认箭头 view 的尺寸、边框粗细和颜色。</text>
           </view>
         </uni-collapse-item>
-        <uni-collapse-item class="theme-collapse-item" title="同时自定义标题和箭头" title-wrap-class="theme-collapse-title-wrap" title-class="theme-collapse-title demo-title-accent" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow demo-arrow-accent">
+        <uni-collapse-item title="同时自定义标题和箭头" title-class="demo-title-accent" arrow-class="demo-arrow-accent">
           <view class="content-box">
             <text class="content-text">title-class 和 arrow-class 可以组合使用。</text>
           </view>
@@ -184,7 +185,7 @@ uni-collapse-item的标题栏的自定义：
     <view class="section">
       <text class="section-title">具名插槽标题</text>
       <uni-collapse :accordion="false">
-        <uni-collapse-item class="theme-collapse-item" title-wrap-class="theme-collapse-title-wrap" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow">
+        <uni-collapse-item>
           <template #title="{ open, disabled }">
             <view class="slot-title-wrap">
               <view class="slot-title-icon" :class="{'slot-title-icon--open': open, 'slot-title-icon--disabled': disabled}"></view>
@@ -196,7 +197,7 @@ uni-collapse-item的标题栏的自定义：
             <text class="content-text">通过 #title 可以自定义标题区域结构，例如在文字前增加图标、状态徽标和辅助说明。</text>
           </view>
         </uni-collapse-item>
-        <uni-collapse-item class="theme-collapse-item" title-wrap-class="theme-collapse-title-wrap" content-wrap-class="theme-collapse-content-wrap" arrow-class="theme-collapse-arrow">
+        <uni-collapse-item>
           <template #title="{ open }">
             <view class="slot-title-wrap">
               <view class="slot-title-icon slot-title-icon--secondary" :class="{'slot-title-icon--open': open}"></view>
@@ -248,21 +249,6 @@ uni-collapse-item的标题栏的自定义：
     padding: 12px;
   }
 
-  .theme-collapse-item,
-  .theme-collapse-title-wrap,
-  .theme-collapse-content-wrap {
-    background-color: #ffffff;
-  }
-
-  .theme-collapse-title {
-    color: #333333;
-  }
-
-  .theme-collapse-arrow {
-    border-right-color: #999999;
-    border-bottom-color: #999999;
-  }
-
   .section {
     margin-bottom: 12px;
     border-radius: 8px;
@@ -530,36 +516,6 @@ uni-collapse-item的标题栏的自定义：
     font-size: 13px;
     color: #2563eb;
   }
-
-  @media (prefers-color-scheme: dark) {
-    .theme-collapse-item,
-    .theme-collapse-title-wrap,
-    .theme-collapse-content-wrap {
-      background-color: #2d2d2d;
-    }
-
-    .theme-collapse-title {
-      color: #ffffff;
-    }
-
-    .theme-collapse-arrow {
-      border-right-color: #ffffff;
-      border-bottom-color: #ffffff;
-    }
-
-    .demo-title-accent {
-      color: #5eead4;
-    }
-
-    .demo-arrow-accent {
-      border-right-color: #5eead4;
-      border-bottom-color: #5eead4;
-    }
-
-    .slot-title-note {
-      color: #cbd5e1;
-    }
-  }
 </style>
 
 ```

package/data/uniappx/component/uni-ui-x/uni-fab-button.md

@@ -42,7 +42,7 @@ source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-fab-butto
 >示例
 ```vue
 <template>
-	<view style="flex: 1;position: relative;padding: 15px 15px 0 15px;">
+	<view class="uni-theme-root" style="flex: 1;position: relative;padding: 15px 15px 0 15px;">
 		<text class="label first-label">标准uni-fab-button</text>
 		<uni-fab-button></uni-fab-button>
 		<text class="label">自定义fab样式</text>

package/data/uniappx/component/uni-ui-x/uni-link.md

@@ -84,7 +84,7 @@ source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-link
 >示例
 ```vue
 <template>
-  <scroll-view class="page">
+  <scroll-view class="page uni-theme-root">
     <view class="section">
       <text class="section-title">基础用法</text>
       <view class="link-block">

package/data/uniappx/component/uni-ui-x/uni-number-box.md

@@ -97,10 +97,10 @@ source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-number-bo
 ```vue
 <template>
 	
-	<scroll-view style="flex: 1; padding: 15px;">
+	<scroll-view class="uni-theme-root" style="flex: 1; padding: 15px;">
 	
 	
-	<view style="padding: 15px;">
+	<view class="uni-theme-root" style="padding: 15px;">
 	
 		<text class="page-title">NumberBox 数字输入框</text>
 

package/data/uniappx/component/uni-ui-x/uni-rate.md

@@ -70,10 +70,10 @@ rate组件有onChange事件，事件回调中会给出点击触发的新评分
 ```vue
 <template>
 	
-	<scroll-view style="flex: 1;padding: 15px 15px 30px 15px;">
+	<scroll-view class="uni-theme-root" style="flex: 1;padding: 15px 15px 30px 15px;">
 	
 	
-	<view style="padding: 15px 15px 30px 15px;">
+	<view class="uni-theme-root" style="padding: 15px 15px 30px 15px;">
 	
 		<text class="desc">评分组件用于商品评价打分、服务态度评价、用户满意度等场景。\n
 		高性能模式仅有一个text组件，不可修改评分，适合长列表中显示的场景。\n

package/data/uniappx/component/uni-ui-x/uni-refresh-box.md

@@ -88,7 +88,7 @@ source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-refresh-b
 >示例
 ```vue
 <template>
-  <view style="flex: 1;">
+  <view class="uni-theme-root" style="flex: 1;">
     <scroll-view
       style="flex: 1;"
       :refresher-enabled="true"

package/data/uniappx/component/uni-ui-x/uni-tab.md

@@ -452,7 +452,7 @@ source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-tab-bar
 >示例
 ```vue
 <template>
-	<uni-tab style="flex: 1" :active-index="activeIndex" :tab-bar-height="40" @change="handleChange">
+	<uni-tab class="uni-theme-root" style="flex: 1" :active-index="activeIndex" :tab-bar-height="40" @change="handleChange">
 		<uni-tab-content>
 			<view class="custom-panel custom-panel-emerald">
 				<text class="custom-panel-kicker">自定义 tab-bar</text>
@@ -562,6 +562,23 @@ source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-tab-bar
 	.custom-tab-label-active {
 		color: #1d9f5f;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		.custom-panel-emerald { background-color: #17372a; }
+		.custom-panel-sand { background-color: #43331f; }
+		.custom-panel-ink { background-color: #26363b; }
+
+		.custom-panel-kicker,
+		.custom-panel-desc,
+		.custom-tab-label {
+			color: rgba(255, 255, 255, 0.68);
+		}
+
+		.custom-panel-title { color: #ffffff; }
+		.custom-tab-list-shell { background-color: #242424; }
+		.custom-tab-list-root { background: linear-gradient(to right, #40301e, #173b34); }
+		.custom-tab-label-active { color: #5ee29b; }
+	}
 </style>
 
 ```
@@ -576,7 +593,7 @@ source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-tab-bar
 >示例
 ```vue
 <template>
-	<uni-tab style="flex: 1" :active-index="activeIndex" :tab-bar-height="TAB_BAR_HEIGHT" :tab-content-height-full="tabContentHeightFull" @change="handleChange">
+	<uni-tab class="uni-theme-root" style="flex: 1" :active-index="activeIndex" :tab-bar-height="TAB_BAR_HEIGHT" :tab-content-height-full="tabContentHeightFull" @change="handleChange">
 		<uni-tab-content :style="tabContentStyle">
 			<scroll-view class="blur-scroll blur-scene-morning" direction="vertical">
 				<view class="blur-content-inner">
@@ -831,6 +848,31 @@ source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-tab-bar
 	.blur-tab-label-active {
 		color: #0f766e;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		.blur-scene-morning,
+		.blur-scene-coral,
+		.blur-scene-ink {
+			background-color: #1a1a1a;
+		}
+
+		.blur-title,
+		.blur-card-title {
+			color: #ffffff;
+		}
+
+		.blur-desc,
+		.blur-card-desc,
+		.blur-tab-label {
+			color: rgba(255, 255, 255, 0.72);
+		}
+
+		.blur-card-blue { background-color: #18324d; }
+		.blur-card-green { background-color: #19382d; }
+		.blur-card-yellow { background-color: #493b18; }
+		.blur-card-coral { background-color: #492823; }
+		.blur-tab-label-active { color: #5eead4; }
+	}
 </style>
 
 ```

package/data/uniappx/component/video.md

@@ -308,14 +308,20 @@ UniVideoReuseEvent -- Extends --> UniCustomEvent&ltUniVideoReuseEventDetail&gt
 
 ### app平台组件实现
 
-#### HBuilderX5.08及以上版本  
-App-Android平台使用 ExoPlayer 库实现，不再支持 codec、play-strategy 属性  
-App-iOS平台使用系统 AVPlayer 实现，不再支持 codec、play-strategy 属性  
+#### HBuilderX5.08及以上版本
+- App-Android平台 使用 Google ExoPlayer 库实现，不再支持 codec、play-strategy 属性
+- App-iOS平台 使用iOS系统自带的AVPlayer 实现，不再支持 codec、play-strategy 属性
+- App-Harmony平台 使用系统video实现
+
+新版本放弃ijkplayer，主要原因是该库原作者已不维护。使用系统的video虽然会损失一些功能，如下：
 
 > 不再支持流媒体 rtmp/rtsp，仅支持hls协议  
 > 不再支持flv视频格式  
 
+但系统video的性能、质量和包体积占用更有优势。
+
 #### HBuilderX5.08以下版本  
+
 App-Android/iOS平台video组件使用ijkplayer库实现：[https://github.com/bilibili/ijkplayer](https://github.com/bilibili/ijkplayer)；
 
 弹幕功能使用DanmakuFlameMaster库实现：[https://github.com/bilibili/DanmakuFlameMaster](https://github.com/bilibili/DanmakuFlameMaster)
@@ -324,8 +330,6 @@ ijkplayer库底层又使用了ffmpeg，这些库的功能较多，官方的video
 
 video组件的源码[详见](https://gitcode.com/dcloud/uni-component/tree/master/uni_modules/uni-video)。下载该uni_modules到工程下，修改源码打包，可覆盖内置的video组件。
 
-另外ijkplayer作为一个开源库，比腾讯视频等商业sdk仍有差距。如无法在开源库上满足需求，可在插件市场寻找其他插件：见插件市场[视频播放](https://ext.dcloud.net.cn/search?q=%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE&orderBy=Relevance&uni-appx=1)
-
 ### 子组件 @children-tags
 支持所有组件
 
@@ -418,18 +422,17 @@ video的操作api为[uni.createVideoContext()](../api/create-video-context.md)
         <button type="primary" @click="openDialogPageVideo">dialogPage 视频格式示例</button>
       </view>
       
-      <view class="uni-row uni-btn-v" style="justify-content: space-between;align-items: center;">
-        <text class="uni-title" style="width: 80%;">全屏后自定义 controls</text>
-        <switch :checked="data.subCompControlsEnable" @change="onSubCompControlsEnable" />
-      </view>
-      <view class="uni-row uni-btn-v" style="justify-content: space-between;align-items: center;">
+      <boolean-data :defaultValue="data.subCompControlsEnable" title="全屏后自定义 controls"
+        @change="onSubCompControlsEnable"></boolean-data>
+      <view>
         
-        <text class="uni-title" style="width: 80%;">子组件实现快进、快退、发送弹幕功能（全屏后显示）</text>
+        <boolean-data :defaultValue="data.subCompEnable" title="子组件实现快进、快退、发送弹幕功能（全屏后显示）"
+          @change="onSubCompEnableChange"></boolean-data>
         
         
-        <text class="uni-title" style="width: 80%;">子组件实现快进、快退功能（全屏后显示）</text>
+        <boolean-data :defaultValue="data.subCompEnable" title="子组件实现快进、快退功能（全屏后显示）"
+          @change="onSubCompEnableChange"></boolean-data>
         
-        <switch :checked="data.subCompEnable" @change="onSubCompEnableChange" />
       </view>
       <view class="uni-title">
         <text class="uni-title-text">API示例</text>

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

@@ -275,27 +275,16 @@ App平台 web-view 组件可在 scroll-view、list-view/list-item 等可滚动
         </navigator>
       </view>
       
-      
-      <view class="uni-row uni-btn-v">
-        <view class="uni-row uni-flex-item align-items-center">
-          <text>显示横向滚动条</text>
-          <switch :checked="true" @change="changeHorizontalScrollBarAccess"></switch>
-        </view>
-        <view class="uni-row uni-flex-item align-items-center">
-          <text>显示竖向滚动条</text>
-          <switch :checked="true" @change="changeVerticalScrollBarAccess"></switch>
-        </view>
-      </view>
-      <view class="uni-row uni-btn-v">
-        <view class="uni-row uni-flex-item align-items-center">
-          <text>开启bounces</text>
-          <switch :checked="true" @change="changeBounces"></switch>
-          
-          <text>禁用选择菜单</text>
-          <switch :checked="false" @change="changeDisableUserSelectMenu"></switch>
-          
-        </view>
-      </view>
+      
+      <boolean-data :defaultValue="true" title="显示横向滚动条"
+        @change="changeHorizontalScrollBarAccess"></boolean-data>
+      <boolean-data :defaultValue="true" title="显示竖向滚动条"
+        @change="changeVerticalScrollBarAccess"></boolean-data>
+      <boolean-data :defaultValue="true" title="开启bounces" @change="changeBounces"></boolean-data>
+      
+      <boolean-data :defaultValue="false" title="禁用选择菜单"
+        @change="changeDisableUserSelectMenu"></boolean-data>
+      
       
       
       <view class="uni-row uni-btn-v" v-if="isProd() === false">

package/data/uniappx/css/_sidebar.md

@@ -100,5 +100,4 @@
   * [visibility](visibility.md)
   * [white-space](white-space.md)
   * [width](width.md)
-  * [z-index](z-index.md)
-* [uni-app x CSS 和标准 CSS 的差异](css_diff_web.md)
+  * [z-index](z-index.md)

package/data/uniappx/css/common/function.md

@@ -36,11 +36,14 @@ CSS自定义变量规范参考[MDN Reference](https://developer.mozilla.org/zh-C
 App平台相比web平台，有以下差异：
 - 定义变量时不支持值为var(--*) ex: --color: var(--color)
 - 回退值不支持var(--*) ex: --height: var(--height1 , var(--height2))
-- App平台 VDOM模式transtion暂不支持使用var，App平台 蒸汽模式仅transtion长写属性支持var
-- App平台 VDOM模式的部分组件的样式不支持CSS变量：input、textarea 的 placeholder-style、placeholder-class；picker-view 的 indicator-style、indicator-class、mask-style、mask-class。
-- 蒸汽模式的部分组件使用了useComputedStyle，这类组件的样式支持CSS变量需HBuilderX 5.25+，包括input、textarea、loading组件的class。
+- App平台蒸汽模式的部分组件使用了useComputedStyle，这类组件的样式支持CSS变量需HBuilderX 5.25+，包括input、textarea、loading组件的class。
 - App平台不支持:root伪类。蒸汽模式可以使用page选择器替代。vdom模式需要自行在页面根元素或合适的父级元素的class中定义css变量，以便在子元素生效。
 
+App平台 VDOM模式注意事项：
+- App平台 VDOM模式简写属性(如padding、margin等)不支持使用var，比如：--padding: 10px 20px; padding: var(--padding);。需展开后使用，比如展开成padding-left。
+- App平台 VDOM模式transtion暂不支持使用var。App平台 蒸汽模式仅transtion长写属性支持var
+- App平台 VDOM模式的部分组件的样式不支持CSS变量：input、textarea 的 placeholder-style、placeholder-class；picker-view 的 indicator-style、indicator-class、mask-style、mask-class。
+
 ### 示例 
  示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/variable/variable.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/variable/variable.uvue) 
 ::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/variable/variable
@@ -614,7 +617,7 @@ web平台的 CSS环境变量规范参考[MDN Reference](https://developer.mozill
 ```
 
 ## calc @calc
-> uni-app x 5.27+ App平台 蒸汽模式支持calc方法
+> uni-app x 5.31+ App平台 蒸汽模式支持calc方法
 
 calc() 函数允许在声明 CSS 属性值时执行计算。
 

package/data/uniappx/css/common/selector.md

@@ -4,20 +4,20 @@
 - web端可以使用`html`、`body`、`:root`等选择器。由于页面的css样式隔离，且html节点并未添加data-xxx属性，`html`、`:root`写在页面style内无效，只能写在App.uvue内。
 - 深度选择器 `:deep()/::v-deep` 用法参考 [单文件 style - 深度选择器](/vue/index#scoped) 文档。
 
-| 名称 | 示例 | Web | Android | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) | 描述 |
-| :- | :- | :- | :- | :- | :- | :- | :- | :- |
-| 通配选择器 | * {} | 4.0 | x | x | x | x | x |  |
-| 类选择器 | .class {} | 4.0 | 3.9 | 4.11 | 5.11 | 4.61 | 5.0 |  |
-| 元素选择器 | \[tag] {} | 4.0 | x | x | x | x | x | App平台蒸汽模式支持page选择器 |
-| ID 选择器 | #\[id] {} | 4.0 | x | x | x | x | x |  |
-| 属性选择器 | \[attr] {} | 4.0 | x | x | x | x | x |  |
-| 分组选择器 | .a, .b {} | 4.0 | 3.9 | 4.11 | 5.11 | 4.61 | 5.0 |  |
-| 直接子代选择器 | .a > .b {} | 4.0 | 3.9 | 4.11 |   | 4.61 | x |  |
-| 后代选择器 | .a .b {} | 4.0 | 3.9 | 4.11 | x | 4.61 | x |  |
-| 一般兄弟选择器 | .a ~ .b {} | 4.0 | 3.9 | 4.11 | x | 4.61 | x |  |
-| 紧邻兄弟选择器 | .a + .b {} | 4.0 | 3.9 | 4.11 | x | 4.61 | x |  |
-| 伪类选择器 | :active {} | 4.0 | x | x | x | x | x |  |
-| 伪元素选择器 | ::before {} | 4.0 | x | x | x | x | x |  |
+| 名称 | 示例 | Web | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) | 描述 |
+| :- | :- | :- | :- | :- | :- | :- | :- | :- | :- |
+| 通配选择器 | * {} | 4.0 | x |   | x | x | x | x |  |
+| 类选择器 | .class {} | 4.0 | 3.9 |   | 4.11 | 5.11 | 4.61 | 5.0 |  |
+| 元素选择器 | \[tag] {} | 4.0 | x |   | x | x | x | x | App平台蒸汽模式支持page选择器 |
+| ID 选择器 | #\[id] {} | 4.0 | x |   | x | x | x | x |  |
+| 属性选择器 | \[attr] {} | 4.0 | x |   | x | x | x | x |  |
+| 分组选择器 | .a, .b {} | 4.0 | 3.9 |   | 4.11 | 5.11 | 4.61 | 5.0 |  |
+| 直接子代选择器 | .a > .b {} | 4.0 | 3.9 | x | 4.11 | x | 4.61 | x |  |
+| 后代选择器 | .a .b {} | 4.0 | 3.9 | x | 4.11 | x | 4.61 | x |  |
+| 一般兄弟选择器 | .a ~ .b {} | 4.0 | 3.9 | x | 4.11 | x | 4.61 | x |  |
+| 紧邻兄弟选择器 | .a + .b {} | 4.0 | 3.9 | x | 4.11 | x | 4.61 | x |  |
+| 伪类选择器 | :active {} | 4.0 | x |   | x | x | x | x |  |
+| 伪元素选择器 | ::before {} | 4.0 | x |   | x | x | x | x |  |
 
 ::: warning 注意
 1. 选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量，**当前只支持：CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新**。

package/data/uniappx/mp/README.md

@@ -18,10 +18,6 @@ uni-app x中全平台统一使用flex布局。
 uni-app x主要是在这个版本库上适配。
 已知过老的基础库版本上，scroll-view区域大小会不准确。请开发者检查并确保基础库版本大于3.7.1。
 
-## uts
-
-推荐使用uts跨端开发，但微信小程序上也支持js/ts。
-
 ## vue
 
 ### 自定义组件启用virtualHost带来的影响@virtualHost

package/data/uniappx/mp/native-component-and-wxs.md

@@ -0,0 +1,151 @@
+# 小程序自定义组件支持
+
+`uni-app x` 除了支持 uvue 组件之外，也实现了对原生小程序自定义组件的兼容。小程序组件不是 uvue 组件，每家小程序都有自己的组件规范，比如微信小程序的组件是 wxml、wxss ，支付宝小程序是 axml、acss。下面介绍如何在 `uni-app x` 中使用原生小程序自定义组件。
+
+## 创建自定义小程序目录
+
+原生小程序自定义组件需要放在 `uni-app x` 项目 `根路径` 的特定名称目录中，项目结构类似于
+
+<pre v-pre="" data-lang="">
+	<code class="lang-" style="padding:0">
+┌─wxcomponents                  微信小程序自定义组件存放目录
+│   └──custom                   微信小程序自定义组件
+│		├─index.js
+│		├─index.wxml
+│		├─index.json
+│		└─index.wxss
+├─mycomponents                  支付宝小程序自定义组件存放目录
+│   └──custom                   支付宝小程序自定义组件
+│		├─index.js
+│		├─index.axml
+│		├─index.json
+│		└─index.acss
+├─pages
+│  └─index
+│		└─index.vue
+│
+├─static
+├─main.ts
+├─App.uvue
+├─manifest.json
+└─pages.json
+	</code>
+</pre>
+
+目录名可以参考下方表格
+
+| 平台         | 目录名       |
+| ------------ | ------------ |
+| 微信小程序   | wxcomponents |
+| 支付宝小程序 | mycomponents |
+
+此文档要求开发者对各端小程序的**自定义组件**有一定了解，没接触过小程序**自定义组件**的可以参考：
+
+- [微信小程序自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
+- [支付宝小程序自定义组件](https://docs.alipay.com/mini/framework/custom-component-overview)
+
+## 使用组件
+
+在需要使用自定义小程序组件的页面中，添加 `usingComponents` 配置。例如，在微信小程序中：
+
+```json
+// pages.json
+{
+  "pages": [
+    {
+      "path": "index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "usingComponents": {
+          "custom": "/wxcomponents/custom/index"
+        }
+      }
+    }
+  ]
+}
+```
+
+页面使用自定义小程序组件
+
+```html
+<template>
+  <view>
+    <custom :title="title" @change="handleChange"></custom>
+  </view>
+</template>
+
+```
+
+# WXS
+
+WXS 是一套运行在视图层的脚本语言，它的特点是运行在视图层。当需要避免逻辑层和渲染层交互通信折损时，可采用 WXS。
+
+与 WXS 类似，支付宝小程序提供了 SJS，`uni-app x` 也支持使用这些功能，并将它们编译到支付宝小程序端。
+
+**平台差异说明**
+
+| 微信小程序 | 支付宝小程序 |
+| :--------: | :----------: |
+|    wxs     |     sjs      |
+
+下面介绍如何在 `uni-app x` 中使用 WXS/SJS。
+
+## 创建 WXS/SJS 文件
+
+在微信小程序中，可以通过创建 `.wxs` 文件来定义 WXS 模块。例如，创建 `utils.wxs`：
+
+```javascript
+// utils.wxs
+module.exports = {
+  log: function () {
+    console.log("log");
+  },
+};
+```
+
+在支付宝小程序中，可以通过创建 `.sjs` 文件来定义 SJS 模块。例如，创建 `utils.sjs`：
+
+```javascript
+// utils.sjs
+function log() {
+  console.log("log");
+}
+
+export default {
+  log,
+};
+```
+
+## 页面使用 WXS/SJS
+
+```html
+<template>
+  <view>
+    <image class="logo" src="/static/logo.png"></image>
+    <text class="title">{{title}}</text>
+    <button @click="utils.log">打印日志</button>
+  </view>
+</template>
+
+<style>
+  .logo {
+    height: 100px;
+    width: 100px;
+    margin: 100px auto 25px auto;
+  }
+
+  .title {
+    font-size: 18px;
+    color: #8f8f94;
+    text-align: center;
+  }
+</style>
+```
+
+## 注意事项
+
+- **【重要】** 编写 wxs、sjs 内容时必须遵循相应语法规范
+- **【重要】** `module` 所指定的模块名不可与声明的变量或者函数内的属性重名
+- 微信小程序请使用 wxs 规范，[WXS 语法参考文档](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/)
+- 支付宝小程序请使用 sjs 规范，[SJS 语法参考文档](https://docs.alipay.com/mini/framework/sjs)
+- 支付宝小程序 sjs 只能定义在 .sjs 文件中，然后使用 `<script>` 标签引入，不支持在 uvue 文件中直接编写