### Composition API Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/vue/README.md

Demonstrates defining reactive data and methods using Vue 3's Composition API with the `setup` function. Use this for more flexible and concise component logic.

```vue
<template>
	<view>
		<button @click="buttonClick">{{title}}</button>
	</view>
</template>

<script setup>
  let title = ref("Hello world") //定义一个响应式变量title，默认赋值为Hello world
	const buttonClick = () => {
		title.value = "按钮被点了" //对响应式变量title的.value属性赋值，界面上button的文字会自动同步修改
	}
	onLoad(() => {
		// 页面启动的生命周期，这里编写页面加载时的逻辑
	})
</script>

```

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

### Configure and Start Lanhu MCP Service

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/ai/use-ui-mcp.md

Set up the environment by running the setup script and then start the MCP service using Docker Compose. This step requires entering your Lanhu Cookie during setup.

```shell
bash setup-env.sh        # macOS / Linux
# 或
setup-env.bat            # Windows
```

```shell
docker-compose up -d
```

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

### Get Device Info in uni-app

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/api/get-device-info.md

This example demonstrates how to use the uni.getDeviceInfo() API to fetch device information and display it in a list. It handles potential null values and formats the output for display. Requires the APP platform.

```vue
<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-common-mt">
        <view class="uni-list">
          <view class="uni-list">
            <view class="uni-list-cell" v-for="(item, _) in data.items" style="align-items: center">
              <view class="uni-pd">
                <view class="uni-label" style="width: 180px">{{item.label}}
                </view>
              </view>
              <view class="uni-list-cell-db">
                <text class="uni-list-cell-db-text">{{item.value == "" ? "未获取" : item.value}}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-padding-wrap">
          <view class="uni-btn-v">
            <button type="primary" @tap="getDeviceInfo">获取设备信息</button>
          </view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script setup lang="uts">
  import { setDevicePixelRatio } from '@/store/index.uts'

  type Item = {
    label : string,
    value : string,
  }

  type DataType = {
    items: Item[];
  }

  const title = ref('getDeviceInfo')
  const data = reactive({
    items: [] as Item[],
  } as DataType)

  const getDeviceInfo = () => {
    const res = uni.getDeviceInfo();
    // 获取像素比, 供截图对比使用
    setDevicePixelRatio(res.devicePixelRatio !== null ? res.devicePixelRatio! : 1)
    data.items = [] as Item[];

    const res_str = JSON.stringify(res);
    const res_obj = JSON.parseObject(res_str);
    const res_map = res_obj!.toMap();
    let keys = [] as string[]
    res_map.forEach((_, key) => {
      keys.push(key);
    });
    keys.sort().forEach(key => {
      const value = res[key];
      if (value != null) {
        const item = {
          label: key,
          value: "" + ((typeof value == "object") ? JSON.stringify(value) : value)
        } as Item;
        data.items.push(item);
      }
    });
  }

</script>

<style>
  .uni-pd {
    padding-left: 15px;
  }
</style>

```

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

### Live Player Component Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/component/live-player.md

This snippet demonstrates the usage of the live-player component, including template structure, script setup for state management, and event handlers for playback control and property configuration. It requires the 'ItemType' enum for configuring certain properties.

