### Hello Uni-app X Example Project

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/sample.md

This project demonstrates the usage of Uni-app's built-in components and APIs, along with examples of common but complex template implementations. It's a comprehensive guide for Uni-app X development.

```uni-app
This entry represents the 'hello uni-app x' project which provides examples of Uni-app built-in components and APIs, and complex template examples. Specific code snippets are not embedded in the source text but are available via the linked Git repository.
```

--------------------------------

### Launch Uni-app X Activity

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/native/use/androidcomm.md

Starts the Uni-app X activity from a native Android application. This is the primary method to transition from a native context to the Uni-app X environment.

```kotlin
startActivity(Intent(this, UniAppActivity::class.java))
```

--------------------------------

### Hello UTS Example Project

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/sample.md

This project serves as an example for demonstrating the usage of UTS syntax and built-in objects. It is a foundational resource for developers learning UTS.

```uts
This entry represents the 'hello uts' project which provides examples of UTS syntax and built-in objects. Specific code snippets are not embedded in the source text but are available via the linked Git repository.
```

--------------------------------

### UTS API for Native Page Development

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-component.md

Provides an example of developing native pages using UTS APIs, linking to a repository for a practical demonstration.

```APIDOC
UTS Native Page Development Example:

UTS can be used to develop native pages, allowing for full-screen native UI experiences. When developing native pages via API, it's important to consider the relationship with the UniPage's page stack.

Example Repository:
[uts-nativepage](https://gitcode.net/dcloud/hello-uts/-/tree/master/uni_modules/uts-nativepage)

This example demonstrates how to use UTS APIs to create and manage native pages or views that are not embedded within the standard UniPage flow.
```

--------------------------------

### uni.createSelectorQuery exec() Examples

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/api/create-selector-query.md

Provides multiple examples of using the `exec()` method with `uni.createSelectorQuery`. These examples illustrate how to handle results from single element queries, multiple element queries (`selectAll`), and mixed queries, showing how the callback receives results corresponding to the order of executed actions.

```javascript
uni.createSelectorQuery().select('.rect1').boundingClientRect((res) => {
  // 共返回 1 条结果，第一项数据类型为 NodeInfo
  // res = [ {} ]

  const nodeInfoArray = res as NodeInfo[]
  const nodeInfoArrayItem = nodeInfoArray[0]
  console.log('info', nodeInfoArrayItem.width, nodeInfoArrayItem.height)
}).exec()
```

```javascript
uni.createSelectorQuery().selectAll('.rect1').boundingClientRect((res) => {
  // 共返回 1 条结果，第一项数据类型为 NodeInfo[]
  // res = [ [{},{}] ]

  const nodeInfoArray = res as NodeInfo[]
  const nodeInfoArrayItem = nodeInfoArray[0]
  nodeInfoArrayItem.foreach((item: NodeInfo) => {
    console.log('item', item.width, item.height)
  })
}).exec()
```

```javascript
uni.createSelectorQuery().select('.rect1').selectAll('.rect2').boundingClientRect((res) => {
  // 共返回 2 条结果，第一项数据类型为 NodeInfo，第二项数据类型类型为 NodeInfo[]
  // res = [ {}, [{},{}] ]

  const nodeInfoArray = res as NodeInfo[]

  const nodeInfoItem0 = nodeInfoArray[0]
  console.log('nodeInfoItem0', nodeInfoItem0.width, nodeInfoItem0.height)

  const nodeInfoItem1 = nodeInfoArray[1]
  nodeInfoItem1.foreach((item: NodeInfo) => {
    console.log('item', item.width, item.height)
  })
}).exec()
```

--------------------------------

### Hello UVue Example Project

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/sample.md

This project showcases examples of Vue.js syntax within the Uni-app X framework. It's designed to help developers understand how to leverage Vue.js for Uni-app X development.

```uvue
This entry represents the 'hello uvue' project which provides examples of Vue.js syntax. Specific code snippets are not embedded in the source text but are available via the linked Git repository.
```

--------------------------------

### iOS Info.plist Configuration Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-plugin.md

Provides an example of how to configure the Info.plist file for iOS plugins, including adding custom keys like TencentLBSAPIKey and enabling background location services.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
	<key>TencentLBSAPIKey</key>
	<string>填写您申请的APIKey</string>
	<key>UIBackgroundModes</key>
	<array>
		<string>location</string>
	</array>
  </dict>
