【小程序开发必备】微信小程序常用API全介绍,附示例代码和使用场景

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
云原生网关 MSE Higress,422元/月
应用实时监控服务-应用监控,每月50GB免费额度
简介: 本篇博文介绍了微信小程序常用API,包括网络请求、数据缓存、交互反馈、设备、媒体、界面、开放接口等方面。每个API都附有详细的介绍和示例代码,以及使用场景。这些API可以帮助小程序开发者快速实现各种功能和交互效果,是小程序开发的必备工具。无论是初学者还是有一定经验的开发者,都能从本篇博文中学到很多实用的技巧和知识。

image.png

微信小程序提供了丰富的API,以下是全部常用API的介绍、示例代码和使用场景:

1.网络请求相关API

1.1 wx.request

API介绍:发起网络请求,可以用来获取服务器数据。

示例代码:

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

使用场景:当小程序需要向服务器请求数据时,可以使用该API。

1.2 wx.uploadFile

API介绍:上传文件。

示例代码:

wx.uploadFile({
   
  url: 'https://api.example.com/upload',
  filePath: 'filePath',
  name: 'file',
  success(res) {
   
    console.log(res.data)
  }
})

使用场景:当小程序需要上传文件时,可以使用该API。

1.3 wx.downloadFile

API介绍:下载文件。

示例代码:

  url: 'https://example.com/image',
  success(res) {
   
    console.log(res.tempFilePath)
  }
})

使用场景:当小程序需要下载文件时,可以使用该API。

1.4 wx.connectSocket

API介绍:创建 WebSocket 连接。

示例代码:

wx.connectSocket({
   
  url: 'wss://example.com/socket',
  success() {
   
    console.log('WebSocket 连接成功')
  }
})

使用场景:当小程序需要使用 WebSocket 进行实时通讯时,可以使用该API。

2.页面跳转相关API

2.1 wx.navigateTo

API介绍:用于跳转到应用内的页面。

示例代码:

wx.navigateTo({
   
  url: '/pages/detail/detail?id=123'
})

使用场景:当用户点击列表项时,跳转到该项的详情页面。

2.2 wx.redirectTo

API介绍:关闭当前页面,跳转到应用内的某个页面。

示例代码:

  url: '/pages/index/index'
})

使用场景:当用户提交表单后,跳转到成功页面。

2.3 wx.reLaunch

API介绍:关闭所有页面,打开应用内的某个页面。

示例代码:

wx.reLaunch({
   
  url: '/pages/index/index'
})

使用场景:当用户点击首页按钮时,关闭所有页面,返回首页。

2.4 wx.navigateBack

API介绍:关闭当前页面,返回上一页面或多级页面。

示例代码:

wx.navigateBack({
   
  delta: 1
})

使用场景:当用户点击返回按钮时,返回上一页面。

3.数据缓存相关API

3.1 wx.getStorageSync

API介绍:从本地缓存中获取数据。

示例代码:

let value = wx.getStorageSync('key')

使用场景:当小程序需要从本地缓存中获取数据时,可以使用该API。

3.2 wx.setStorageSync

API介绍:将数据存储到本地缓存中。

示例代码:

wx.setStorageSync('key', 'value')

使用场景:当小程序需要将数据存储到本地缓存中时,可以使用该API。

3.3 wx.clearStorageSync

API介绍:清空本地缓存。

示例代码:

wx.clearStorageSync()

使用场景:当小程序需要清空本地缓存时,可以使用该API。

4.交互反馈相关API

4.1 wx.showToast

API介绍:显示消息提示框。

示例代码:

wx.showToast({
   
  title: '操作成功',
  icon: 'success'
})

使用场景:当小程序需要在操作成功后给用户提示时,可以使用该API。

4.2 wx.showLoading

API介绍:显示 loading 提示框。

示例代码:

wx.showLoading({
   
  title: '加载中'
})

使用场景:当小程序需要在加载数据时给用户提示时,可以使用该API。

4.3 wx.hideToast

API介绍:隐藏消息提示框。

示例代码:

wx.hideToast()