```uvue
<template>
  <view class="uni-flex-item">
    <live-player id="live-player" class="live-player" :src="src" :autoplay="autoplay" :muted="muted"
      :object-fit="objectFit" :background-mute="backgroundMute" :sound-mode="soundMode" :orientation="orientation"
      @statechange="statechange" @fullscreenchange="fullscreenchange" @error="error">
    </live-player>
    <scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
      <view class="uni-title">
        <text class="uni-title-text">API示例</text>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="play" :disabled="playState">播放</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="pause" :disabled="!playState">暂停</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="resume" :disabled="initState || playState || stopState">恢复</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="stop" :disabled="!playState">停止</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="mute" :disabled="!playState">静音</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="requestFullScreen" :disabled="!playState">进入全屏</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="exitFullScreen" :disabled="!playState">退出全屏</button>
      </view>
      <view class="uni-title">
        <text class="uni-title-text">属性示例</text>
      </view>
      <input class="input margin-10" type="string" placeholder="设置播放地址" @confirm="onSrcComfirm"></input>
      <boolean-data title="设置是否自动播放" :defaultValue="autoplay" @change="onAutoplayChange"></boolean-data>
      <boolean-data title="设置是否静音" :defaultValue="muted" @change="onMutedChange"></boolean-data>
      <boolean-data title="设置进入后台时是否静音" :defaultValue="backgroundMute" @change="onBackgroundMuteChange"></boolean-data>
      <enum-data title="设置填充模式" :items="objectFitItemTypes" @change="onObjectFitChange"></enum-data>
      <enum-data title="设置声音输出方式" :items="soundModeItemTypes" @change="onSoundModeChange"></enum-data>
      <enum-data title="设置画面方向" :items="orientationItemTypes" @change="onOrientationChange"></enum-data>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ItemType } from '@/components/enum-data/enum-data-types';

  const context = ref(null as LivePlayerContext | null);
  const src = ref("");
  const autoplay = ref(false);
  const muted = ref(false);
  const objectFit = ref("contain");
  const backgroundMute = ref(false);
  const soundMode = ref("speaker");
  const orientation = ref("vertical");
  const initState = ref(true);
  const playState = ref(false);
  const stopState = ref(false);

  onReady(() => {
    context.value = uni.createLivePlayerContext("live-player", getCurrentInstance()!.proxy);
  });

  const statechange = (e : UniLivePlayerStatechangeEvent) => {
    console.log("statechange", e);
    switch (e.detail.code) {
      case 10004:
        initState.value = false;
        playState.value = true;
        stopState.value = false;
        break;
      case 10009:
        stopState.value = true;
      case 10006:
      case 10007:
      case 10010:
      case 10011:
        playState.value = false;
        break;
    }
  };
  const fullscreenchange = (e : UniLivePlayerFullscreenchangeEvent) => {
    console.log("fullscreenchange", e);
  };
  const error = (e : UniLivePlayerErrorEvent) => {
    console.log("error", e);
  };
  const isSrcValid = () : boolean => {
    const length = src.value.length;
    if (length <= 0) {
      uni.showToast({
        title: "请输入播放地址",
        icon: "none"
      });
    }
    return length > 0;
  };
  const play = () => {
    if (!isSrcValid()) return;
    context.value?.play({
      success: (res) => {
        console.log("play", JSON.stringify(res));
      },
      fail: (err) => {
        console.log("play", JSON.stringify(err));
      },
      complete: (res) => {
        console.log("play", JSON.stringify(res));
      }
    });
  };
  const pause = () => {
    if (!isSrcValid()) return;
    context.value?.pause({
      success: (res) => {
        console.log("pause", JSON.stringify(res));
      },
      fail: (err) => {
        console.log("pause", JSON.stringify(err));
      },
      complete: (res) => {
        console.log("pause", JSON.stringify(res));
      }
    });
  };
  const resume = () => {
    if (!isSrcValid()) return;

```

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

### Enable/Disable and Listen for Screen Capture

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/api/capture-screen.md

This example demonstrates how to use uni.setUserCaptureScreen to allow or disallow screen capture and how to set up listeners for screen capture events. It includes functions to toggle capture status, start listening, and stop listening for captures.