</plist>
```

--------------------------------

### Info.plist Configuration for iOS Plugins

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-for-ios.md

An example of an `Info.plist` file used within a UTS plugin's `app-ios` directory. This configuration specifies native settings like API keys and background modes, which are merged into the final application's `Info.plist` during cloud packaging.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
	<key>TencentLBSAPIKey</key>
	<string>您申请的APIKey</string>
	<key>UIBackgroundModes</key>
	<array>
		<string>location</string>
	</array>
  </dict>
</plist>
```

--------------------------------

### App.uvue Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/collocation/app.md

A basic example demonstrating the structure and usage within App.uvue, highlighting the placement of lifecycle hooks and global configurations.

```vue
<script>
export default {
  // App.uvue only supports options API
  // Cannot write view elements here, no <template>

  globalData: {
    userInfo: null
  },

  methods: {
    // Global methods can be defined here
    getUserProfile() {
      // ... implementation ...
    }
  },

  // Application Lifecycle Hooks
  onLaunch() {
    console.log('App launched!');
    // Fetch user info or initialize global data
    // uni.getSystemInfo({
    //   success: function (e) {
    //     console.log('getSystemInfo sync: ', e);
    //   }
    // })
  },

  onShow() {
    console.log('App showing!');
  },

  onHide() {
    console.log('App hiding!');
  },

  onError(err) {
    console.error('App error:', err);
  }

  // Other lifecycle hooks like onExit, onLastPageBackPress, etc. can be added here
}
</script>

<style>
/* Global styles can be defined here */
</style>
```

--------------------------------

### Swift Protocol Definition Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-for-ios.md

Illustrates a Swift protocol defining a method that requires integer types for parameters and return values, which is a common scenario when interacting with native SDKs.

```swift
// swift
// 此协议定义在其他三方 SDK 中
protocol TestProtocol {
   func addTwoInts(_ a: Int, _ b: Int) -> Int
}
```

--------------------------------

### Pages.json Internationalization Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/i18n.md

Illustrates how to use internationalization placeholders in `pages.json` for navigation bar titles and tab bar text. The `%key%` syntax references keys defined in locale JSON files.

```json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "%index.title%" // locale目录下 语言地区代码.json 文件中定义的 key，使用 %% 占位
      }
    }
  ],
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "%index.home%"
      }
    ]
  }
}
```

--------------------------------

### Uni-app X Theme Adaptation Example (UTS/Vue)

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/api/theme-change.md

Demonstrates a common pattern for adapting uni-app x applications to dark mode using UTS and Vue. It involves fetching the current theme, storing it in a reactive state, and dynamically applying CSS classes based on this state.

```uts
// In app.uts or a setup function:
import { getAppBaseInfo } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'

// Assume a store or reactive state management
const isDarkMode = ref(false);

function checkSystemTheme() {
  const appBaseInfo = getAppBaseInfo();
  // In a real scenario, you'd check OSTheme or hostTheme based on platform
  // For simplicity, let's assume a direct check or a theme setting
  // Example: if appBaseInfo.osTheme === 'dark' or appBaseInfo.hostTheme === 'dark'
  // For this example, we'll simulate based on a hypothetical setting
  // In a real app, you'd likely use uni.onOsThemeChange or uni.onHostThemeChange
  
  // Placeholder for actual theme detection logic
  // For demonstration, let's say we check a global setting or OS preference
  // For example, if appTheme is 'auto' and OSTheme is 'dark'
  // isDarkMode.value = (appBaseInfo.appTheme === 'auto' && appBaseInfo.osTheme === 'dark');
  
  // Simplified example: Assume we are setting it manually or checking a preference
  // In a real app, this logic would be more robust.
  console.log('Checking system theme...');
  // For example, if you have a global state for theme preference:
  // isDarkMode.value = themeStore.currentTheme === 'dark';
}

// Call checkSystemTheme on app launch or when needed
// checkSystemTheme();

// In a Vue component:
// computed(() => {
//   return {
//     'dark-mode': isDarkMode.value
//   };
// })

// In the template:
// <view :class="{'dark-mode': isDarkMode}">
//   Your content here
// </view>

```

```json
// In pages.json (example for theme configuration):
{
  "pages": [
    // ... other pages
  ],
  "globalStyle": {
    "theme": {
      "light": {
        "backgroundColor": "#ffffff",
        "textColor": "#000000"
      },
      "dark": {
        "backgroundColor": "#1a1a1a",
        "textColor": "#ffffff"
      }
    }
  }
}

```

```json
// In manifest.json (for enabling dark mode support):
{
  ""web": {
    "darkmode": true
  },
  "mp-weixin": {
    "darkmode": true
  }
}

```

--------------------------------

### JavaScript JSON Object Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/tutorial/codegap.md

A basic JavaScript example showing how to declare and access properties of a JSON-like object.

