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

文章目录

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

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

写在最后

✨原创不易，希望各位大佬多多支持。

👍点赞，你的认可是我创作的动力。

⭐️收藏，感谢你对本文的喜欢。

✏️评论，你的反馈是我进步的财富。