```vue
<template>
  <view class="uni-container">
    <page-head :title="title"></page-head>
    <view class="uni-common-mt">
      <text class="uni-title">截屏状态：{{ captureStatus }}</text>
      <view style="flex-direction: row;">
        <text class="uni-title">是否允许截屏</text>
        <switch :checked="allowCapture" @change="(e: UniSwitchChangeEvent) => toggleCaptureScreen(e.detail.value)" />
      </view>

      <view class="uni-btn">
        <button @click="startCaptureListener" type="primary" class="uni-common-mt">开启截屏监听</button>
        <button @click="stopCaptureListener" class="uni-common-mt">关闭截屏监听</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { state, setAllowCapture } from '@/store/index.uts'
const title = '截屏监听'
const allowCapture = ref(state.allowCapture)
const captureStatus = ref('未监听')
let captureCallback: ((res: OnUserCaptureScreenCallbackResult) => void) | null = null;


const toggleCaptureScreen = (checked: boolean) => {
  uni.setUserCaptureScreen({
    enable: checked,
    success: (res: SetUserCaptureScreenSuccess) => {
      allowCapture.value = checked
      setAllowCapture(checked)
      console.log('设置截屏状态成功：', res)
    },
    fail: (err:IUniError) => {
      console.log('设置截屏状态失败：', err)
    }
  })
}

const startCaptureListener = () => {
  captureCallback = (res: OnUserCaptureScreenCallbackResult) => {
    captureStatus.value = '检测到截屏'
    console.log('检测到用户截屏',res)
  }
  uni.onUserCaptureScreen(captureCallback)
  captureStatus.value = '正在监听'
  console.log('开始监听截屏')
}

const stopCaptureListener = () => {
  if (captureCallback != null) {
    uni.offUserCaptureScreen(captureCallback)
    captureStatus.value = '未监听'
    console.log('停止监听截屏')
  }
}

// 页面卸载时清理监听
onUnmounted(() => {
  stopCaptureListener()
})
</script>

```

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

### Initiate Facial Recognition

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/api/facial-recognition-meta-info.md

This snippet demonstrates how to initiate the facial recognition process. It includes input fields for name and ID card, and calls a cloud function to get meta information before starting the verification. Ensure you have the necessary uniCloud setup and that the environment supports this feature.

```vue
<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-padding-wrap uni-common-mt">
        <view class="uni-btn-v uni-common-mt">
          <input class="uni-input" type="text" v-model="realName" name="real-name" placeholder="姓名" maxlength="-1" />
        </view>
        <view class="uni-btn-v uni-common-mt">
          <input class="uni-input" type="text" v-model="idCard" name="id-card" placeholder="身份证号" maxlength="-1" />
        </view>
        <view class="uni-btn-v uni-common-mt">
          <button type="primary" @click="facialRecognition">开始人脸识别</button>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  const title = ref('实人认证')
  const realName = ref('')
  const idCard = ref('')

  const facialRecognition = () => {
    const realNameValue = realName.value.trim()
    const idCardValue = idCard.value.trim()
    if (realNameValue == '' || idCardValue == '') {
      uni.showModal({
        title: '错误',
        content: '姓名和身份证号不可为空',
        showCancel: false
      })
      return
    }
    if ('production' === process.env.NODE_ENV && '__UNI__HelloUniAppX' === uni.getAppBaseInfo().appId) {
      uni.showModal({
        title: '提示',
        content: '实人认证为收费功能，当前环境暂不支持。请在HBuilderX中新建Hello uni-app x项目真机运行体验！',
        showCancel: false
      })
      return
    }
    const testFacialCo = uniCloud.importObject('facial-recognition-co')
    let metaInfo = uni.getFacialRecognitionMetaInfo();
    testFacialCo.getCertifyId({
      realName: realNameValue,
      idCard: idCardValue,
      metaInfo
    })
      .then((res : UTSJSONObject) : Promise<string> => {
        const certifyId = res['certifyId'] as string
        return new Promise((
          resolve : (res : string) => void,
          reject : (err : Error) => void
        ) => {
          uni.startFacialRecognitionVerify({
            certifyId,
            success() {
              resolve(certifyId)
            },
            fail(err) {
              reject(new Error(err.errMsg))
            }
          })
        })
      })
      .then((certifyId : string) : Promise<UTSJSONObject> => {
        return testFacialCo.getAuthResult(certifyId)
      })
      .then((res : UTSJSONObject) => {
        console.log('res', res)
      })
      .catch((err : any | null) => {
        console.error('error', err)
      })
  }

</script>

```

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