```js
var p ={"name": "zhangsan","age": 12}
p.age //12
```

--------------------------------

### defineOptions() Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/vue/composition-api.md

Provides an example of using `defineOptions()` within `<script setup>` to define component options like data, computed properties, watchers, and methods in Uni-app X.

```typescript
defineOptions({
  data() {
    return {
      count: 0,
      price: 10,
      total: 0
    }
  },
  computed: {
    doubleCount() : number {
      return this.count * 2
    },
  },
  watch: {
    count() {
      this.total = this.price * this.count
    },
  },
  methods: {
    increment() {
      this.count++
    }
  }
})
```

--------------------------------

### <script setup> defineProps() Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/vue/composition-api.md

Illustrates how to use `defineProps()` within `<script setup>` for declaring component props in Uni-app X. It supports array literals, object literals, and pure type parameters.

```typescript
// Placeholder for defineProps() example code
// Actual code would be provided in the original source.
```

--------------------------------

### Navigate to SDK Page in Swift

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/native/use/iosapi.md

Manages the creation and navigation to the Uni-App X root view controller. It includes a check to ensure the app manager is ready before creating a new app instance, preventing issues if `uni.exit()` was recently called.

```swift
if UniSDKEngine.shared.getAppManager()?.getCurrentApp() == nil {
    // uni.exit() 方法会销毁app，所以在这里需要判断currentApp是否为空
    UniSDKEngine.shared.getAppManager()?.create()
}
let viewController = UniAppRootViewController()
self.navigationController?.pushViewController(viewController, animated: true)
```

--------------------------------

### Vue-i18n JSON Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/i18n.md

Provides an example of a locale JSON file used with Vue-i18n, containing key-value pairs for translations. This file is imported and used during the i18n initialization.

```json
{
  "index.title": "Hello i18n"
}
```

--------------------------------

### Initialize SDK in Swift

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/native/use/iosapi.md

Initializes the UniSDKEngine, which is the core component for running the Uni-App X runtime. This is typically done once during application startup.

```swift
import DCloudUniappRuntime

UniSDKEngine.shared.create()
```

--------------------------------

### Getting Native Class Objects in UTS

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-for-android.md

Provides examples of how to obtain Java Class objects within UTS. This includes retrieving a class by its fully qualified name and getting the class object for a given instance, such as the current Android Activity.

```uts
// 根据 类名 获取 class
let getClassByName = Class.forName("io.dcloud.uts.UTSJSONObject")
console.log(getClassByName);
// 根据 实例 获取 class
let getClassByInstance = UTSAndroid.getJavaClass(UTSAndroid.getUniActivity()!)
console.log(getClassByInstance);
```

--------------------------------

### UTS 模块化函数与类型导入示例

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/tutorial/codegap.md

展示了如何在 uni-app x 项目中通过 UTS 文件进行模块化开发。`index.uvue` 文件导入了 `utils.uts` 文件中定义的自定义类型 `Person` 和函数 `logPersonInfo`。在 `onReady` 生命周期中，调用了 `logPersonInfo` 函数，并传递了符合 `Person` 类型的数据，演示了跨文件类型引用和函数调用的过程。

```html
> index.uvue

```html
<template>
  <text>index.uvue</text>
</template>

<script lang="uts">
  import type { Person } from './utils.uts'
  import { logPersonInfo } from './utils.uts'
  export default {
    onReady() {
      logPersonInfo({ name: 'name', age: 18 } as Person)
      // 或者
      const person: Person = { name: 'name', age: 18 }
      logPersonInfo(person)
    }
  }
</script>
```
```

```ts
> utils.uts

```ts
export type Person = {
	name: string,
	age: number
}

export function logPersonInfo(person: Person){
	console.log('name: ' + person.name)
	console.log('age: ' + person.age)
}
```
```

--------------------------------

### Complete UVUE DOM Manipulation Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/dom/README.md

A full example showing how to get a UniElement using both uni.getElementById and $refs, and then updating its background color via DOM API on a button tap. It includes template, script, and style sections.

```vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1;">
	<!-- #endif -->
		<view id="myView" ref="myView" class="container">
			<text>Hello World</text>
		</view>
		<button class="button" @tap="updateElement">操作UniElement</button>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				color: 'red',
				myView: null as UniElement | null
			}
		},
		onLoad() {
		},
		onReady() {
			this.myView = uni.getElementById('myView');       //通过uni.getElementById获取
			//this.myView = this.$refs['myView'] as UniElement;  //通过this.$refs获取，需要使用 as 转换
		},
		methods: {
			updateElement() {
				this.color = 'red' == this.color ? 'blue' : 'red';
				this.myView?.style?.setProperty('background-color', this.color);
			}
		},
	}
</script>

<style>
	.container {
		align-self: center;
		align-items: center;
		justify-content: center;
		background-color: lightgray;
		width: 100%;
		height: 200px;
	}
	.button {
		margin: 10px auto;
	}
</style>
```

