【移动端应用开发】Uni-app 常用的 API 合集

Uni-App 是一款优秀的前端框架，它提供了许多强大的 API 来帮助开发者构建高效、可靠的应用程序。在这篇博客中，我将介绍一些 Un-App 中常用的 API，并提供一些示例代码，帮助你更好地理解和使用这些 API。

1. $axios：

$axios是 Uni-App 中用于发送 HTTP 请求的 API。它提供了一种简洁、方便的方式来向服务器发送 GET、POST、PUT、DELETE 等请求。以下是使用$axios发送 GET 请求的示例代码：

// 引入 $axios
import { $axios } from 'un-app';

// 配置请求头
$axios.setHeader({
  'Content-Type': 'application/json',
});

// 发送 GET 请求
$axios.get('http://example.com/data')
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

2. $router：

$router是 Uni-App 中用于管理路由的 API。它提供了一种方便的方式来定义和导航应用程序的不同页面。以下是使用$router导航到不同页面的示例代码：

// 引入 $router
import { $router } from 'un-app';

// 定义路由
const routes = [
  { path: '/', component: 'HomeComponent' },
  { path: '/about', component: 'AboutComponent' },
];

// 创建路由器实例
const router = $router.create(routes);

// 导航到根页面
router.push('/');

3. $store：

$store是 Uni-App 中用于管理应用程序状态的 API。它提供了一种集中式的方式来存储和获取应用程序的状态数据。以下是使用$store存储和获取状态数据的示例代码：

// 引入 $store
import { $store } from 'un-App';

// 创建 store 实例
const store = $store.create({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

// 获取状态数据
const count = store.state.count;

// 提交mutation 来修改状态数据
store.commit('increment');

// 监听状态变化
store.subscribe(() => {
  const newCount = store.state.count;
  console.log(newCount);
});

4. $toast：

$toast是 Uni-App 中用于显示弹出消息的 API。它提供了一种简单的方式来向用户显示短暂的消息提示。以下是使用$toast显示弹出消息的示例代码：

// 引入 $toast
import { $toast } from 'un-App';

// 显示成功消息
$toast.success('操作成功！');

// 显示错误消息
$toast.error('发生错误！');

// 显示警告消息
$toast.warning('注意！');

// 显示信息消息
$toast.info('信息提示！');

// 显示自定义消息
$toast.show({
  message: '自定义消息',
  type: 'success',
});

5. $dialog：

$dialog是 Uni-App 中用于显示对话框的 API。它提供了一种方便的方式来向用户显示模态对话框，例如确认框、提示框等。以下是使用$dialog显示确认框的示例代码：

// 引入 $dialog
import { $dialog } from 'un-App';

// 显示确认框
$dialog.confirm({
  title: '确认操作',
  message: '你确定要执行此操作吗？',
  confirmText: '确认',
  cancelText: '取消',
  onConfirm: () => {
    // 确认操作的逻辑
    console.log('用户点击了确认按钮');
  },
  onCancel: () => {
    // 取消操作的逻辑
    console.log('用户点击了取消按钮');
  },
});