### Directory Structure Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/collocation/pagesjson.md

Illustrates a typical Uni-App project directory structure, showing the placement of pages, static assets, and configuration files.

```text
┌─pages
│  ├─index
│  │  └─index.uvue
│  └─login
│     └─login.uvue
├─static
├─main.uts
├─App.uvue
├─manifest.json
└─pages.json

```

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

### Choose Media Configuration and UI

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/api/choose-media.md

This snippet demonstrates the template and script setup for the `chooseMedia` API in a uni-app application. It includes UI elements for selecting media source, type, count, camera, and orientation, as well as a preview area for selected media.

```uvue
<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-common-mt">
        <view class="uni-list">

          <view class="uni-list-cell cell-pd">
            <view class="uni-list-cell-left uni-label">
              来源
            </view>
            <view class="uni-list-cell-right" @click="chooseMediaSource">
              <text class="click-t">{{sourceTypes[sourceTypeIndex].title}}</text>
            </view>
          </view>

          <view class="uni-list-cell cell-pd">
            <view class="uni-list-cell-left uni-label">
              方式
            </view>
            <view class="uni-list-cell-right" @click="chooseMediaType">
              <text class="click-t">{{(mediaTypes[mediaTypeIndex] as ChooseSource).title}}</text>
            </view>
          </view>

          <view class="uni-list-cell cell-pd">
            <view class="uni-list-cell-left uni-label">
              数量限制
            </view>
            <view class="uni-list-cell-right">
              <input class="click-t" ref="refCountInput" :value="count" type="number" :maxlength="1" @blur="chooseMediaCount"/>
            </view>
          </view>

          <!-- #ifdef APP-ANDROID -->
          <view class="uni-list-cell cell-pd">
            <view class="uni-list-cell-left uni-label">
              屏幕方向
            </view>
            <view class="uni-list-cell-right" @click="chooseOrientationType">
              <text class="click-t">{{orientationTypes[orientationTypeIndex].title}}</text>
            </view>
          </view>
          <!-- #endif -->

          <view class="uni-list-cell cell-pd">
            <view class="uni-list-cell-left uni-label">
              摄像头
            </view>
            <view class="uni-list-cell-right" @click="chooseCameraType">
              <text class="click-t">{{cameraTypes[cameraTypeIndex].title}}</text>
            </view>
          </view>
        </view>
        <!-- #ifdef APP-IOS -->
        <input-data title="最长拍摄时间，单位秒" defaultValue="10" type="number" @confirm="onMaxDurationConfirm"></input-data>
        <!-- #endif -->
        <view class="uni-list list-pd" style="padding: 15px;">
          <view class="uni-row" style="margin-bottom: 10px;">
            <view class="uni-list-cell-left">点击预览</view>
            <view style="margin-left: auto;">
              <text class="click-t">{{mediaList.length}}/{{count}}</text>
            </view>
          </view>
          <view class="uni-row" style="flex-wrap: wrap;">
            <view v-for="(file,index) in mediaList" :key="index" class="uni-uploader__input-box" style="border: 0;">
              <image style="width: 104px; height: 104px;" :src="file.imagePath" @tap="previewMedia(index)">
              </image>
              <image src="/static/plus.png" class="image-remove" @click="removeMedia(index)"></image>
            </view>
            <image class="uni-uploader__input-box" @tap="chooseMedia" src="/static/plus.png"></image>
          </view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  type FileSource = {
    imagePath : string;
    filePath : string;
    fileType : string;
  };
  type ChooseSource = {
    value : string[];
    title : string;
  };
  const sourceTypeList : ChooseSource[] = [
    {
      value: ['camera'],
      title: '拍摄',
    },
    {
      value: ['album'],
      title: '相册',
    },
    {
      value: ['camera', 'album'],
      title: '拍摄或相册',
    }
  ];

  const mediaTypeList : ChooseSource[] = [
    {
      value: ['image'],
      title: '仅图片',
    },
    {
      value: ['video'],
      title: '仅视频',
    },
    {
      value: ['image', 'video'],
      title: '不限制',
    }
  ];

  const orientationTypeList : ChooseSource[] = [
    {
      value: ['portrait'],
      title: '竖屏',
    },
    {
      value: ['landscape'],
      title: '横屏',
    },
    {
      value: ['auto'],
      title: '自动',
    }
  ];
  const cameraTypeList : ChooseSource[] = [
    {
      value: ['front'],
      title: '前置摄像头',
    },
    {
      value: ['back'],
      title: '后置摄像头',
    }
  ];

  const title = ref('chooseMedia')
  const mediaList = ref([] as Array<FileSource>)
  const sourceTypeIndex = ref(2)
  const mediaTypeIndex = ref(2)
  const cameraTypeIndex = ref(1)
  const orientationTypeIndex = ref(0)
  const albumModeTypeIndex = ref(0)
  const count = ref(9)

```

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

