tmui-cli 2.0.2 → 2.0.4

package/data/uni-app-x-docs/native/use/iosuts.md

@@ -0,0 +1,89 @@
+# 制作UTS插件
+> 1. 付费uts插件(普通授权版)不支持原生工程接入。
+> 2. 如果导出的资源文件不包含 `uni_modules` ，或 `uni_modules` 中的插件均不包含 `app-ios` 目录可以跳过此章节
+
+## 新建原生插件工程
+根据资源文件下的`uni_modules`下的插件列表，新建原生插件工程
+1. 启动`Xcode`，点击`File->New->Project`，选择`Framework`点击`Next`；
+2. `Product Name`填写规则为：`unimodule`+`插件名称`，其中`-`分割改为驼峰，比如`uni-getbatteryinfo`插件对应的原生工程名应为`unimoduleUniGetbatteryinfo`
+3. `Language`选择为`Objective-C`，点击`Next`即可完成创建
+
+## 插件工程环境配置
+1.  `Target -> General -> Minimum Deployments` 选择 `15.0`
+2.  `Target -> Build Settings -> Mach-O Type` 设置为`Dynamic Library`
+3.  `Target -> Build Settings -> Other Linker Flags` 中添加`-ObjC`, 字母o和c大写
+ 4. `Target -> Build Settings -> Build Libraries for Distribution` 设置为`YES`
+ 5. `Target -> Build Settings -> Enable Module Verifier` 设置为`NO`
+ 6. `Target -> Build Settings -> Framework Search Paths` 中添加SDK的Libs目录（操作方法：双击展开`Framework Search Paths`将`SDK/Libs`文件夹拖入即可）
+7. `插件工程`中新建`uts-config.json`文件，然后将SDK中`SDK/ExtApiSrc/UTSOC.h`以及`SDK/ExtApiSrc/UTSOC.mm`添加到`插件工程`中
+- 注意： `uts-config.json`、`UTSOC.h`、`UTSOC.m` 文件，既存在`SDK/ExtApiSrc/`目录中， 也可以在
+`SDK/UTSPluginExample/unimoduleUtsWorker/unimoduleUtsWorker/` 中获取， `SDK/UTSPluginExample/`  目录中是已经构建好的uts原生插件工程， 该文件在不同版本的sdk中是通用的
+
+## 配置资源文件
+1. 将以下源文件(`SDK/ExtApiSrc 目录下`)、依赖库(`SDK/Libs 目录下`)添加到`插件工程`中，并将依赖库均设置为`Do Not Embed`
+    | uniapp-x源码文件&资源文件 | uniapp-x项目依赖库| uniapp源码文件&资源文件  | uniapp项目依赖库 |
+    |---|---|---|---|
+    | UTSOC.h <br> UTSOC.mm <br> uts-config.json | DCloudUniappRuntime.xcframework <br> DCloudUTSExtAPI.xcframework <br> DCloudUTSFoundation.xcframework | DCloudUTSConfig.h <br> DCloudUTSConfig.m <br> UTSCPP.h <br> UTSCPP.mm <br> config.json | DCUniBase.framework <br> DCloudUTSFoundation.framework  |
+
+> DCloudUTSExtAPI.xcframework的制作详见[集成内置模块](../modules/ios/modules.md)
+
+
+2. 将导出的资源文件中`uni_modules`目录下的插件资源，按以下列表中的配置方式分别在`主工程`和`插件工程`添加依赖资源
+    | 目录名/文件名 | 	用途 | 配置 |
+    |---|---|---|
+    | Frameworks | 插件依赖的三方库(framework/xcframework) | 将目录下的依赖库添加到`插件工程`中 |
+    | Libs | 插件依赖的三方库(.a) | 将目录下的依赖库添加到`插件工程`中 |
+    | src | 插件源代码 | 将目录下的源代码添加到`插件工程`中 |
+    | Resources | 插件需要引用的资源文件存放目录 | 将目录下的资源文件添加到`主工程`中 |
+    | Info.plist | 需要添加到原生主工程`Info.plist`中的配置文件 | 将该文件配置添加到`主工程`的`Info.plist`中，注意去重 |
+    | UTS.entitlements | 需要添加到原生主工程 `entitlements` 文件中的配置文件 | 根据该文件内容，在主工程中添加对应的`Capability` |
+    | config.json | 插件依赖的`系统库`、`cocoapods三方库`以及一些需要添加到`主工程Info.plist`文件内的配置信息 | 详见下表 |
+
+### config.json配置
+
+| 参数 | 	用途 | 配置 |
+|---|---|---|
+| frameworks | 插件依赖的系统库 | 在`主工程`中搜索并添加该列表中的系统依赖库 |
+| deploymentTarget | 插件最低支持的iOS版本 | 在`插件工程`中`Target -> General -> Minimum Deployments`设置（若大于主工程设置的最低iOS版本需要同步修改主工程的最低支持） |
+| dependencies-pods | 依赖的pod库 | 将其添加到`插件工程`的`Podfile`文件中并执行`pod install` |
+| plists | 需要添加到原生主工程`Info.plist`中的配置文件 | 将字段配置添加到`主工程`的`Info.plist`中 |
+| hooksClass | 用于uts插件应用程序生命周期函数监听 | 在`插件工程`中找到上面创建的`uts-config.json`文件，将该配置内容添加到`hooksClasses`节点下 |
+| provider | 组件的注册信息 | 在`插件工程`中找到上面创建的`uts-config.json`文件，将该配置内容添加到`providers`节点下 |
+| components | 组件的注册信息 | 在`插件工程`中找到上面创建的`uts-config.json`文件，将该配置内容添加到`components`节点下 |
+
+`uts-config.json`配置示例图   
+
+![](https://web-ext-storage.dcloud.net.cn/native/doc/iOS/utsconfig.png)
+
+
+### 隐私清单
+如果HBuilderX导出的资源文件中包含`PrivacyInfo.xcprivacy`文件，需要将文件内容添加到`插件工程`的同名文件中，注意去重
+
+## 编译导出xcframework
+选择构建目标(Any iOS Device/Any iOS Simulator Device)，在菜单栏中，选择`Product -> Build`（或使用快捷键`Command + B`），分别编译出真机以及模拟器的Framework文件。
+在菜单栏中，选择`Product -> Show Build Floder in Finder` 获取编译产物所在路径。
+使用xcodebuild命令行创建xcframework
+```
+xcodebuild -create-xcframework -framework 真机路径/unimoduleUniGetbatteryinfo.framework -framework 模拟器路径/unimoduleUniGetbatteryinfo.framework -output 导出路径/unimoduleUniGetbatteryinfo.xcframework
+```
+导出成功后，将 `unimoduleUniGetbatteryinfo.xcframework` 添加到主工程，并设置为 `Embed && Sign` 
+
+> 编译模拟器注意事项
+> `Apple芯片`的设备编译模拟器需要在菜单栏中点击 `Product -> Destination -> Show All Run Destinations` ，然后选择 `Rosetta模拟器` 编译
+  
+## 原生项目中调试UTS插件
+首先，你需要创建一个`Xcode Workspace`，它允许你同时打开多个项目（包括你的主工程和UTS插件工程）。
+1. 创建Xcode Workspace  
+* 打开Xcode，选择`File > New > Workspace`。
+* 给你的Workspace命名，例如`MyProject.xcworkspace`。
+* 保存Workspace文件。
+2. 将`主工程`和`UTS插件工程`添加到Workspace  
+* 在Workspace中，选择`File > Add Files to <YourWorkspaceName>`。
+* 找到并选择你的`主工程`和`UTS插件工程`，将它们添加到Workspace中。
+3. 配置`主工程`依赖`UTS插件工程`
+* 在Workspace中，打开主工程的项目设置。
+* 选择`General`标签页，滚动到`Frameworks, Libraries, and Embedded Content`部分。
+* 点击`+`按钮，添加你的`UTS插件工程`生成的framework文件。
+* 确保`Embed & Sign`选项被勾选。
+4. 设置断点和调试 
+* 在`UTS插件工程`工程中设置断点，然后在主工程中触发相关功能来调试UTS插件

package/data/uni-app-x-docs/page.md

@@ -0,0 +1,501 @@
+# 页面简介
+
+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>`
+- 脚本区 `<script>`
+- 样式区 `<style>`
+
+```vue
+<template>
+	<view class="content">
+		<button @click="buttonClick">{{title}}</button>
+	</view>
+</template>
+
+<script setup>
+  let title = ref("Hello world") //定义一个响应式变量。类似于选项式的定义data
+	const buttonClick = () => { //方法不再需要写在method下面
+	  console.log("按钮被点了")
+	}
+	onReady(() => {
+		console.log("页面onReady触发") // 页面生命周期，编写页面加载后的逻辑
+	})
+</script>
+
+<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>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+  <!-- #endif -->
+
+ <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</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
+	<!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+  <!-- #endif -->
+
+ <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+```
+
+注意：
+- 只有滚动区的子内容高度大于滚动容器，才能发生滚动。
+
+写如下代码，页面实际上无法滚动，因为这个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
+
+<!-- PAGEINSTANCE.lifeCycle.compatibility -->
+
+在 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
+
+<!-- PAGEINSTANCE.onResize.description -->
+
+<!-- PAGEINSTANCE.onResize.compatibility -->
+
+<!-- PAGEINSTANCE.onResize.param -->
+
+<!-- PAGEINSTANCE.onResize.returnValue -->
+
+### 页面 onReachBottom 生命周期 @onreachbottom
+
+<!-- PAGEINSTANCE.onReachBottom.description -->
+
+比如 [onReachBottomDistance](./collocation/pagesjson#pages-globalstyle) 设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
+
+<!-- PAGEINSTANCE.onReachBottom.compatibility -->
+
+<!-- PAGEINSTANCE.onReachBottom.param -->
+
+<!-- PAGEINSTANCE.onReachBottom.returnValue -->
+
+### 页面 onPageScroll 生命周期 @onpagescroll
+
+<!-- PAGEINSTANCE.onPageScroll.description -->
+
+<!-- PAGEINSTANCE.onPageScroll.compatibility -->
+
+<!-- PAGEINSTANCE.onPageScroll.param -->
+
+<!-- PAGEINSTANCE.onPageScroll.returnValue -->
+
+::: warning 注意
+- iOS 平台蒸汽模式开启下拉刷新会触发页面 `onPageScroll` 生命周期，此时 `scrollTop` 为负值。
+:::
+
+### 页面 onBackPress 生命周期 @onbackpress
+
+<!-- PAGEINSTANCE.onBackPress.description -->
+
+<!-- PAGEINSTANCE.onBackPress.compatibility -->
+
+<!-- PAGEINSTANCE.onBackPress.param -->
+
+<!-- PAGEINSTANCE.onBackPress.returnValue -->
+
+::: warning 注意
+- `onBackPress`上不可使用`async`，会导致无法阻止默认返回
+- iOS 端侧滑返回不会触发 `onBackPress`
+:::
+
+#### 示例
+
+[详情](<!-- VUEJSON.E_lifecycle.page_onBackPress_on-back-press-composition.gitUrl -->)
+
+::: preview <!-- VUEJSON.E_lifecycle.page_onBackPress_on-back-press-composition.webUrl -->
+
+> 组合式 API
+
+<!-- VUEJSON.E_lifecycle.page_onBackPress_on-back-press-composition.code -->
+
+> 选项式 API
+
+<!-- VUEJSON.E_lifecycle.page_onBackPress_on-back-press-options.code -->
+
+:::
+
+### 页面 onTabItemTap 生命周期 @ontabitemtap
+
+<!-- PAGEINSTANCE.onTabItemTap.description -->
+
+<!-- PAGEINSTANCE.onTabItemTap.compatibility -->
+
+<!-- PAGEINSTANCE.onTabItemTap.param -->
+
+<!-- PAGEINSTANCE.onTabItemTap.returnValue -->
+
+::: warning 注意
+- onTabItemTap常用于点击当前 tabItem，滚动或刷新当前页面。如果是点击不同的 tabItem，一定会触发页面切换。
+:::
+
+### 页面 onNavigationBarButtonTap 生命周期 @onnavigationbarbuttontap
+
+<!-- PAGEINSTANCE.onNavigationBarButtonTap.description -->
+
+<!-- PAGEINSTANCE.onNavigationBarButtonTap.compatibility -->
+
+<!-- PAGEINSTANCE.onNavigationBarButtonTap.param -->
+
+<!-- PAGEINSTANCE.onNavigationBarButtonTap.returnValue -->
+
+### 页面 onNavigationBarSearchInputChanged 生命周期 @onnavigationbarsearchinputchanged
+
+<!-- PAGEINSTANCE.onNavigationBarSearchInputChanged.description -->
+
+<!-- PAGEINSTANCE.onNavigationBarSearchInputChanged.compatibility -->
+
+<!-- PAGEINSTANCE.onNavigationBarSearchInputChanged.param -->
+
+<!-- PAGEINSTANCE.onNavigationBarSearchInputChanged.returnValue -->
+
+### 页面 onNavigationBarSearchInputConfirmed 生命周期 @onnavigationbarsearchinputconfirmed
+
+<!-- PAGEINSTANCE.onNavigationBarSearchInputConfirmed.description -->
+
+<!-- PAGEINSTANCE.onNavigationBarSearchInputConfirmed.compatibility -->
+
+<!-- PAGEINSTANCE.onNavigationBarSearchInputConfirmed.param -->
+
+<!-- PAGEINSTANCE.onNavigationBarSearchInputConfirmed.returnValue -->
+
+### 页面生命周期示例 @lifecycle-example
+
+[详情](<!-- VUEJSON.E_lifecycle.page_page-composition.gitUrl -->)
+
+::: preview <!-- VUEJSON.E_lifecycle.page_page-composition.webUrl -->
+
+<!-- VUEJSON.E_lifecycle.page_page-composition.code -->
+
+:::
+
+## 页面及组件生命周期流程图 @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
+<script setup>
+const props = defineProps(["title"])
+onLoad((options)=>{
+  console.log(options['title'] == props.title) // true
+})
+</script>
+```
+
+> 选项式
+
+```vue
+<script>
+export default {
+  props:["title"],
+  onLoad(options){
+     console.log(options['title'] == this.title) // true
+  }
+}
+</script>
+```
+
+:::
+
+
+## 页面作为组件 @page-as-component
+
+HBuilderX 4.71+ 全平台支持页面作为组件来渲染，通常用于宽屏适配等场景，比如一个新闻网站，在新闻列表页面，宽屏模式下，左侧显示列表，右侧用组件来显示详情页面。
+
+- 需要手动引入页面做为组件使用
+```vue
+<template>
+    <TestPage></TestPage>
+</template>
+
+<script setup>
+    import TestPage from '@/pages/test/test.uvue'
+</script>
+```
+- 页面作为组件渲染时，所有页面特有的生命周期不再生效，仅支持组件的生命周期(注意：页面组合式生命周期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)