uniapp的api用法大全

  1. 页面生命周期API

uniApp中的页面生命周期API可以帮助开发者在页面的不同生命周期中执行相应的操作。常用的页面生命周期API包括:onLoad、onShow、onReady、onHide、onUnload等。其中,onLoad在页面加载时触发,onShow在页面显示时触发,onReady在页面初次渲染完成时触发,onHide在页面隐藏时触发,onUnload在页面卸载时触发。

使用示例:

javascript 复制代码
export default {
  onLoad() {
    console.log('页面加载');
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面渲染完成');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  }
}
  1. 导航API

uniApp中的导航API可以帮助开发者实现页面之间的跳转和传参。常用的导航API包括:navigateTo、redirectTo、switchTab、reLaunch等。其中,navigateTo用于跳转到非tabBar页面,redirectTo用于关闭当前页面并跳转到非tabBar页面,switchTab用于跳转到tabBar页面,reLaunch用于关闭所有并跳转到非tabBar页面。

使用示例:

javascript 复制代码
uni.navigateTo({
  url: 'pages/detail/detail?id=1'
});

uni.redirectTo({
  url: 'pages/login/login'
});

uni.switchTab({
  url: 'pages/home/home'
});

uni.reLaunch({
  url: 'pages/index/index'
});
  1. 数据存储API

uniApp中的数据存储API可以帮助开发者实现数据的存储和读取。常用的数据存储API包括:uni.setStorageSync、uni.getStorageSync、uni.removeStorageSync等。其中,uni.setStorageSync用于将数据存储到本地缓存中,uni.getStorageSync用于从本地缓存中读取数据,uni.removeStorageSync用于从本地缓存中移除数据。

使用示例:

javascript 复制代码
uni.setStorageSync('name', '张三');

let name = uni.getStorageSync('name');

uni.removeStorageSync('name');
  1. 网络请求API

uniApp中的网络请求API可以帮助开发者实现与后台接口的交互。常用的网络请求API包括:uni.request、uni.uploadFile、uni.downloadFile等。其中,uni.request用于发送网络请求,uni.uploadFile用于上传文件,uni.downloadFile用于下载文件。

使用示例:

javascript 复制代码
uni.request({
  url: 'https://api.example.com/login',
  method: 'POST',
  data: {
    username: 'admin',
    password: '123456'
  },
  success(res) {
    console.log(res.data);
  },
  fail(err) {
    console.log(err);
  }
});

uni.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: 'path/to/file',
  name: 'file',
  success(res) {
    console.log(res.data);
  },
  fail(err) {
    console.log(err);
  }
});

uni.downloadFile({
  url: 'https://api.example.com/download',
  success(res) {
    console.log(res.tempFilePath);
  },
  fail(err) {
    console.log(err);
  }
});
  1. 图片操作API

uniApp中的图片操作API可以帮助开发者实现图片的选择、压缩和预览等功能。常用的图片操作API包括:uni.chooseImage、uni.compressImage、uni.previewImage等。其中,uni.chooseImage用于选择图片,uni.compressImage用于压缩图片,uni.previewImage用于预览图片。

使用示例:

javascript 复制代码
uni.chooseImage({
  count: 1,
  success(res) {
    console.log(res.tempFilePaths);
  },
  fail(err) {
    console.log(err);
  }
});

uni.compressImage({
  src: 'path/to/image',
  quality: 80,
  success(res) {
    console.log(res.tempFilePath);
  },
  fail(err) {
    console.log(err);
  }
});

uni.previewImage({
  urls: ['path/to/image1', 'path/to/image2'],
  current: 'path/to/image1',
  success(res) {
    console.log(res);
  },
  fail(err) {
    console.log(err);
  }
});
  1. 地理位置API

uniApp中的地理位置API可以帮助开发者获取用户的地理位置信息。常用的地理位置API包括:uni.getLocation、uni.openLocation等。其中,uni.getLocation用于获取用户的地理位置信息,uni.openLocation用于打开地图并显示指定位置。

使用示例:

javascript 复制代码
uni.getLocation({
  success(res) {
    console.log(res.latitude, res.longitude);
  },
  fail(err) {
    console.log(err);
  }
});

uni.openLocation({
  latitude: 39.908823,
  longitude: 116.397470,
  name: '北京天安门',
  address: '北京市东城区东长安街',
  success(res) {
    console.log(res);
  },
  fail(err) {
    console.log(err);
  }
});
  1. 设备信息API

uniApp中的设备信息API可以帮助开发者获取设备的基本信息。常用的设备信息API包括:uni.getSystemInfo、uni.getNetworkType、uni.getBatteryInfo等。其中,uni.getSystemInfo用于获取设备的基本信息,uni.getNetworkType用于获取网络类型,uni.getBatteryInfo用于获取电池信息。

使用示例:

javascript 复制代码
uni.getSystemInfo({
  success(res) {
    console.log(res.model, res.platform);
  },
  fail(err) {
    console.log(err);
  }
});

uni.getNetworkType({
  success(res) {
    console.log(res.networkType);
  },
  fail(err) {
    console.log(err);
  }
});

uni.getBatteryInfo({
  success(res) {
    console.log(res.level, res.isCharging);
  },
  fail(err) {
    console.log(err);
  }
});
相关推荐
当时只道寻常4 分钟前
Vue3 集成 NProgress 进度条:从入门到精通
前端·vue.js
kyriewen5 分钟前
React性能优化:从“卡成狗”到“丝般顺滑”的5个秘诀
前端·react.js·性能优化
米丘5 分钟前
Vue 3.x 单文件组件(SFC)模板编译过程解析
前端·vue.js·编译原理
helloweilei7 分钟前
Web Streams 简介
前端·javascript
悟空瞎说7 分钟前
Flutter热更新 Shorebird CodePush 原理、实现细节及费用说明
前端·flutter
didadida2628 分钟前
从“不存在”的重复请求,聊到 Web 存储的深坑
前端
xiaominlaopodaren9 分钟前
Three.js 渲染原理-透明渲染为什么这么难
前端
米丘10 分钟前
vue3.x 内置指令有哪些?
前端·vue.js
米丘11 分钟前
Vue 3.x 模板编译优化:静态提升、预字符串化与 Block Tree
前端·vue.js·编译原理
一川_12 分钟前
前端驱动工业报警:基于 WebSocket 与网关的三色蜂鸣灯实时报警系统实战
javascript·websocket