### align-content: flex-start Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/css/align-content.md

Use 'flex-start' to pack all lines starting from the container's cross-axis start. The start edge of the first line aligns with the start edge of the container.

```css
align-content: flex-start;
```

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

### Purchase Product Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/api/virtual-payment.md

Initiates a purchase for a product. Handles success and failure callbacks, displaying relevant information and hiding loading indicators.

```javascript
virtualPaymentManager.value.purchase({
      productId: "com.example.product1",
      success: (res) => {
        console.log("购买成功, productId= " + res.apple?.productId)
        uni.hideLoading()
        //TODO: 开发者server验证逻辑
        virtualPaymentManager.value.finishTransaction({
          transaction: res.apple,
          success: (r) => {
            console.log("关单成功, 该productId= " + res.apple?.productId)
          },
          fail: (e) => {
            console.log("关单失败, 该productId= " + res.apple?.productId)
          }
        })
      },
      fail: (e) => {
        uni.hideLoading()
        console.log("购买失败：errSubject= " + e.errSubject + ", errCode= " + e.errCode + ", errMsg= " + e.errMsg)
        uni.showToast({
          title: "购买失败错误码：" + e.errCode,
          icon: 'error'
        })
      }
    })
```

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

### Uni-App Script Setup for Flex Direction

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/css/flex-direction.md

The script setup defines the reactive data, enum values, and functions to change the flex-direction property dynamically. It includes methods to get property values and update the UI.

```javascript
import { ItemType } from '@/components/enum-data/enum-data-types'

const flexDirectionEnum: ItemType[] = [
  { value: 0, name: '' },
  { value: 1, name: 'row' },
  { value: 2, name: 'row-reverse' },
  { value: 3, name: 'column' },
  { value: 4, name: 'column-reverse' }
]

const data = reactive({
  flexDirection: 'row',
  flexDirectionActual: '',
  flexDirectionActualFlat: ''
})
const viewRef = ref(null as UniElement | null)
const viewRefFlat = ref(null as UniElement | null)

const getPropertyValues = () => {
  data.flexDirectionActual = viewRef.value?.style.getPropertyValue('flex-direction') ?? ''
  data.flexDirectionActualFlat = viewRefFlat.value?.style.getPropertyValue('flex-direction') ?? ''
}

const ins = getCurrentInstance()
const changeFlexDirection = (value: string) => {
  data.flexDirection = value
  viewRef.value?.style.setProperty('flex-direction', value)
  viewRefFlat.value?.style.setProperty('flex-direction', value)
  // 使用 nextTick 确保样式已应用后再获取值
  nextTick(() => {
    getPropertyValues()
  }, ins)
}

const radioChangeFlexDirection = (index: number) => {
  const selectedItem = flexDirectionEnum.find((item): boolean => item.value === index)
  if (selectedItem != null) {
    changeFlexDirection(selectedItem.name)
  }
}

const inputChangeFlexDirection = (value: string) => {
  changeFlexDirection(value)
}

onReady(() => {
  getPropertyValues()
})

defineExpose({
  radioChangeFlexDirection,
  data
})

```

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

### CSS Transition Delay Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/css/transition-delay.md

