tmui-cli 2.0.3 → 2.0.4

package/data/uniappx/page.md

@@ -0,0 +1,486 @@
+# 页面简介
+
+uni-app x 项目中，页面文件的后缀名`.uvue`文件。
+
+每个uvue文件，都是一个符合`Vue SFC规范`的 vue 文件。
+
+uni-app x 只有 `.uvue`页面，不支持和vue页面并存（因vue是js驱动、webview渲染，uni-app x在app-Android中没有js引擎，app中渲染是原生渲染，无法使用vue页面）。
+
+当然某些组件可以通过条件编译同时适配uni-app和uni-app x，所以在uni-app x的项目中，看到某些组件代码也有vue文件，但这些vue文件并不在uni-app x项目中生效，或者被当做uvue组件对待。
+
+另外uts组件的[uni-app兼容模式插件](./plugin/uts-component.md)的入口文件命名是index.vue。因为uts插件在uni-app和uni-app x中均可使用，所以文件后缀名为vue。\
+但这个vue文件并不是真正的页面，它只是uts组件插件为了尽可能照顾开发者习惯而参考vue规范定义的原生组件入口文件。
+
+uni-app x 在非小程序平台上，提供了[dialogPage](./api/dialog-page.md)，这是一种在主页面上弹出全屏的、背景透明的模态子页面。
+
+uni-app x 在app-android上，每个页面都是一个全屏activity，不支持透明。如需要透明页面请使用[dialogPage](./api/dialog-page.md)
+
+## 页面管理
+
+### 新建页面
+
+新建页面，默认保存在工程根目录下的`pages`目录下。
+
+每次新建页面，均需在`pages.json`中配置`pages`列表；未在`pages.json -> pages` 中注册的页面，在编译阶段会被忽略，不会进入编译产物。
+
+pages.json的完整配置参考：[页面配置](./collocation/pagesjson.md)。
+
+通过HBuilderX开发 `uni-app x` 项目时，在项目上右键“新建页面”，HBuilderX会自动在`pages.json`中完成页面注册，开发更方便。
+
+新建页面时，可以选择`是否创建同名目录`。创建目录的意义在于：
+
+- 如果你的页面较复杂，需要拆分多个附属的uts、css、组件等文件，则使用目录归纳比较合适。
+- 如果只有一个页面文件，大可不必多放一层目录。
+
+不管是普通页面，还是dialogPage页面，都需要在pages.json中注册。
+
+### 删除页面
+
+删除页面时，需做两件工作：
+
+- 删除`.uvue`文件
+- 删除`pages.json -> pages`列表项中的配置 （如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容，点击后会打开pages.json并定位到相关配置项）
+
+### 页面改名
+
+操作和删除页面同理，依次修改文件名和 `pages.json`。
+
+### pages.json
+
+pages.json位于工程根目录，是工程的页面管理配置文件，功能包括：页面路由注册、页面style参数配置（背景色、原生标题栏、下拉刷新...）、首页tabbar等众多功能。
+
+其篇幅较长，另见 [pages.json](./collocation/pagesjson.md)
+
+#### 设置应用首页@startpage
+
+`pages.json -> pages`配置项中的第一个页面，作为当前工程的首页（启动页）。
+
+```json
+{
+	"pages": [
+		{
+			"path": "pages/index/index", //名字叫不叫index无所谓，位置在第一个，就是首页
+			"style": {
+				"navigationBarTitleText": "首页" //页面标题
+			}
+		},
+		{
+			"path": "pages/my",
+			"style": {
+				"navigationBarTitleText": "我的"
+			}
+		},
+	]
+}
+```
+
+## 页面内容构成
+
+uvue页面基于 vue 单文件组件规范。一个页面内，有3个根节点标签：
+
+- 模板区 `<template>`
+- 脚本区 `
+
+<style>
+	.content {
+		width: 750rpx;
+		background-color: white;
+	}
+</style>
+```
+
+页面内容构成，另有[详细文档](./vue/README.md)
+
+### script区块
+
+VDOM模式script内的代码一定会作为uts编译（目标产物是kotlin或js），需遵循uts的语法规范。
+
+蒸汽模式script内的代码的产物是js（所有平台），因此并不限制开发者使用js语法，也不强制要求补全类型。
+
+## 页面的可滚动性@disablescroll
+
+web及使用webview的小程序，页面默认是可滚动的。
+而标准原生应用中的页面默认是不可滚动的，需要滚动时需显式的在template中写scroll-view等滚动容器的代码。
+
+uni-app中，vue页面默认可滚动，nvue为了多端一致性默认给页面套了一个scroll-view。
+
+uni-app x中，App平台的页面是一个原生页面，
+- VDOM模式中，App平台的页面默认不可滚动，需要开发者在页面中显示使用scroll-view。
+- 蒸汽模式中，App平台的页面默认可滚动，与web和小程序拉齐。需HBuilder 5.12+
+
+在uni-app x的vdom模式中，出于性能考虑，app平台默认没有隐式给页面套scroll-view，所以新建页面时，选择可滚动页面会出现下面的代码
+```vue
+<template>
+  
+  <scroll-view style="flex:1">
+  
+
+ 
+  </scroll-view>
+  
+</template>
+```
+
+uni-app x的蒸汽模式，因为已经做到比原生渲染更快，套一层 `scroll-view` 对性能影响很小，所以拉平了多端一致性。
+
+如果希望页面不可滚动，可以在[pages.json](./collocation/pagesjson.md#pagesoptionspage-style)的页面Style中配置`disableScroll:true`禁用页面滚动。此配置项仅禁用页面自身的滚动，页面内的 `scroll-view` 组件不受影响。
+
+如下几种情况，推荐禁用页面滚动：
+1. 使用了自定义导航栏、自定义tabbar。如果不禁用页面滚动，bounce回弹效果会在导航栏上面和tabbar下面。
+2. 页面根组件是 scroll-view、list-view、waterflow 等滚动容器。如果不禁用页面滚动，会发生嵌套滚动。
+
+uni-app x在编译期间，会对上述情况进行静态检查和告警。
+
+如果是vdom模式页面升级为蒸汽模式时，控制台收到编译告警，建议去掉这段条件编译套scroll-view的代码：
+```vue
+	
+  <scroll-view style="flex:1">
+  
+
+ 
+  </scroll-view>
+  
+```
+
+注意：
+- 只有滚动区的子内容高度大于滚动容器，才能发生滚动。
+
+写如下代码，页面实际上无法滚动，因为这个view占据所有剩余空间，导致滚动区内容的高度永远无法超过滚动容器的高度。
+```vue
+<template>
+  <view style="flex:1">
+  </view>
+</template>
+```
+
+- 当页面Style中开启了页面下拉刷新，即enablePullDownRefresh为true时，且`disableScroll:true`，此时页面仍无法滚动，但是否同时还支持下拉刷新，各平台有差异。
+
+此时微信小程序在Android、iOS、鸿蒙上的表现也不同。
+App平台的策略是`disableScroll:true`时不能下拉刷新。
+
+### 页面滚动相关的生命周期、api
+
+页面滚动有一批相关的生命周期、api，比如：`onPageScroll`、`onReachBottom`、`uni.pageScrollTo()`
+
+如果页面不可滚动，这些生命周期不会触发，相关API不可用。
+
+在app平台vdom模式，由于页面不可滚动，会判断页面根节点是否为scroll-view（不认list-view等其他滚动容器）。
+
+* 如果是，页面滚动相关的生命周期和API继续生效，效果如前。
+* 如果不是scroll-view，全部失效。
+
+### 页面无法滚动引起的position差异
+
+app平台vdom模式无页面滚动，且其根节点高度为从导航栏底部到tabBar顶部。如果在页面根节点的子元素使用`position: absolute;`，页面内部scroll-view滚动时不会改变此元素位置。
+
+有页面滚动时，如果在页面根节点的子元素使用`position: absolute;`页面滚动会改变此元素的位置。
+
+在app平台vdom模式下，如果有不随页面滚动变化位置的需求，建议使用`position: fixed`。
+
+注意：web端需要使用[css安全区变量](./css/common/function.md)使元素不覆盖在navigationBar和tabBar上。
+
+## 页面对象实例
+
+运行时每个打开的页面，都有一个[UniPage](./api/unipage.md)实例。
+
+通过全局API [getCurrentPages()](./api/get-current-pages.md) 可以获取到当前应用的页面栈，即所有打开的页面**数组**。
+
+页面栈数组中的每个页面都是一个UniPage实例对象。
+
+也可以通过`this.$page`或`getCurrentInstance()`等vue方式直接获取当前页面。[详见](./api/get-current-pages.md#currentpage)
+
+[UniPage](./api/unipage.md)对象上有很多方法，比如可以获取和设置页面样式（pages.json里配置的页面Style），比如可以获取页面的子弹窗页面（dialogPages）和页面上的元素（UniElement）。[详见](./api/get-current-pages.md)
+
+## 页面生命周期 @lifecycle
+
+在 Vue 中，页面也是一种组件，所以也同时支持[组件生命周期](./vue/options-api.md#page-component-options)。
+
+### 页面 onLoad 生命周期@onload
+
+页面初始化时，会触发onLoad生命周期。此时Dom还未构建渲染完毕，ref和getElementById使用同步方式的话拿不到Dom（需要等onReady或使用异步获取）。
+
+所以onLoad页面常见的用途是：
+1. 开始联网取数，由于联网是异步的，在onLoad发起联网，等到获取到服务器数据后，也就可以更新到data或响应式变量上了
+2. 页面的URL支持参数传递，这个参数也是在onLoad生命周期中获取。
+
+手机都是多核的，uni.request或云开发联网，在子线程运行，不会干扰UI线程的入场动画，并行处理可以更快的拿到数据、渲染界面。
+
+通过uni.navigateTo API 或 `<navigator>`组件，可跳转到目标页面，比如从list页面跳转到detail页面，如下：
+
+```uts
+// 发起跳转，并传入post_id参数
+uni.navigateTo({
+  url: '/pages/template/list-news/detail/detail?post_id=' + post_id
+})
+```
+
+```uts
+// 在detail页面的onLoad中接收URL中传递的参数
+const post_id = ref("")
+
+onLoad((event : OnLoadOptions) => { // 类型非必填，可自动推导
+  post_id.value = event["post_id"] ?? ""
+  // 可根据详情页id继续联网请求数据...
+})
+```
+
+::: warning 注意
+- OnLoadOptions类型，可不填。不填时可自动推导。
+- App-iOS平台的窗体动画是异步的，onLoad时可能窗体动画已经开始，此时再设置页面的pageStyle（比如设置背景色），会出现闪烁现象。
+- onLoad里不适合进行大量同步耗时运算，因为此时转场动画还没开始。尤其app-Android平台，onLoad里的代码（除了联网和加载图片）默认是在UI线程运行的，大量同步耗时计算很容易卡住页面动画不启动。除非开发者显式指定在其他线程运行。
+- `uni-app x android` 平台，如需获取 [activity 实例](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-android.html#activity)，此时当前页面的 `activity 实例`并未创建完成，会获取到上一个页面的 `activity 实例`（首页会获取应用默认的 `activity 实例`）。如需获取当前页面的 `activity 实例`，应在 `onShow` 或 `onReady` 生命周期中获取。
+
+### 页面 onShow 生命周期@onshow
+onShow是在onLoad之后，它的意义在于，onLoad是页面创建时触发一次；而当页面隐藏（比如被新窗体遮挡），然后页面再恢复显示时，onLoad不会再触发，只会触发onShow。
+
+tabbar页面切换时，老的tabbar页面会hide，新的tabbar页面会show。
+
+onShow和onHide是成对出现的。
+
+在组合式API中，组件可以监听应用和页面的生命周期。但由于应用和页面都有onShow和onHide，导致重名。所以在组合式的组件中监听页面的显示隐藏，改为了onPageShow和onPageHide。
+
+在微信小程序下，关闭弹出的原生窗体也会触发页面的onShow。比如关闭chooseImage、chooseVideo、chooseMedia、previewImage、chooseLocation、openLocation、scanCode等弹出的窗体。
+
+### 页面 onHide 生命周期@onhide
+
+页面被隐藏/遮挡时会触发页面隐藏生命周期。
+
+比如跳转到下一个页面，会触发之前页面的隐藏。
+
+在微信小程序下，打开全屏原生窗体也会触发页面的onHide。比如chooseImage、chooseVideo、chooseMedia、previewImage、chooseLocation、openLocation、scanCode。可以简单理解为弹出的这些原生窗体盖住了js写的小程序。
+
+### 页面 onResize 生命周期 @onresize
+
+### 页面 onReachBottom 生命周期 @onreachbottom
+
+比如 [onReachBottomDistance](./collocation/pagesjson#pages-globalstyle) 设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
+
+### 页面 onPageScroll 生命周期 @onpagescroll
+
+::: warning 注意
+- iOS 平台蒸汽模式开启下拉刷新会触发页面 `onPageScroll` 生命周期，此时 `scrollTop` 为负值。
+
+### 页面 onBackPress 生命周期 @onbackpress
+
+::: warning 注意
+- `onBackPress`上不可使用`async`，会导致无法阻止默认返回
+- iOS 端侧滑返回不会触发 `onBackPress`
+
+#### 示例
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/onBackPress/on-back-press-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/onBackPress/on-back-press-composition
+
+> 组合式 API
+
+```vue
+<template>
+  <view class="page container">
+    <text>测试 onBackPress 生命周期返回 true</text>
+    <button class="mt-10" @click="goChildPage">
+      跳转子页，测试返回值为 false
+    </button>
+  </view>
+</template>
+
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  <view class="page container">
+    <text>测试 onBackPress 生命周期返回 true</text>
+    <button class='mt-10' @click="goChildPage">跳转子页，测试返回值为 false</button>
+  </view>
+</template>
+
+
+```
+
+### 页面 onTabItemTap 生命周期 @ontabitemtap
+
+::: warning 注意
+- onTabItemTap常用于点击当前 tabItem，滚动或刷新当前页面。如果是点击不同的 tabItem，一定会触发页面切换。
+
+### 页面 onNavigationBarButtonTap 生命周期 @onnavigationbarbuttontap
+
+### 页面 onNavigationBarSearchInputChanged 生命周期 @onnavigationbarsearchinputchanged
+
+### 页面 onNavigationBarSearchInputConfirmed 生命周期 @onnavigationbarsearchinputconfirmed
+
+### 页面生命周期示例 @lifecycle-example
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/page-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-composition
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1" :bounces="false">
+    
+    <view class="page container">
+      <text>page lifecycle 组合式 API</text>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onLoad 触发：</text>
+        <text>{{ isOnloadTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPageShow 触发：</text>
+        <text>{{ isOnPageShowTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onReady 触发：</text>
+        <text>{{ isOnReadyTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPullDownRefresh 触发：</text>
+        <text>{{ isOnPullDownRefreshTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPageScroll 触发：</text>
+        <text>{{ isOnPageScrollTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onReachBottom 触发：</text>
+        <text>{{ isOnReachBottomTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onBackPress 触发：</text>
+        <text>{{ isOnBackPressTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPageHide 触发：</text>
+        <text>{{ isOnPageHideTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onResize 触发：</text>
+        <text>{{ isOnResizeTriggered }}</text>
+      </view>
+      <view class="mt-10">
+        <MonitorAppLifecycleComposition class="monitor-app-lifecycle" />
+      </view>
+      <view class="mt-10">
+        <MonitorPageLifecycleComposition />
+      </view>
+      <button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
+      <button class="mt-10" @click="pullDownRefresh">
+        trigger pullDownRefresh
+      </button>
+      
+      <button class="mt-10" @click="openLifecycleDialogPage">
+        openDialogPage
+      </button>
+      <button class="mt-10" @click="closeLifecycleDialogPage">
+        closeDialogPage
+      </button>
+      
+      <button class="mt-10" @click="goOnBackPress">
+        跳转 onBackPress 示例
+      </button>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+
+<style>
+.container {
+  height: 2200px;
+}
+</style>
+
+```
+
+## 页面及组件生命周期流程图 @lifecycleflow
+
+下图展示了一个新页面，从创建开始，包括其中的组件，完整的时序。
+
+![](https://web-ext-storage.dcloud.net.cn/doc/tutorial/uni-app-lifecycle-vue3.jpg)#{.zooming width=600 margin=auto}
+
+1. uni-app x框架，首先根据pages.json的配置，创建页面
+
+所以pages.json中页面的style中各个设置是最早生效的，原生导航栏、页面背景色都会立即生效。
+
+2. 根据页面template里的组件，创建dom。
+
+这里的dom创建仅包含第一批处理的静态dom。对于通过uts更新data或响应式变量，然后通过v-for再创建的列表数据，不在第一批处理。
+
+要注意一个页面静态dom元素过多，会影响页面加载速度。
+- 在app-Android平台，可能会阻碍页面进入的转场动画。因为此时，页面转场动画还没有启动
+- 在app-iOS平台，窗体动画是异步的，不会阻塞
+
+3. 触发onLoad
+
+此时页面还未显示，没有开始进入的转场动画，页面dom还不存在。
+
+所以这里不能直接操作dom（可以修改data或响应式变量，因为vue框架会等待dom准备后再更新界面）。
+
+onLoad中获取当前的activity等原生窗体对象，拿到的是老页面的activity，只能通过页面栈获取activity。
+
+onLoad比较适合的场景是：接受上页的参数，联网取数据，更新data或响应式变量。
+
+4. 页面onShow
+
+onLoad之后，转场动画开始后，页面会触发onShow。
+
+新页面开始进入的转场动画，动画默认耗时300ms。
+
+5. 页面onReady
+
+第2步创建dom是虚拟dom，dom创建后需要经历一段时间，UI层才能完成了页面上真实元素的创建，即触发了onReady。
+
+onReady后，页面元素就可以自由操作了，比如ref获取节点。同时首批界面也渲染了。
+
+注意：onReady和转场动画开始、结束之间，没有必然的先后顺序，完全取决于dom的数量和复杂度。
+
+如果元素排版和渲染够快，转场动画刚开始就渲染好了；
+
+大多情况下，转场动画走几格就看到了首批渲染内容；
+
+如果元素排版和渲染过慢，转场动画结束都没有内容，就会造成白屏。
+
+联网进程从onLoad起就在异步获取数据更新data或响应式变量，如果服务器速度够快，第二批数据也可能在转场动画结束前渲染。
+
+6. 转场动画结束
+
+再次强调，5和6的先后顺序不一定，取决于首批dom渲染的速度。
+
+## 通过props接收页面参数 @page-with-props
+
+HBuilderX 4.71+ 全平台支持通过 props 接收页面参数
+
+::: preview
+
+> 组合式
+
+```vue
+
+```
+
+> 选项式
+
+```vue
+
+```
+
+## 页面作为组件 @page-as-component
+
+HBuilderX 4.71+ 全平台支持页面作为组件来渲染，通常用于宽屏适配等场景，比如一个新闻网站，在新闻列表页面，宽屏模式下，左侧显示列表，右侧用组件来显示详情页面。
+
+- 需要手动引入页面做为组件使用
+```vue
+<template>
+    <TestPage></TestPage>
+</template>
+
+```
+- 页面作为组件渲染时，所有页面特有的生命周期不再生效，仅支持组件的生命周期(注意：页面组合式生命周期API还可以使用，但监听到的是作为组件时所在页面的，而非它自身的)
+- 支持定义props，作为页面渲染时，props会接收url中的参数，作为组件使用时，可以正常传递props（注意：如果某个页面要作为组件渲染，且需要接收参数，请使用props传递，而不是使用onLoad生命周期）
+- 如果想判断当前是作为页面渲染，还是组件渲染，可以通过 this.$page.vm === this 来判断，如果相等，说明是作为页面渲染的，不相等，说明是作为组件渲染的
+- 宽屏示例详见：[https://ext.dcloud.net.cn/plugin?id=23613](https://ext.dcloud.net.cn/plugin?id=23613)

package/data/uniappx/performance.md

@@ -0,0 +1,175 @@
+# uni-app x 的App性能优化
+
+uni-app x ，尤其是蒸汽模式，拥有快过原生的渲染引擎。[评测另见](./app-vapor.md#性能说明)
+
+但使用不当，也会卡顿。
+
+## 控制好dom的数量和嵌套层数
+
+dom数量越多，渲染越慢。
+
+以日历为例，web开发一般是每天一个view，里面再嵌套农历、假日等，一个日历可能有几百个dom元素。如果Android上这么做，会非常卡。
+
+那么原生Android开发怎么做的呢？使用Android的开发者模式审查元素边界，可以发现rom自带的日历，并不是每个格子一个view，而是整个月都是一个view。
+
+Android上为了避免view数量过多，提供了原始的draw api，把线条和文字绘制上去。
+
+在 uni-app x 中，
+
+- 在 vdom 模式下，也提供了Drawable方法，允许开发者调用绘制API。
+
+hello uni-app x 示例中，有一个日历的模板页面，vdom模式下就是通过draw api来绘制的，性能很高。[源码详见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master/pages/template/calendar/calendar.uvue)
+
+- 在蒸汽模式下，支持了view、text、image的拍平。
+
+Draw API使用复杂，且无法跨端到web和小程序。
+
+uni-app x 蒸汽模式提供了拍平（flatten），允许开发者编写跨平台的view、text、image代码，只需给这些组件加上flatten属性。
+
+被拍平的view、text、image，将被绘制在父上，在审查元素边界时看不到边界。其性能远超原生的view、text、image。实现了跨平台和性能兼得。
+
+hello uni-app x 示例中，有一个蒸汽模式下的日历的模板页面，渲染非常快。[源码详见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master/pages/template/calendar-vapor/calendar-vapor.uvue)
+
+尤其是组件作者，更需要关注dom数量的问题。
+
+uni-app x 的 vdom 模式在Android上还提供了工具帮助开发者监控页面的dom数量。
+
+HBuilderX真机运行到Android时，每个页面进入时会都打印页面初始化的数据：dom数量、排版次数、渲染耗时等。
+
+当然耗时数据不能以真机运行为准，调试基座因为热更新和sourcemap追踪等很多调试功能，导致性能比真实打包差很多。正式打包后性能更优。
+
+## Android蒸汽模式选择so库不压缩
+
+Android蒸汽模式的manifest的Android配置中有一个选项“压缩so库”。默认是压缩的。
+
+压缩so库，apk包体积变小，但性能下降。
+
+这是一个体积和性能的平衡策略，在意体积就压缩，在意性能就要去manifest里配成不压缩。
+
+## 界面元素动画
+
+动画，有2种，预定义不可编程动画、可编程动画。
+
+预定义不可编程动画，包括css transition动画、以及 [animation-view组件](https://ext.dcloud.net.cn/plugin?id=10674)，这个组件本质是lottie动画。
+
+可编程动画，包括 [UniElement.animate](./api/dom/unielement.md)帧动画方法，或者监听手势、滚动、帧回调[requestAnimationFrame](./api/animation-frame.md)，在回调中操作元素的transform。
+
+uni-app x 中，没有通信阻塞，可以直接监听touch和滚动事件。不再需要renderjs、bindingx、wxs、worklet动画这些为了解决通信阻塞的补丁技术。
+
+在touch和滚动事件中，移动dom元素时，有2个注意：
+1. 请使用transform方式，而不是给dom的left/top/width/height等position参数重新赋值。这个在web开发也一样，直接改position参数不如使用transform。因为每次修改position参数都要过排版，而transform不用。
+2. 请拿到dom的id/ref，调用js api操作，而不是通过模板style绑定data操作。因为操作data需要vue框架做diff对比，直接API操作则可以跳过vue框架。在touch和滚动中，16毫秒一帧才能达到最平滑的效果，多了几毫秒就可能掉帧。
+
+在大多数开发框架中，因为通信性能问题，吸顶这个行为需要底层特殊封装。而 uni-app x 无需特别封装，直接监听滚动事件，通过dom的api以transform方式修改top值，就能自己编写逻辑控制在指定条件下实现固顶。
+
+源码参考hello uni-app x中的吸顶示例，这充分体现了 uni-app x 引擎底层的通信性能足够优秀。[详见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master/pages/template/scroll-view-sticky-section/scroll-view-sticky-section.uvue)
+
+当然uni-app x已经封装了吸顶组件，使用更加便利。[详见](./component/sticky-header.md)
+
+还有一个注意事项，当通过动画修改一个元素的高度或top值时，注意元素下部其他元素的联动反应。
+
+比如上元素通过transform变高，虽然上元素的变化是平滑的，但下面的元素数量如果很多，且因为自动排版的原因，在不停的根据上元素变化而移动每个下面元素的top，这也会导致ui卡顿。
+
+这个例子在折叠面板里存在，展开上面的折叠面板A时，推荐的做法是A的高度不做动画，直接变高，然后A的子元素以动画方式出现。看起来也有动效，且A下面的B、C、D等折叠面板元素只发生一次位移排版。
+
+## 避免复杂逻辑卡UI
+
+与小程序和uni-app不同，uni-app x下开发者的代码默认是在ui主线程运行的。除非单独写代码调用子进程或协程。
+
+如果在ui繁忙时，比如页面进入动画时，开发者的代码做了很多耗时操作，会卡动画。原生开发也如此。
+
+页面的onload触发，和进入动画是同时发生的，所以需注意onload生命周期中代码的编写。
+
+由于uni-app x提供的联网和图片加载是在单独进程或协程中的，所以这2个行为不会卡ui。最佳实践是在onload里进行联网取数。
+
+如果onload里某些代码卡了进入动画，也可以挪到页面的onready生命周期中，该事件触发的更晚一些。
+
+页面dom元素过多的话，也会影响进入动画，所以尽量节省dom数量。
+
+复杂计算逻辑，可以使用[worker](./api/create-worker.md)
+
+## 长列表
+
+长列表，之所以成为性能关注点，是因为当列表item加载特别多时，持续增高的内存占用会导致越来越卡、应用崩溃。
+
+### 蒸汽模式
+在uni-app x 蒸汽模式时，直接用list-view、waterflow组件即可。加载4000行item、20万元素的死亡长列表，也是瞬间的事情。参考[benchmark](./vapor-benchmark.md)
+
+### VDOM模式
+在uni-app x vdom模式下，需要考虑的问题要多一些。
+
+#### vdom模式的list-view和waterflow
+
+原生开发一般使用recycle-view做复用，只保留有限的原生view，数屏以外的原生view做复用，即把列表中的数据只装载到部分的原生view中，并根据在屏状态，给原生view装载不同的列表数据。
+
+uni-app x中，[list-view组件](./component/list-view.md)和[waterflow组件](./component/waterflow.md)，内部就是复用原生view的。他们分别对应普通长列表和瀑布流长列表。
+
+使用这2个组件，无论多长的列表，系统也会自动回收和复用渲染资源，和原生应用一样的体验，但开发更简单。
+
+但这2个组件只负责复用渲染资源，不处理VNode和Element的复用。如果你希望更多复用，需要看下面的uni-recycle-view组件。
+
+#### uni-recycle-view组件
+
+一般联网加载的分页式列表，常规使用list-view组件或waterflow组件即可。
+
+但如果需要一次性加载非常多的列表项，比如从本地一次性读取数千条记录，都想显示到界面上，那会非常卡。虽然在渲染层有复用，没有创建太多，但vue的VNode和UniElement超级多的话，创建也很慢。
+
+一些开发者只是简单的把数千条数据赋值给vue的响应式变量，然后就会触发大量DOM、原生view创建或更新，这极大的降低了长列表的性能。
+
+uni-recycle-view组件内部通过计算决定哪些数据需要在界面展示。只创建有限的VNode，进而实现DOM和原生View数量的整体控制。
+
+插件下载地址：[uni-recycle-view组件](https://ext.dcloud.net.cn/plugin?id=17385)
+
+同时它也有一些限制和注意事项：
+1. uni-recycle-view 组件适用于仅使用一个for循环创建所有列表项的场景。
+2. 由于该组件使用了scroll-view而不是list-view，滚动过程中自行计算哪些数据需要渲染和复用，并直接用原生recycle-View的效率要低，因此滚动流畅度低于list-view组件。
+3. 该组件无法支持瀑布流
+4. 该组件2.0版本起限制所有item高度一致
+
+如果由于上述限制无法使用此组件，也可以尝试使用下文的分批加载方案。
+
+#### 分批加载
+
+分批加载没有封装具体的组件，hello uni-app-x内提供了一个示例[详见](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/template/batch-load-long-list/batch-load-long-list.uvue)
+
+分批加载适用于初始要加载一大批数据的场景，针对这一大批数据延迟将数据分批渲染，进而优化页面初始化速度，防止页面跳转卡顿。
+
+分批加载时需注意，用户在操作已经渲染的部分数据时，如果后台在持续加载数据，会导致卡住用户操作。
+所以还需要做到闲时加载，避免卡UI。上述示例在用户滚动、下拉刷新期间会暂停分批加载。
+
+分批加载相比uni-recycle-view 组件，内存占用多一些。由于滚动期间不涉及额外计算，分批加载在低端机上滚动流畅度高一些。
+
+#### 长列表性能的关键点
+
+无论如何，**注意列表项目里的组件数量**，它是dom元素的放大器。每个list-item里的dom数量多一点，乘以item数量，就会产生非常多dom，页面性能就很容易被拖垮。
+
+比如很多列表有评星，如果使用一个5个view的评星组件，那每个list-item都会多5个view，列表一长dom数量会惊人。
+
+在hello uni-app x的复杂长列表示例中，评星没有使用任何自定义组件，只是一个text组件里面使用字体图标放了5个字符，极大减少组件数量。[详见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master/pages/template/long-list/long-list-page.uvue)
+
+所以在列表中，尽量不使用层层封装的组件，直接使用内置组件更高效。
+
+在蒸汽模式中，由于去掉了组件的vnode，即vue的虚拟dom，所以使用组件的压力小多了。但和高度优化的引擎内置view、text、image相比，开发者自己封装的组件肯定性能有折损。
+
+## 优化排版效率
+
+HBuilderX真机运行到Android vdom时，每个页面进入时会都打印页面初始化的数据：dom数量、排版次数、渲染耗时等。
+
+但这个数值是调试模式的数值，发布打包后比这个数字更快。所以这个数字是用于开发期间的参考，而不能用于release包的性能评估。
+
+dom数量优化前文已经讲了，那么如何优化排版效率？
+
+1. 首先还是dom元素数量和层级，直接影响排版
+2. 给dom元素指定明确的宽高，而不是很多自适应计算，可以提高排版效率。比如父节点未指定宽高，需要等所有子节点计算好宽高后把父节点撑开，这样就会比较低效。
+3. 指定主轴方向的尺寸可以减少递归的深度
+4. 文字测量属于耗时操作，给text组件指定宽高可以提升排版效率
+5. 指定图片的尺寸信息可以减少排版次数
+6. css单位尺寸性能比较，px > rpx > 百分比，使用百分比时父节点有明确宽高或者不依赖子节点确定宽高可以提升排版效率
+
+## 控制vue的更新范围
+vue的data更新时，会自动触发页面渲染更新。
+
+更新是差量的，但计算差量也是耗费时间的。所以应减少对大data的修改。如果大data里有可能动态更新的小data，不如单独再存放一个小data数据。
+
+另外更新ui时，如果vue框架能找到最小化组件，则会只更新该组件的渲染。所以尽量避免更新data引发大量ui重绘。\
+比如长列表里有可点击的收藏按钮，点击后会动态更新收藏状态的数据，此时建议把收藏做一个单独的组件，这样某个item的收藏状态的更新，就不会触发整个列表的重绘。

package/data/uniappx/plugin/NOTE.md

@@ -0,0 +1,5 @@
+layout: SimpleLayout
+
+该文档从公共文档自动同步生成，详细信息查看：[docs-sync.config.ts](../../docs-sync.config.ts)
+
+如需修改此文档，请前往 [docs-common 仓库](https://gitcode.com/dcloud/docs-common) 对应文件进行编辑