文章目录
- 1.网络请求相关API
-
- 1.1 wx.request
- 1.2 wx.uploadFile
- 1.3 wx.downloadFile
- 1.4 wx.connectSocket
- 2.页面跳转相关API
-
- 2.1 wx.navigateTo
- 2.2 wx.redirectTo
- 2.3 wx.reLaunch
- 2.4 wx.navigateBack
- 3.数据缓存相关API
-
- 3.1 wx.getStorageSync
- 3.2 wx.setStorageSync
- 3.3 wx.clearStorageSync
- 4.交互反馈相关API
-
- 4.1 wx.showToast
- 4.2 wx.showLoading
- 4.3 wx.hideToast
- 4.4 wx.hideLoading
- 5.设备相关API
-
- 5.1 wx.getSystemInfo
- 5.2 wx.getNetworkType
- 5.3 wx.getBatteryInfo
- 5.4 wx.vibrateShort
- 6.媒体相关API
-
- 6.1 wx.chooseImage
- 6.2 wx.previewImage
- 6.3 wx.chooseVideo
- 6.4 wx.createCameraContext
- 7.界面相关API
-
- 7.1 wx.navigateTo
- 7.2 wx.redirectTo
- 7.3 wx.switchTab
- 7.4 wx.navigateBack
- 8.开放接口相关API
-
- 8.1 wx.login
- 8.2 wx.getUserInfo
- 8.3 wx.requestPayment
- 总结
- 写在最后
微信小程序提供了丰富的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来使用。
希望本文对初学者有所帮助,如果有任何问题或建议,欢迎留言讨论。
写在最后
✨原创不易,希望各位大佬多多支持。
👍点赞,你的认可是我创作的动力。
⭐️收藏,感谢你对本文的喜欢。
✏️评论,你的反馈是我进步的财富。