This snippet shows how to apply a transition-delay to an element. The transition will start after the specified delay.

```css
.image-ani {
    transition-property: width, height;
    transition-duration: 2s;
    transition-delay: 1s;
    width: 150px;
    height: 150px;
  }
```

```css
.scroll-view-ani {
    transition-property: width;
    transition-duration: 2s;
    transition-delay: 1s;
    width: 300px;
  }
```

```css
.native-view-ani {
    transition-property: width;
    transition-duration: 2s;
    transition-delay: 1s;
    width: 300px;
  }
```

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

### onTouchStart

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/api/unipage.md

Listens for page touch start events.

```APIDOC
## onTouchStart

### Description
Listens for page touch start events.

### Method
`onTouchStart(callback: UniPageOnTouchEventCallback): number`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **callback** (UniPageOnTouchEventCallback) - Required - The callback function to execute when a touch starts.

### Request Example
```javascript
const listenerId = uni.onTouchStart(event => {
  console.log('Touch start event detected:', event);
});
```

### Response
#### Success Response (number)
Returns a number representing the listener ID, which can be used to unregister the event listener.

#### Response Example
```json
11223
```
```

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

### Comprehensive theme.json Configuration Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/collocation/themejson.md

Illustrates a detailed configuration in pages.json and theme.json, covering global styles, tab bar appearance, and icon paths for both light and dark modes.

```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"
			}
		]
	}
}
```

```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"
	}
}
```

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

### Setting and Getting Flex Flow Property

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/css/flex-flow.md

This example shows how to dynamically set and retrieve the 'flex-flow' CSS property using Vue.js reactivity and Uni-App's component APIs. It includes examples for both a standard and a 'flattened' view.

```javascript
import { ItemType } from '@/components/enum-data/enum-data-types'

const flexFlowEnum: ItemType[] = [
  { value: 0, name: '' },
  { value: 1, name: 'row nowrap' },
  { value: 2, name: 'row wrap' },
  { value: 3, name: 'row wrap-reverse' },
  { value: 4, name: 'column nowrap' },
  { value: 5, name: 'column wrap' },
  { value: 6, name: 'column wrap-reverse' }
]

const data = reactive({
  flexFlow: 'row wrap',
  flexFlowActual: '',
  flexFlowActualFlat: ''
})
const viewRef = ref(null as UniElement | null)
const viewRefFlat = ref(null as UniElement | null)

const getPropertyValues = () => {
  data.flexFlowActual = viewRef.value?.style.getPropertyValue('flex-flow') ?? ''
  data.flexFlowActualFlat = viewRefFlat.value?.style.getPropertyValue('flex-flow') ?? ''
}

const ins = getCurrentInstance()

const changeFlexFlow = (value : string) => {
  data.flexFlow = value
  viewRef.value?.style.setProperty('flex-flow', value)
  viewRefFlat.value?.style.setProperty('flex-flow', value)
  // 使用 nextTick 确保样式已应用后再获取值
  nextTick(() => {
    getPropertyValues()
  }, ins)
}

const radioChangeFlexFlow = (index: number) => {
  const selectedItem = flexFlowEnum.find((item): boolean => item.value === index)
  if (selectedItem != null) {
    changeFlexFlow(selectedItem.name)
  }
}

const inputChangeFlexFlow = (value: string) => {
  changeFlexFlow(value)
}

onReady(() => {
  getPropertyValues()
})

defineExpose({
  radioChangeFlexFlow,
  data
})

```

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

### Uni-App Navigator Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/api/navigator.md

Demonstrates various navigation methods including navigating to a new page, returning to the previous page, redirecting, switching tabs, and relaunching the application. It also shows how to enable shared element animations and displays lifecycle timestamps.