使用场景:当小程序需要隐藏消息提示框时,可以使用该API。

4.4 wx.hideLoading

API介绍:隐藏 loading 提示框。

示例代码:

wx.hideLoading()

使用场景:当小程序需要隐藏 loading 提示框时,可以使用该API。

5.设备相关API

5.1 wx.getSystemInfo

API介绍:获取系统信息。

示例代码:

wx.getSystemInfo({
   
  success(res) {
   
    console.log(res.platform)
  }
})

使用场景:当小程序需要获取系统信息时,可以使用该API。

5.2 wx.getNetworkType

API介绍:获取网络类型。

示例代码:

wx.getNetworkType({
   
  success(res) {
   
    console.log(res.networkType)
  }
})

使用场景:当小程序需要获取当前网络类型时,可以使用该API。

5.3 wx.getBatteryInfo

API介绍:获取设备电量信息。

示例代码:

wx.getBatteryInfo({
   
  success(res) {
   
    console.log(res.level)
  }
})

使用场景:当小程序需要获取设备电量信息时,可以使用该API。

5.4 wx.vibrateShort

API介绍:使手机振动。

示例代码:

wx.vibrateShort()

使用场景:当小程序需要在用户操作时给出震动反馈时,可以使用该API。

6.媒体相关API

6.1 wx.chooseImage

API介绍:从相册或相机中选择图片或视频。

示例代码:

wx.chooseImage({
   
  count: 1,
  success(res) {
   
    console.log(res.tempFilePaths)
  }
})

使用场景:当小程序需要获取用户选择的图片或视频时,可以使用该API。

6.2 wx.previewImage

API介绍:预览图片。

示例代码:

wx.previewImage({
   
  urls: ['https://example.com/image.jpg']
})

使用场景:当小程序需要预览图片时,可以使用该API。

6.3 wx.chooseVideo

API介绍:从相册或相机中选择视频。

示例代码:

wx.chooseVideo({
   
  sourceType: ['album', 'camera'],
  success(res) {
   
    console.log(res.tempFilePath)
  }
})

使用场景:当小程序需要获取用户选择的视频时,可以使用该API。

6.4 wx.createCameraContext

API介绍:创建 camera 上下文 CameraContext 对象。

示例代码:

const cameraContext = wx.createCameraContext()

cameraContext.takePhoto({
   
  success(res) {
   
    console.log(res.tempImagePath)
  }
})

使用场景:当小程序需要在页面上显示相机组件并进行拍照时,可以使用该API。

7.界面相关API

7.1 wx.navigateTo

API介绍:保留当前页面,跳转到应用内的某个页面。

示例代码:

wx.navigateTo({
   
  url: '/pages/detail/detail'
})

使用场景:当小程序需要跳转到其他页面时,可以使用该API。

7.2 wx.redirectTo

API介绍:关闭当前页面,跳转到应用内的某个页面。

示例代码:

wx.redirectTo({
   
  url: '/pages/index/index'
})

使用场景:当小程序需要关闭当前页面并跳转到其他页面时,可以使用该API。

7.3 wx.switchTab

API介绍:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

示例代码:

wx.switchTab({
   
  url: '/pages/index/index'
})

使用场景:当小程序需要跳转到 tabBar 页面时,可以使用该API。

7.4 wx.navigateBack

API介绍:关闭当前页面,返回上一页面或多级页面。

示例代码:

wx.navigateBack({
   
  delta: 1
})

使用场景:当小程序需要返回上一页面或多级页面时,可以使用该API。

8.开放接口相关API

8.1 wx.login

API介绍:调用接口获取登录凭证(code)。

示例代码:

wx.login({
   
  success(res) {
   
    console.log(res.code)
  }
})

使用场景:当小程序需要获取用户登录凭证时,可以使用该API。

8.2 wx.getUserInfo

API介绍:获取用户信息。

示例代码:

wx.getUserInfo({
   
  success(res) {
   
    console.log(res.userInfo)
  }
})

使用场景:当小程序需要获取用户信息时,可以使用该API。

8.3 wx.requestPayment

API介绍:发起微信支付。

