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

您所在的位置：网站首页 › 关于猫咪的微信小程序有哪些 › 【小程序开发必备】微信小程序常用API全介绍，附示例代码和使用场景

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

2024-06-18 09:19| 来源: 网络整理| 查看: 265

文章目录人工智能福利文章1.网络请求相关API1.1 wx.request1.2 wx.uploadFile1.3 wx.downloadFile1.4 wx.connectSocket 2.页面跳转相关API2.1 wx.navigateTo2.2 wx.redirectTo2.3 wx.reLaunch2.4 wx.navigateBack 3.数据缓存相关API3.1 wx.getStorageSync3.2 wx.setStorageSync3.3 wx.clearStorageSync 4.交互反馈相关API4.1 wx.showToast4.2 wx.showLoading4.3 wx.hideToast4.4 wx.hideLoading 5.设备相关API5.1 wx.getSystemInfo5.2 wx.getNetworkType5.3 wx.getBatteryInfo5.4 wx.vibrateShort 6.媒体相关API6.1 wx.chooseImage6.2 wx.previewImage6.3 wx.chooseVideo6.4 wx.createCameraContext 7.界面相关API7.1 wx.navigateTo7.2 wx.redirectTo7.3 wx.switchTab7.4 wx.navigateBack 8.开放接口相关API8.1 wx.login8.2 wx.getUserInfo8.3 wx.requestPayment 总结脑筋急转弯小程序抢先体验程序员专属工具箱请添加图片描述在这里插入图片描述

✍创作者：全栈弄潮儿 🏡 个人主页：全栈弄潮儿的个人主页 🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区 📙 专栏地址：小程序从入门到精通在这里插入图片描述

人工智能福利文章【分享几个国内免费可用的ChatGPT镜像】【10几个类ChatGPT国内AI大模型】【用《文心一言》1分钟写一篇博客简直yyds】【用讯飞星火大模型1分钟写一个精美的PPT】

微信小程序提供了丰富的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来使用。

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

脑筋急转弯小程序抢先体验

请添加图片描述

程序员专属工具箱

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

【本文地址】

公司简介

联系我们