```vue
<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view>
      <page-head title="navigate"></page-head>
      <page-intro content="本页演示页面路由：开关控制共享元素动画，展示 onLoad/onShow/onReady 等生命周期时间戳；通过按钮跳转新页、返回、redirect 等，可传递参数。"></page-intro>
      <view style="flex-direction: row;">
        <switch @change="onChange"></switch>
        <view class="uni-title">是否启用共享元素动画</view>
      </view>
      <share-element :share-key="data.shareElementKey">
        <image style="width: 250px; height: 176px;" src="/static/shuijiao.jpg" mode="scaleToFill"></image>
      </share-element>
      <text style="font-size: 13px;" >注意：开启共享元素动画后仅支持slide-in-right和fade-in动画效果</text>
      <view class="uni-padding-wrap uni-common-mt uni-common-mb">
        <view class="direction-row">
          <text class="label">onLoad触发时间戳:</text>
          <text>{{ data.onLoadTime }}</text>
        </view>
        <view class="direction-row">
          <text class="label">onShow触发时间戳:</text>
          <text>{{ data.onShowTime }}</text>
        </view>
        <view class="direction-row">
          <text class="label">onReady触发时间戳:</text>
          <text>{{ data.onReadyTime }}</text>
        </view>
        <view class="direction-row">
          <text class="label">onHide触发时间戳:</text>
          <text>{{ data.onHideTime }}</text>
        </view>
        <view class="direction-row">
          <text class="label">onBackPress触发时间戳:</text>
          <text>见控制台</text>
        </view>
        <view class="direction-row">
          <text class="label">onUnload触发时间戳:</text>
          <text>见控制台</text>
        </view>
        <view class="uni-btn-v">
          <button @tap="navigateTo" class="uni-btn">
            跳转新页面，并传递数据
          </button>
          <button @tap="navigateBack" class="uni-btn">返回上一页</button>
          <button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
          <button @tap="switchTab" class="uni-btn">切换到模板选项卡</button>
          <button @tap="reLaunch" class="uni-btn">
            关闭所有页面，打开首页
          </button>
          <button @tap="navigateToErrorPage" class="uni-btn">
            打开不存在的页面
          </button>
          <button v-for="(item, _) in data.animationTypeList" @tap="navigateToAnimationType(item)"
            class="uni-btn">navigateTo动画({{item}})</button>
          <button class="uni-btn" @click="goOnLoadCallAPI">测试 onLoad 调用 API</button>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  import { state, setLifeCycleNum } from '@/store/index.uts'
  type AnimationType = "slide-in-right" | "slide-in-left" | "slide-in-top" | "slide-in-bottom" | "pop-in" | "fade-in" | "zoom-out" | "zoom-fade-out" | "none" | "auto"

  type DataType = {
    onLoadTime: number;
    onShowTime: number;
    onReadyTime: number;
    onHideTime: number;
    shareElementKey: string;
    animationTypeList: string[];
  }

  const data = reactive({
    onLoadTime: 0,
    onShowTime: 0,
    onReadyTime: 0,
    onHideTime: 0,
    shareElementKey: "",
    animationTypeList: [
      'slide-in-right',
      'slide-in-left',
      'slide-in-top',
      'slide-in-bottom',
      'pop-in',
      'fade-in',
      'zoom-out',
      'zoom-fade-out',
      'none'
    ]
  } as DataType)
  onLoad(() => {
    data.onLoadTime = Date.now()
    console.log('onLoad', data.onLoadTime)
  })

  onPageShow(() => {
    data.onShowTime = Date.now()
    console.log('onShow', data.onShowTime)
  })

  onReady(() => {
    data.onReadyTime = Date.now()
    console.log('onReady', data.onReadyTime)
  })

  onPageHide(() => {
    data.onHideTime = Date.now()
    console.log('onHide', data.onHideTime)
  })

  onBackPress((options : OnBackPressOptions) : boolean | null => {
    console.log('onBackPress', Date.now())
    console.log('onBackPress from', options.from)
    return null
  })

  onUnload(() => {
    console.log('onUnload', Date.now())
  })
  const reLaunch = () => {
    uni.reLaunch({
      url: '/pages/tabBar/component',
      success(result) {
        console.log('reLaunch success', result.errMsg)
        // 自动化测试
        setLifeCycleNum(state.lifeCycleNum + 1)
      },
      fail(error) {
        console.log('reLaunch fail', error.errMsg)
        // 自动化测试
        setLifeCycleNum(state.lifeCycleNum - 1)
      },
      complete(result) {
        console.log('reLaunch complete', result.errMsg)
        // 自动化测试
        setLifeCycleNum(state.lifeCycleNum + 1)
      },
    })
  }

</script>
```

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