--------------------------------

### Uni-app-x API: Launch Options

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/release-note-alpha.md

Retrieves information about how the application was launched, including parameters from universal links and app schemes.

```APIDOC
API: uni.getLaunchOptionsSync / uni.getEnterOptionsSync

Description:
  Synchronously retrieves the launch options of the application. This includes parameters passed via universal links or app schemes.

Usage:
  const options = uni.getLaunchOptionsSync();
  console.log(options.query); // URL query parameters
  console.log(options.path);  // Path from the link
  console.log(options.appLink); // Universal link parameters
  console.log(options.appScheme); // App scheme parameters

Parameters:
  None.

Returns:
  An object containing launch options, potentially including 'query', 'path', 'appLink', 'appScheme', etc.
```

--------------------------------

### Component Instance Lifecycle Hooks (Options API)

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/vue/component.md

Demonstrates how to access component instance lifecycle hooks using the Options API in Uni-App, including examples for component setup.

```vue
> 选项式 API
<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.code -->
```

--------------------------------

### uni-app X: New Components and APIs

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/release-note-alpha.md

Highlights the addition of new components like `sticky-header` and `unicloud-db`, and new APIs such as `takeSnapshot` and the `transitionend` event. Also notes CSS property enhancements and optimization features.

```APIDOC
uni-app X Component and API Additions:

New Components:
  - sticky-header: A new component for creating sticky header effects.
  - unicloud-db: A component for interacting with UniCloud databases.

New APIs:
  - Element.takeSnapshot(): API to capture a screenshot of an element.
  - transitionend event: Event triggered upon completion of CSS transitions.

CSS Enhancements:
  - border-*-width properties now support 'thin', 'medium', 'thick' values.

Optimization:
  - Tree shaking for unused built-in modules (e.g., video) to reduce package size.

Details:
  - sticky-header: https://uniapp.dcloud.net.cn/uni-app-x/component/sticky-header.html
  - unicloud-db: https://uniapp.dcloud.net.cn/uni-app-x/component/unicloud-db.html
  - takeSnapshot: https://uniapp.dcloud.net.cn/uni-app-x/dom/element.html#takeSnapshot
  - transitionend: https://uniapp.dcloud.net.cn/uni-app-x/component/common.html#transitionend
  - Tree Shaking: https://uniapp.dcloud.net.cn/uni-app-x/manifest.html#treeShaking
```

--------------------------------

### Component Instance Lifecycle Hooks (Composition API)

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/vue/component.md

Demonstrates how to access component instance lifecycle hooks using the Composition API in Uni-App, including examples for component setup.

```vue
> 组合式 API
<!-- VUEJSON.E_lifecycle.component_ChildComponentComposition.code -->
```

--------------------------------

### Comprehensive theme.json Configuration Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/collocation/themejson.md

An extensive example showing how to define various theme variables for navigation bars, page backgrounds, and tab bars in `theme.json`, and how to reference them in `pages.json` for both global styles and tab bar configurations.

```json
// theme.json
{
	"light": {
		"navBgColor": "#f8f8f8",
		"navTxtStyle": "black",
		"bgColor": "#ffffff",
		"bgTxtStyle": "light",
		"bgColorTop": "#eeeeee",
		"bgColorBottom": "#efefef",
		"tabFontColor": "#000000",
		"tabSelectedColor": "#3cc51f",
		"tabBgColor": "#ffffff",
		"tabBorderStyle": "black",
		"iconPath1": "/static/icon1_light.png",
		"selectedIconPath1": "/static/selected_icon1_light.png",
		"iconPath2": "/static/icon2_light.png",
		"selectedIconPath2": "/static/selected_icon2_light.png"
	},
	"dark": {
		"navBgColor": "#292929",
		"navTxtStyle": "white",
		"bgColor": "#1f1f1f",
		"bgTxtStyle": "dark",
		"bgColorTop": "#292929",
		"bgColorBottom": "#1f1f1f",
		"tabFontColor": "#ffffff",
		"tabSelectedColor": "#51a937",
		"tabBgColor": "#292929",
		"tabBorderStyle": "white",
		"iconPath1": "/static/icon1_dark.png",
		"selectedIconPath1": "/static/selected_icon1_dark.png",
		"iconPath2": "/static/icon2_dark.png",
		"selectedIconPath2": "/static/selected_icon2_dark.png"
	}
}

// pages.json
{
	"globalStyle": {
		"navigationBarBackgroundColor": "@navBgColor",
		"navigationBarTextStyle": "@navTxtStyle",
		"backgroundColor": "@bgColor",
		"backgroundTextStyle": "@bgTxtStyle"
	},
	"tabBar": {
		"color": "@tabFontColor",
		"selectedColor": "@tabSelectedColor",
		"backgroundColor": "@tabBgColor",
		"borderStyle": "@tabBorderStyle",
		"list": [
			{
				"iconPath": "@iconPath1",
				"selectedIconPath": "@selectedIconPath1"
			},
			{
				"iconPath": "@iconPath2",
				"selectedIconPath": "@selectedIconPath2"
			}
		]
	}
}
```

