uni-halo/.agents/bak-skills/uniappx-uview-pro/examples/integration/uniappx-api.md

UniAppX API Integration | UniAppX API 集成

Instructions

This example demonstrates how to use UniAppX APIs with uView Pro components.

Key Concepts

• Using UniAppX APIs with uView Pro components
• Network requests for component data
• Storage API for component state
• System information for responsive components
• Lifecycle hooks with uView Pro components
• TypeScript type definitions

Example: Network Request with uView Pro Components

<!-- pages/index/index.vue -->
<template>
  <view>
    <u-button type="primary" :loading="loading" @click="loadData">
      加载数据
    </u-button>
    <u-list v-if="dataList.length > 0">
      <u-list-item v-for="item in dataList" :key="item.id">
        {{ item.name }}
      </u-list-item>
    </u-list>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
const dataList = ref([])

const loadData = () => {
  loading.value = true
  uni.request({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: (res) => {
      dataList.value = res.data
    },
    fail: (err) => {
      uni.showToast({
        title: '加载失败',
        icon: 'none'
      })
    },
    complete: () => {
      loading.value = false
    }
  })
}
</script>

Example: Storage API with uView Pro Components

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const userInfo = ref({})

onMounted(() => {
  // Load from cache first
  uni.getStorage({
    key: 'userInfo',
    success: (res) => {
      userInfo.value = res.data
    },
    fail: () => {
      // Load from network
      loadUserInfo()
    }
  })
})

const loadUserInfo = () => {
  uni.request({
    url: 'https://api.example.com/user',
    success: (res) => {
      userInfo.value = res.data
      // Cache the data
      uni.setStorage({
        key: 'userInfo',
        data: res.data
      })
    }
  })
}
</script>

Example: System Information for Responsive Components

<template>
  <view>
    <u-grid :col="gridCol">
      <u-grid-item v-for="item in gridData" :key="item.id">
        {{ item.name }}
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const gridCol = ref(3)
const gridData = ref([])

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      // Adjust grid columns based on screen width
      if (res.windowWidth > 750) {
        gridCol.value = 4
      } else if (res.windowWidth > 500) {
        gridCol.value = 3
      } else {
        gridCol.value = 2
      }
    }
  })
})
</script>

Example: Show Loading with uView Pro

<template>
  <view>
    <u-loading-page :loading="loading" />
    <u-button @click="loadData">加载数据</u-button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)

const loadData = () => {
  loading.value = true
  uni.request({
    url: 'https://api.example.com/data',
    success: (res) => {
      // Handle data
    },
    complete: () => {
      loading.value = false
    }
  })
}
</script>

Example: Pull to Refresh with uView Pro

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    }
  ]
}

<!-- pages/index/index.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const dataList = ref([])

const onPullDownRefresh = () => {
  loadData()
}

const loadData = () => {
  uni.request({
    url: 'https://api.example.com/data',
    success: (res) => {
      dataList.value = res.data
    },
    complete: () => {
      uni.stopPullDownRefresh()
    }
  })
}
</script>

Example: Navigation with uView Pro Components

<template>
  <view>
    <u-button type="primary" @click="goToDetail">查看详情</u-button>
  </view>
</template>

<script setup lang="ts">
const goToDetail = () => {
  uni.navigateTo({
    url: '/pages/detail/detail?id=123'
  })
}
</script>

Key Points

• Use uni.request() for loading data with uView Pro components
• Use uni.getStorage() and uni.setStorage() for caching component state
• Use uni.getSystemInfo() for responsive component sizing
• Use u-loading-page component for loading states
• Handle pull-to-refresh for component data updates
• Use TypeScript types for better type safety
• Use Composition API and setup syntax (recommended for UniAppX)