详细介绍Uniapp的常用组件

一、uni-app 简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它是一个多终端开发统一框架，具备跨终端、跨平台的能力，支持 nVue、H5、小程序等，让开发者只用手写一遍代码就可以将应用同时编译成多个端运行。

// vue单文件组件示例
<template>
  <view>
    <text>{{ msg }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, uni-app!'
    };
  },
  onLoad() {
    console.log('页面加载');
  },
  onShow() {
    console.log('页面展示');
  },
  methods: {
    handleClick() {
      console.log('点击事件');
    }
  }
};
</script>

<style lang="scss">
view {
  text-align: center;
  margin-top: 50px;
}
</style>

二、常用组件介绍

uni-app 提供了一些常用的组件，开发时可以大大简化代码量，方便开发者使用。接下来介绍几个常用组件。

1. 视图容器组件（view）

最基础的组件就是 view，它能够作为容器布局其它组件，也可以包含文字、图片等。

// view 示例
<view class="container">
  <view class="title">这是标题</view>
  <view class="content">这是内容</view>
</view>

<style>
.container {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 20px;
  margin: 20px 0;
}

.content {
  font-size: 12px;
}
</style>

2. 文本组件（text）

用来显示文本，支持嵌套富文本和显示表情。

// text 示例
<text>
  这是普通文本<br/>
  <span style="color: red;">这是红色文本</span>
</text>

3. 图片组件（image）

可以显示图片，支持远程图片和本地图片。

// image 示例
<image src="~/assets/logo.png" mode="aspectFit" />

4. 按钮组件（button）

支持设置样式、图标、绑定点击事件等。

// button 示例
<button plain type="primary" @click="handleClick">
  按钮
</button>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件');
    }
  }
};
</script>

三、常用 API 介绍

uni-app 还提供了一些 API，方便开发者调用系统设备相关功能和一些常用功能。

1. uni.showToast(options)

显示消息提示框。

// showToast 示例
uni.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
});

2. uni.showModal(options)

显示模态弹窗。

// showModal 示例
uni.showModal({
  title: '提示',
  content: '确定要删除吗？',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

3. uni.request(options)

发送网络请求。

// request 示例
uni.request({
  url: '/api/user',
  method: 'POST',
  data: {
    name: 'uni-app',
    age: 3
  },
  success: function(res) {
    console.log(res.data);
  }
});

四、总结

本文介绍了 uni-app 平台下常用的组件和 API 的使用方法。通过这些常用组件和接口我们可以方便的构建一个多端兼容的应用程序，在进一步探索中也会涉及到更多高级组件和 API 的使用。