--------------------------------

### Markdown Table Row and Column Merging

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/README.md

Provides examples of creating markdown tables with merged rows (rowspan) and columns (colspan), demonstrating advanced table formatting capabilities.

```markdown
|资源分类		|资源细项				|售价（元）	|
|:-:		|:-:				|:-:		|
|云函数 #{rowspan=3}	|资源使用量（GBs）		|0.000110592|
|调用次数（万次）		|0.0133		|
|出网流量（GB）			|0.8		|
|云数据库 #{rowspan=3}	|容量（GB/天）			|0.07		|
|读操作使用量（万RU）	|0.015		|
|写操作使用量（万RU）	|0.05		|
|云存储 #{rowspan=4}	|容量（GB/天）			|0.0043		|
|下载操作次数（万次）	|0.01		|
|上传操作次数（万次）	|0.01		|
|CDN 流量（GB）			|0.18		|
|前端网站托管 #{rowspan=2}	|容量（GB/天）			|0.0043		|
|流量（GB）|0.18		|
|售价（元/月）#{colspan=2}	|5		|
```

--------------------------------

### UTS Component Development Modes Comparison

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-component.md

Compares the Standard Mode and Uni-app Compatibility Mode for UTS component development, highlighting platform support, component specifications, native view usage, and learning curve.

```APIDOC
Development Mode Comparison:

| Feature           | Uni-app Compatibility Mode                                  | Standard Mode                                                                 |
|-------------------|-------------------------------------------------------------|-------------------------------------------------------------------------------|
| Supported Platforms | uni-app's app-nvue and uni-app x's app-uvue. Harmony not supported. | uni-app x only, but supports app, web, and mini-programs within uni-app x. |
| Component Spec    | Vue imitation, subset with extensions, no Composition API.  | Full Vue component spec, standard Easycom.                                    |
| Native View Usage   | No                                                          | Yes                                                                           |
| Learning Curve    | Low                                                         | None                                                                          |
```

--------------------------------

### UTSAndroid getDispatcher Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/uts/utsandroid.md

Demonstrates how to get the current dispatcher or a specific dispatcher (e.g., 'io', 'main') and execute asynchronous tasks on them. It highlights thread management for UI updates and responsive data.

```uts
// 不传任何参数，得到是当前代码运行线程
let currentDispatcher = UTSAndroid.getDispatcher()
console.log("currentDispatcher",currentDispatcher)
// 期望在 io 任务队列执行
UTSAndroid.getDispatcher("io").async(function(_){
    console.log("当前任务执行在",Thread.currentThread().getName())
    // 期望在 主线程 任务队列执行
    UTSAndroid.getDispatcher("main").async(function(_){
        console.log("当前任务执行在",Thread.currentThread().getName())
        currentDispatcher.async(function(_){
            console.log("起始任务执行在",Thread.currentThread().getName())
        },null)
    },null)
},null)
```

--------------------------------

### Getting Harmony SDK API Version

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/app-harmony/README.md

Demonstrates how to retrieve the Harmony SDK API version using the uni.getDeviceInfo API. This is useful for checking compatibility or adapting behavior based on the Harmony OS version.

```javascript
uni.getDeviceInfo({
  success: function(res) {
    console.log(res.osHarmonySDKAPIVersion);
  }
});
```

--------------------------------

### Harmony Development Considerations

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/app-harmony/README.md

Lists important considerations for Harmony development, including Windows path length limitations, the impact of tree shaking, orientation support, rpx behavior, component-specific issues (rich-text, animateTo), font loading, unit systems (vp/px), uniCloud limitations, and permission errors.

