uni-app的常用组件和API

一、常用组件

• 视图容器：view、scroll-view、swiper、slider、picker、progress、badge、toast
• 表单输入框：input、textarea、checkbox、radio
• 布局：grid-view、list
• 导航栏：navbar、tabbar
• 媒体播放：video、audio
• 路由与页面跳转：navigation
• 地图：map

以下是一个简单的uni-app表单组件代码示例：

        在表单组件中，我们使用v-model指令来实现表单项与数据之间的双向绑定。当用户点击提交按钮时，会触发submitForm方法。在该方法中，我们将表单项的值封装成一个formData对象，并通过uni.request方法向服务器发送POST请求。如果请求成功，则在页面上弹出一个Toast提示框表示提交成功；如果请求失败，则同样弹出一个Toast提示框表示提交失败。

<template>
  <view class="form-container">
    <view class="form-item">
      <text>姓名：</text>
      <input v-model="name" type="text" placeholder="请输入姓名" />
    </view>
    <view class="form-item">
      <text>年龄：</text>
      <input v-model="age" type="number" placeholder="请输入年龄" />
    </view>
    <button @click="submitForm">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 表单项1的值
      age: '', // 表单项2的值
    };
  },
  methods: {
    submitForm() {
      const formData = {
        name: this.name, // 将表单项1的值赋给formData对象的name属性
        age: this.age, // 将表单项2的值赋给formData对象的age属性
      };
      uni.request({
        url: 'https://example.com/api/submit', // 要提交数据的接口地址
        method: 'POST', // HTTP请求方法
        data: formData, // 要提交的数据对象
        success: (res) => {
          uni.showToast({
            title: '提交成功', // Toast提示框标题
            icon: 'success', // Toast提示框图标类型
            duration: 2000, // Toast提示框显示时间(毫秒)
            success: () => {}, // 点击提示框关闭时执行的回调函数(可选)
            fail: () => {}, // 点击提示框关闭时执行的回调函数(可选)
            complete: () => {}, // 点击提示框关闭时执行的回调函数(可选)
          });
        },
        fail: (err) => {
          uni.showToast({
            title: '提交失败', // Toast提示框标题
            icon: 'none', // Toast提示框图标类型
            duration: 2000, // Toast提示框显示时间(毫秒)
            success: () => {}, // 点击提示框关闭时执行的回调函数(可选)
            fail: () => {}, // 点击提示框关闭时执行的回调函数(可选)
            complete: () => {}, // 点击提示框关闭时执行的回调函数(可选)
          });
        },
      });
    },
  },
};
</script>

组件的官方文档地址：https://uniapp.dcloud.net.cn/component/

二、常用API 

        uni-app的JS API包括标准ECMAScript JS API和uni扩展API。标准ECMAScript JS是最基本的JS,浏览器根据它扩展窗口、文档、导航器等对象。小程序还根据标准JS扩展各种wx.xxx、my.xxx、swan.xxx API。

以下是一些常用的uni-app API:

• 生命周期函数：onLoad、onShow、onReady、onHide、onUnload
• 页面跳转：navigateTo、redirectTo、switchTab、reLaunch
• 网络请求：uni.request、uni.downloadFile
• 数据缓存：uni.setStorageSync、uni.getStorageSync、uni.removeStorageSync
• 设备信息：uni.getSystemInfo、uni.getConnectedBluetoothDevices
• 位置信息：uni.getLocation、uni.chooseLocation
• 摄像头相关：uni.chooseImage、uni.startRecord、uni.stopRecord、uni.pauseVideo
• 媒体播放：uni.createInnerAudioContext、uni.createVideoContext 

以下是一个简单的uni-app打开本地图片的示例：

        在模板中定义了一个按钮，当用户点击该按钮时，会触发chooseImage方法。在该方法中，我们使用uni.chooseImage方法来让用户选择一张或多张图片。在成功获取到图片后，我们使用uni.getImageInfo方法来获取图片的信息并打印出来。如果选择图片失败或者获取图片信息失败，则会在控制台输出相应的错误信息。

<template>
  <view>
    <button @click="chooseImage">选择图片</button>
  </view>
</template>

<script>
export default {
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1, // 每次最多可以选择的图片张数，默认为9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          uni.getImageInfo({
            src: res.tempFilePaths[0], // 要获取信息的图片路径
            success: (infoRes) => {
              console.log('图片信息：', infoRes);
            },
            fail: (err) => {
              console.error('获取图片信息失败：', err);
            },
          });
        },
        fail: (err) => {
          console.error('选择图片失败：', err);
        },
      });
    },
  },
};
</script>

 API的官方文档地址：https://uniapp.dcloud.net.cn/api/