示例代码:

wx.requestPayment({
   
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success(res) {
    },
  fail(res) {
    }
})

使用场景:当小程序需要发起微信支付时,可以使用该API。

总结

以上是微信小程序常用API的介绍和示例代码,这些API包括网络请求、数据缓存、交互反馈、设备、媒体、界面、开放接口等方面,可以帮助开发者快速实现各种功能和交互效果。当然,实际开发中,开发者还需要根据具体需求选择合适的API来使用。

希望本文对初学者有所帮助,如果有任何问题或建议,欢迎留言讨论。


✍创作不易,求关注😄,点赞👍,收藏⭐️

相关文章
|
2天前
|
API 数据安全/隐私保护 UED
探索鸿蒙的蓝牙A2DP与访问API:从学习到实现的开发之旅
在掌握了鸿蒙系统的开发基础后,我挑战了蓝牙功能的开发。通过Bluetooth A2DP和Access API,实现了蓝牙音频流传输、设备连接和权限管理。具体步骤包括:理解API作用、配置环境与权限、扫描并连接设备、实现音频流控制及动态切换设备。最终,我构建了一个简单的蓝牙音频播放器,具备设备扫描、连接、音频播放与停止、切换输出设备等功能。这次开发让我对蓝牙技术有了更深的理解,也为未来的复杂项目打下了坚实的基础。
82 58
探索鸿蒙的蓝牙A2DP与访问API:从学习到实现的开发之旅
|
1天前
|
供应链 搜索推荐 API
1688榜单商品详细信息API接口的开发、应用与收益
1688作为全球知名的B2B电商平台,为企业提供丰富的商品信息和交易机会。为满足企业对数据的需求,1688开发了榜单商品详细信息API接口,帮助企业批量获取商品详情,应用于信息采集、校验、同步与数据分析等领域,提升运营效率、优化库存管理、精准推荐、制定市场策略、降低采购成本并提高客户满意度。该接口通过HTTP请求调用,支持多种应用场景,助力企业在电商领域实现可持续发展。
23 4
|
10天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
8天前
|
监控 供应链 搜索推荐
阿里妈妈商品详情API接口:开发、应用与收益的深度剖析
阿里妈妈是阿里巴巴旗下的数字营销平台,其商品详情API接口为开发者提供了获取淘宝、天猫等电商平台商品详细信息的工具。本文介绍了该接口的开发流程、应用场景及带来的收益,揭示了其在电商生态中的重要地位。
61 6
|
8天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
52 6
|
10天前
|
监控 搜索推荐 API
京东商品详情API接口的开发、应用与收益探索
在数字化和互联网高速发展的时代,京东通过开放商品详情API接口,为开发者、企业和商家提供了丰富的数据源和创新空间。本文将探讨该API接口的开发背景、流程、应用场景及带来的多重收益,包括促进生态系统建设、提升数据利用效率和推动数字化转型等。
36 3
|
15天前
|
供应链 搜索推荐 API
探索1688榜单商品详细信息API接口:开发、应用与收益
本文深入探讨了1688榜单商品详细信息API接口的开发与应用,涵盖接口概述、开发条件、调用方法及数据处理等内容。该API帮助企业高效获取1688平台商品信息,应用于商品信息采集、校验、同步与数据分析等领域,有效提升了企业的运营效率、库存管理、销售转化率及市场策略制定能力,降低了采购成本,提升了客户满意度。
37 9
|
15天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
49 8
|
11天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
4天前
|
存储 搜索推荐 API
小红书笔记详情API接口的开发、应用与收益
小红书笔记详情API接口为开发者、企业和内容创作者提供了获取平台丰富资源的通道。通过该接口,用户可以提取笔记的详细信息(如标题、正文、标签等),并应用于市场调研、竞品分析、内容创作、电商推荐等多个领域。这不仅有助于提升品牌影响力和优化用户体验,还能挖掘商业机会,促进内容创新,增强用户互动与社群凝聚力。总之,小红书笔记详情API接口为企业和个人在社交媒体领域探索新增长点提供了重要工具。
34 0