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

本文涉及的产品
可观测可视化 Grafana 版,10个用户账号 1个月
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 本篇博文介绍了微信小程序常用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来使用。

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


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

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
22天前
|
监控 小程序 安全
小程序的 API 做了什么处理,能够做到全局变量的隐藏
【10月更文挑战第23天】小程序的 API 通过运行环境隔离、作用域限制、数据绑定机制、事件机制、状态管理、代码封装和模块化、安全策略和权限控制以及运行时监控和检测等多种手段来实现全局变量的隐藏。这些措施共同作用,确保了小程序的安全、稳定和可靠运行,同时也提高了开发效率和代码质量。
|
20天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
20天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。
|
20天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
1月前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
1月前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
29天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
30 0
|
1月前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
下一篇
无影云桌面