```APIDOC
Harmony Development Considerations:

1.  **Windows Path Length Limit**:
    -   Issue: Long project paths combined with uni_modules and compiler hashes can exceed Windows' 255-character path limit, causing compilation failures.
    -   Recommendation: Keep uni-app x project paths and uni_modules directory names short (e.g., `c:\dev\app1`).

2.  **Tree Shaking**:
    -   Support: Available from Harmony platform version 4.63.
    -   Functionality: Optimizes builds by including only used modules.
    -   Manifest Configuration: Some SDKs still require configuration via the manifest's visual interface.
    -   Reference: See [manifest documentation](../collocation/manifest-harmony.md#modules).

3.  **Orientation and rpx**:
    -   Orientation: Horizontal screen orientation is not currently supported.
    -   rpx Behavior: `rpx` does not automatically adapt to window size changes.

4.  **Component Issues**:
    -   `rich-text`:
        -   Problem: Cannot automatically adjust height based on content, internal scrolling issues, incorrect scrollbar positioning.
        -   Impact: Difficult to control scrolling behavior when loading network content.
        -   Reference: [rich-text tips](../component/rich-text.md#tips), [Huawei issues address](https://issuereporter.developer.huawei.com/detail/250224172323045/comment?ha_source=Dcloud&ha_sourceId=89000448).
    -   `animateTo`:
        -   Problem: Significant issues when setting `transform: rotate`.
        -   Reference: [Huawei issues address](https://issuereporter.developer.huawei.com/detail/250317210619077/comment?ha_source=Dcloud&ha_sourceId=89000448).

5.  **Font Loading**:
    -   `uni.loadFontFace`:
        -   Requirement: After calling `uni.loadFontFace`, settings must be updated for the font to take effect.

6.  **Unit Systems**:
    -   Harmony Units: Distinguishes between logical pixels (`vp`) and physical pixels (`px`).
    -   Web `px` vs. Harmony `px`: Web `px` refers to logical pixels, while Harmony `px` refers to physical pixels.
    -   uni-app x CSS: Uses familiar `px` which are treated as logical pixels and automatically compiled to `vp` (Harmony's logical pixel unit) in CSS styles.
    -   Reference: [Harmony native unit documentation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-pixel-units?ha_source=Dcloud&ha_sourceId=89000448).

7.  **uniCloud Support**:
    -   Limitation: uniCloud is not supported within UTS plugins on the Harmony platform.

8.  **Permission Signature Error**:
    -   Error Message: `运行所需的权限没有签名授权` (Required permissions not signed).
    -   Cause: Demo projects using ACL permissions (e.g., `ohos.permission.READ_PASTEBOARD`) without proper signing.
    -   Solution: Comment out the problematic permission (e.g., `ohos.permission.READ_PASTEBOARD`) in the project configuration. This allows the project to run but disables related API functionality (e.g., clipboard API tests).

9.  **Performance Comparison**:
    -   uni-app (JSVM/V8) vs. uni-app x (ArkTS):
    -   Note: uni-app x does not inherently offer higher performance than uni-app. The ArkTS engine is still evolving, and currently, some intensive computations may perform worse than V8.
```

--------------------------------

### 实体字符处理差异 (小程序端)

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/mp/README.md

描述了 uni-app x 项目在编译到小程序端时，静态使用的实体字符（如 `&gt;`, `&lt;`, `&nbsp;`）在最终输出的小程序页面文件中会保留为实体字符，而非像非 uni-app x 项目那样被转换为实际字符（如空格）。

```APIDOC
实体字符处理:
  - uni-app x 项目编译到小程序端时，静态使用的实体字符 `&gt;`, `&lt;`, `&thinsp;`, `&nbsp;`, `&ensp;`, `&emsp;` 会在小程序页面文件中保留为实体字符。
  - 例如 `&nbsp;` 在微信小程序的 wxml 文件中仍为 `&nbsp;`，不会被转为空格。
  - 非 uni-app x 项目则会将 `&nbsp;` 转为空格。
```

--------------------------------

### UTS.entitlements Configuration for iOS Capabilities

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-for-ios.md

An example of a `UTS.entitlements` file for an iOS UTS plugin. This file defines specific capabilities, such as network access for Wi-Fi information, which are merged into the application's entitlements during the build process.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.developer.networking.wifi-info</key>
	<true/>
