当前位置：首页 > uni-app

uniapp如何调用

2026-01-15 18:12:21uni-app

uniapp调用方法

uniapp提供了多种调用方式，包括API调用、组件调用和插件调用。具体方法如下：

API调用 uniapp内置了大量API，可以通过全局对象uni直接调用。例如调用网络请求API：

uni.request({
  url: 'https://example.com/api',
  success: (res) => {
    console.log(res.data);
  }
});

组件调用 uniapp支持使用内置组件和自定义组件。在template中直接使用组件标签即可：

uniapp如何调用

<template>
  <view class="container">
    <button @click="handleClick">点击按钮</button>
  </view>
</template>

插件调用 通过uni-app插件市场安装插件后，按照插件文档进行调用。通常需要先导入插件：

import plugin from 'plugin-name';
plugin.doSomething();

页面跳转调用

uniapp提供了多种页面跳转方式：

uniapp如何调用

// 保留当前页面，跳转到应用内页面
uni.navigateTo({
  url: '/pages/detail/detail'
});

// 关闭当前页面，跳转到应用内页面
uni.redirectTo({
  url: '/pages/login/login'
});

// 跳转到tabBar页面
uni.switchTab({
  url: '/pages/home/home'
});

原生功能调用

uniapp可以通过plus对象调用原生功能：

// 调用摄像头
uni.chooseImage({
  count: 1,
  sourceType: ['camera'],
  success: function(res) {
    console.log(res.tempFilePaths);
  }
});

// 调用地理位置
uni.getLocation({
  type: 'wgs84',
  success: function(res) {
    console.log(res.latitude, res.longitude);
  }
});

跨平台兼容处理

uniapp支持条件编译处理平台差异：

// #ifdef APP-PLUS
// 仅App端执行的代码
plus.screen.lockOrientation("portrait-primary");
// #endif

// #ifdef H5
// 仅H5端执行的代码
document.title = "H5页面标题";
// #endif