### Uni-app(x) Page Test Case Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/worktile/auto/quick-start.md

This example demonstrates how to write a basic test case for a uni-app(x) page using Jest. It shows how to get the page object, wait for elements, and assert text content.

```javascript
describe('test title', () => {
    let page;
    beforeAll(async () => {
        page = await program.currentPage();
        await page.waitFor(3000);
    });

    it('check page title', async () => {
        const el = await page.$('.title');   // page.$(selector: string) 选择器(id、class、元素选择器)
        const titleText = await el.text();
        expect(titleText).toEqual('Hello');
    });
});
```

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

### Pull-down Refresh Example

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/api/pull-down-refresh.md

This example demonstrates how to implement pull-down refresh functionality in a Uni-app application. It includes setup for scrollable views, data initialization, loading more data on scroll, and handling the pull-down refresh event. The code utilizes Vue.js syntax with Uni-app specific directives and lifecycle hooks.

```vue
<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;">
  <!-- #endif -->
    <!-- 实际开发中，长列表应该使用list-view -->
    <view class="uni-padding-wrap uni-common-mt">
      <text class="text" v-for="(num,index) in listData" :key="index">list - {{num}}</text>
      <view v-if="showLoadMore">{{loadMoreText}}</view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script setup lang="uts">
  

  type DataType = {
    pulldownRefreshTriggered: boolean,
    startPullDownRefreshStaus: boolean,
    stopPullDownRefreshStatus: boolean,
  }

  const listData = ref([] as Array<number>)
  const loadMoreText = ref("加载中...")
  const showLoadMore = ref(false)
  const max = ref(0)
  const data = reactive({
    pulldownRefreshTriggered: false,
    startPullDownRefreshStaus: false,
    stopPullDownRefreshStatus: false,
  } as DataType)

  function initData() {
    setTimeout(() => {
      max.value = 0;
      listData.value = [];
      let dataArr : Array<number> = [];
      max.value += 20;
      for (let i : number = max.value - 19; i < max.value + 1; i++) {
        dataArr.push(i)
      }
      listData.value = listData.value.concat(dataArr);
      let status = false
      uni.stopPullDownRefresh();
    }, 1000);
  }

  function setListData() {
    let dataArr : Array<number> = [];
    max.value += 10;
    for (let i : number = max.value - 9; i < max.value + 1; i++) {
      dataArr.push(i)
    }
    listData.value = listData.value.concat(dataArr);
  }

  onReady(() => {
    let status = false
    uni.startPullDownRefresh({
      success() {
        status = true
      },
      fail() {
        status = false
      },
      complete: () => {
        data.startPullDownRefreshStaus = status
      }
    });
    initData();
  })

  onReachBottom(() => {
    console.log("onReachBottom");
    if (max.value > 40) {
      loadMoreText.value = "没有更多数据了!"
      return;
    }
    showLoadMore.value = true;
    setTimeout(() => {
      setListData();
    }, 300);
  })

  onPullDownRefresh(() => {
    console.log('onPullDownRefresh');
    data.pulldownRefreshTriggered = true
    initData();
  })

  defineExpose({
    data
  })
</script>

<style>
  .text {
    margin: 6px 0;
    width: 100%;
    background-color: #fff;
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: #555;
    border-radius: 4px;
  }
</style>

```

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

### View Help Information

Source: https://github.com/dcloudio/uni-app/blob/uni-app-x/docs/worktile/auto/hbuilderx-cli-uniapp-test.md

Displays command-line help for the uniapp.test CLI tool.

```bash
cli uniapp.test --help
```