</dict>
</plist>
```

--------------------------------

### Tab Bar Configuration Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/collocation/pagesjson.md

Illustrates the structure for configuring the application's tab bar in pages.json, specifying colors, icons, and page paths for navigation items.

```json
{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
      },
      {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
      }
    ]
  }
}
```

--------------------------------

### Locale JSON File Structure

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/i18n.md

Defines the directory structure and example content for locale JSON files used with `pages.json` internationalization. Files are named according to BCP47 language tags (e.g., `en.json`, `zh-Hans.json`).

```json
{
  "app.name": "Hello uni-app",
  "index.title": "首页"
}
```

--------------------------------

### Harmony Debugging and Tooling

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/app-harmony/README.md

Explains the debugging capabilities for uni-app x projects on Harmony, including breakpoint debugging for uvue, uts, and ets. It also highlights the use of DevEco Studio for advanced analysis like memory leak detection, noting ArkTS's garbage collection behavior.

```APIDOC
Harmony Debugging Capabilities:

- Breakpoint Debugging: Supports breakpoints for uvue, uts, and mixed ets code.
- DevEco Studio Integration: uni-app x projects compile into native Harmony projects located in `unpackage/app-harmony`. These can be imported into DevEco Studio.
- Memory Leak Analysis: DevEco Studio provides tools for analyzing memory leaks, which can be common in ArkTS due to its garbage collection mechanism differing from V8.
- Debugging Documentation: Refer to [鸿蒙Debug](https://uniapp.dcloud.net.cn/tutorial/debug/uni-uts-debug-harmony.html) for detailed instructions.

Usage Example (Conceptual - Importing project into DevEco Studio):
1. Locate compiled Harmony project: `your-project/unpackage/app-harmony/`
2. Open DevEco Studio.
3. Select 'Open Project' and navigate to the `app-harmony` directory.
4. Use DevEco's profiling and debugging tools to analyze runtime behavior and identify memory issues.
```

--------------------------------

### UTS Example for Map Extension (Android)

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/component/map.md

Demonstrates how to extend map functionality on Android using UTS. It shows how to get the native MapView from a UniElement and use it with Tencent Map SDK APIs, specifically for zooming.

```typescript
import { CameraUpdateFactory } from "com.tencent.tencentmap.mapsdk.maps"
import { MapView } from "com.tencent.tencentmap.mapsdk.maps"
export function setScale(element : UniElement, scale : number) : void {
	(element?.getAndroidView() as MapView)?.map?.moveCamera(CameraUpdateFactory.zoomTo(scale.toFloat()));
}
```

--------------------------------

### Asynchronous CanvasContext Retrieval (Vue Composition API)

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/component/canvas.md

Demonstrates how to asynchronously get the CanvasContext using `uni.createCanvasContextAsync` in a Vue 3 Composition API setup. This method is cross-platform and recommended for most use cases, requiring HBuilderX 4.25+.

```vue
<template>
  <canvas id="canvas"></canvas>
</template>
<script setup>
  import { onReady, getCurrentInstance } from 'vue';

  onReady(() => {
    // HBuilderX 4.25+
    // Asynchronous call, cross-platform
    uni.createCanvasContextAsync({
      id: 'canvas',
      component: getCurrentInstance().proxy,
      success: (context) => {
        const canvasContext = context.getContext('2d')!;
        const canvas = canvasContext.canvas;

        // Handle high-resolution screen logic
        const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
        canvas.width = canvas.offsetWidth * dpr;
        canvas.height = canvas.offsetHeight * dpr;
        canvasContext.scale(dpr, dpr); // Scale only once, or after reset
      }
    });
  });
</script>
```

--------------------------------

### Image Component Tips and Best Practices

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/component/image.md

Provides essential tips for using the Uni-App X image component, including default dimensions, error handling, file inclusion, and platform-specific image loading behaviors.

```APIDOC
ImageComponentTips:
  DefaultDimensions:
    - Width: 320px
    - Height: 240px
  ErrorHandling:
    - Event: `error`
    - Action: Listen to the `error` event to reset the `src` attribute, enabling custom error image display.
    - Example: See provided code example link for custom error image implementation.
  FileInclusion:
    - Requirement: Image files must be in the `static` directory or imported via `import` to be included in the final package.
  PlatformSpecificBehavior:
    - Android Image Scaling:
      - Feature: Enabled by default, scales images based on component dimensions to save memory.
      - Implication: `load` event may return image dimensions that are not the original image dimensions.
    - Android CMYK Support:
      - Limitation: Does not support CMYK color profiles.
      - Reference: https://github.com/facebook/fresco/issues/1404
    - iOS WebP Performance:
      - iOS 14+:
        - Support: Native WebP support.
      - Below iOS 14:
        - Support: Uses third-party decoders for software decoding.
        - Implication: Performance overhead may increase when using many WebP images on the same page.
```

--------------------------------

### UTS and Kotlin Set Conversion Example

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/uts/buildin-object-api/set.md

Demonstrates the conversion process between UTS Set objects and Kotlin HashSet objects, including adding elements and logging the results for verification.

```UTS
// 创建Kotlin HashSet
let kotlinSet = new kotlin.collections.HashSet<string>()
kotlinSet.add("a")
kotlinSet.add("b")
// 转换为 UTS Set
let utsSet = new Set<string>()
utsSet.addAll(kotlinSet)
console.log(utsSet)
// UTS Set 转换为 Kotlin HashSet
let nextKotlinSet = new kotlin.collections.HashSet<string>()
nextKotlinSet.addAll(utsSet)
console.log(nextKotlinSet)
```

```Kotlin
// 创建Kotlin HashSet
var kotlinSet = kotlin.collections.HashSet<String>();
kotlinSet.add("a");
kotlinSet.add("b");
// 转换为 UTS Set
var utsSet = Set<String>();
utsSet.addAll(kotlinSet);
console.log(utsSet, " at pages/index/helloView.uvue:35");
// UTS Set 转换为 Kotlin HashSet
var nextKotlinSet = kotlin.collections.HashSet<String>();
nextKotlinSet.addAll(utsSet);
console.log(nextKotlinSet, " at pages/index/helloView.uvue:38");
```

--------------------------------

### UTS Usage Example for Swift .a Libraries

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-for-ios.md

Demonstrates how to use static libraries (.a) created with Swift within UTS code. It highlights the necessity of using the `import` statement in UTS to access symbols from Swift libraries.

```uts
// uts
import { Tool, Manager, TestLibraryExa } from 'TestLibraryExa';

Manager.testManager();
Tool.testTool()
let lib = TestLibraryExa();
lib.test()
console.log(lib.version);
```

--------------------------------

### DCloudUTSFoundation: colorWithString Usage

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-for-ios.md

This example shows how to convert various string color formats (hex, RGB, RGBA, keywords) into a UIColor object using the colorWithString method from UTSiOS. The resulting UIColor can then be applied to view properties like backgroundColor.

```ts
let bgColor = UTSiOS.colorWithString("#000000")
view.backgroundColor = bgColor
```

--------------------------------

### UTSJSONObject Creation Examples

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/uts/buildin-object-api/utsjsonobject.md

Demonstrates how to create UTSJSONObject instances using object literals and JSON strings.

```UTS
// Example using object literal
let obj = {
  name: "test",
  age: 18
};
let jsonObject = UTSJSONObject(obj);

// Example using JSON string
let jsonString = '{"name": "test", "age": 18}';
let jsonObjectFromString = UTSJSONObject.parse(jsonString);
```

--------------------------------

### DB Schema Internationalization Setup

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/i18n.md

Illustrates the structure for DB Schema internationalization in uni-app. It shows a schema file referencing locale keys using '%' placeholders and corresponding JSON locale files for different languages (English and Simplified Chinese).

```JSON
{
  "bsonType": "object",
  "required": [],
  "permission": {
    "read": false,
    "create": false,
    "update": false,
    "delete": false
  },
  "properties": {
    "_id": {
      "description": "ID"
    },
    "name": {
      "bsonType": "string",
      "label": "%name%",
      "errorMessage": {
        "format": "{label}%name.format%"
      }
    }
  }
}
```

```JSON
{
  "name": "Name",
  "name.format": " invalid format"
}
```

```JSON
{
  "name": "姓名",
  "name.format": "格式无效"
}
```

--------------------------------

### Navigating to UniAppX SDK Page (Swift)

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/native/use/iosapi.md

This Swift snippet demonstrates how to navigate to the UniAppX SDK's root view controller. It first checks if an app instance exists and creates one if not, then pushes the `UniAppRootViewController` onto the navigation stack.

```Swift
if UniSDKEngine.shared.getAppManager()?.getCurrentApp() == nil {
    // uni.exit() 方法会销毁app，所以在这里需要判断currentApp是否为空
    UniSDKEngine.shared.getAppManager()?.create()
}
let viewController = UniAppRootViewController()
self.navigationController?.pushViewController(viewController, animated: true)
```

--------------------------------

### UTS Usage Example for Objective-C .a Libraries

Source: https://github.com/fangxiangcn/unidocs-uni-app-x-zh/blob/main/docs/plugin/uts-for-ios.md

Shows how to call methods from Objective-C static libraries (.a) within UTS code. It demonstrates direct usage without explicit imports, assuming the library's symbols are correctly exposed.

```uts
// uts
const aResult = ToolA.toolAMethod();
const bResult = ToolB.toolBMethod();
const libResult = TestLib.testLib();

const res = {
	aResult: aResult,
	bResult: bResult,
	libResult: libResult
};
options.success?.(res);
```