第10章 微信小程序核心API

第10章微信小程序核心API小程序API介绍设备与系统信息路由与界面交互设备与传感器多媒体本地数据缓存010204050306小程序API介绍微信小程序核心APIAPI（全称ApplicationProgrammingInterface，简称API）是一些预先定义的应用程序接口，或者是指软件系统不同模块之间衔接的约定。我们在实际项目开发中的API通常有两种含义：一种是项目中预先定义好的实现一系列特定功能的函数；另一种是在B/S架构下的HTTP接口，客户端发送HTTP请求，调用服务端的功能后再得到执行结果的响应。微信小程序核心API基础模块API网络模块API路由模块API界面交互API媒体模块API系统文件API设备模块API数据缓存API开放接口API微信小程序一共提供了九大模块的API函数，这九个模块分别是：设备与系统信息设备与系统信息wx.getWindowInfo()方法，可以获取窗口信息。属性如下：字段名类型说明pixelRationumber设备像素比screenWidthnumber屏幕宽度，单位pxscreenHeightnumber屏幕高度，单位pxwindowWidthnumber可使用窗口宽度，单位pxwindowHeightnumber可使用窗口高度，单位pxstatusBarHeightnumber状态栏的高度，单位pxsafeAreaObject在竖屏正方向下的安全区域screenTopnumber窗口上边缘的y值设备与系统信息获取小程序窗口信息的示例代码如下：Page({onReady(){constwindowInfo=wx.getWindowInfo()console.log(windowInfo.pixelRatio)//设备像素比console.log(windowInfo.screenWidth)//屏幕宽度console.log(windowInfo.screenHeight)//屏幕高度console.log(windowInfo.windowWidth)//可使用窗口宽度console.log(windowInfo.windowHeight)//可使用窗口高度console.log(windowInfo.statusBarHeight)//状态栏的高度console.log(windowInfo.safeArea)//在竖屏正方向下的安全区域console.log(windowInfo.screenTop)//窗口上边缘的y值}})设备与系统信息wx.getWindowInfo()方法，可以获取窗口信息。可以获取设备的品牌、操作系统即设备型号等信息；wx.getSystemSetting()获取设备的设置信息，可以获取设备的蓝牙开关状态、地理位置开关状态、Wifi开关状态以及当前的设备方向为竖屏还是横屏等设备的配置信息。其他获取系统信息的方法：设备与系统信息Page({onReady(){//获取设备的基础信息constdeviceInfo=wx.getDeviceInfo()console.log(deviceInfo.abi)//二进制接口类型console.log(deviceInfo.benchmarkLevel)//设备性能等级console.log(deviceInfo.brand)//设备品牌console.log(deviceInfo.model)//设备型号console.log(deviceInfo.platform)//客户端平台console.log(deviceInfo.system)//操作系统及版本//获取设备的配置信息constsystemSetting=wx.getSystemSetting()console.log(systemSetting.bluetoothEnabled)//蓝牙开关状态console.log(systemSetting.deviceOrientation)//设备方向console.log(systemSetting.locationEnabled)//地理位置开关状态console.log(systemSetting.wifiEnabled)//Wifi开关状态}})小程序获取设备信息的示例代码如下：设备与系统信息Page({onReady(){constappBaseInfo=wx.getAppBaseInfo()console.log(appBaseInfo.SDKVersion)//获取客户端基础库版本console.log(appBaseInfo.enableDebug)//是否已打开调试console.log(appBaseInfo.host)//获取小程序运行的宿主环境console.log(appBaseInfo.language)//获取微信设置的语言console.log(appBaseInfo.version)//获取微信版本号console.log(appBaseInfo.theme)//获取系统当前主题}})获取用户微信APP基础信息的示例代码如下：路由与界面交互路由与界面交互Page({onReady(){wx.request({url:'',//https地址data:{},//请求参数header:{//请求头信息'content-type':'application/json'},success(res){//res为请求成功后的响应对象console.log(res);}})}})wx.request()发送HTTPS请求，示例代码如下：路由与界面交互Page({onReady(){wx.chooseImage({success(res){consttempFilePaths=res.tempFilePathswx.uploadFile({url:'',//要上传的服务器接口地址filePath:tempFilePaths[0],//要上传文件资源的路径name:'file',//文件对应的keyformData:{//HTTPS请求中的额外参数'user':'test'},success(res){//res为上传成功后的响应对象constdata=res.data}})}})}})wx.uploadFile()文件上传，示例代码如下：路由与界面交互Page({onReady(){wx.downloadFile({url:'',//要下载文件的URL地址success(res){//res为响应对象if(res.statusCode===200){wx.playVoice({filePath:res.tempFilePath})}}})}})wx.downloadFile()文件下载，示例代码如下：路由与界面交互wx.switchTab()，跳转到tabBar页面，并关闭其他所有非tabBar页面；wx.reLaunch()，关闭所有页面，打开到应用内的某个页面；wx.redirectTo()，关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面；wx.navigateTo()，保留当前页面，跳转到应用内的某个页面；wx.navigateBack()，关闭当前页面，返回上一页面或多级页面。页面跳转的API：路由与界面交互//index.wxml<buttonbindtap="onNavigateTo">保留当前页面跳转</button>页面跳转的API示例代码：//index.jsPage({onNavigateTo(){wx.navigateTo({url:'../logs/logs',success(){console.log('跳转成功');},fail(){console.log('跳转失败');}})},})路由与界面交互wx.switchTab()，跳转到tabBar页面，并关闭其他所有非tabBar页面；wx.reLaunch()，关闭所有页面，打开到应用内的某个页面；wx.redirectTo()，关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面；wx.navigateTo()，保留当前页面，跳转到应用内的某个页面；wx.navigateBack()，关闭当前页面，返回上一页面或多级页面。页面跳转的API：路由与界面交互wx.showToast()，页面消息轻提示；wx.showModal()，页面模态对话框；wx.showLoading()，显示loading加载的提示框；wx.showActionSheet()，显示底部操作菜单；wx.startPullDownRefresh()下拉刷新；wx.stopPullDownRefresh()停止下拉刷新。页面交互与反馈的API：路由与界面交互Page({onReady(){wx.showToast({title:'页面加载成功',icon:'success',duration:3000})}})页面交互与反馈的API，示例代码：设备与传感器设备与传感器wx.saveFile()，保存文件到本地；wx.removeSavedFile()，删除本地缓存文件；wx.openDocument()，新开页面打开文档；wx.getSavedFileList()，获取该小程序下已保存的本地缓存文件列表；wx.getSavedFileInfo()，获取本地文件的文件信息；wx.getFileSystemManager()，获取全局唯一的文件管理器；wx.getFileInfo()，获取文件信息。文件系统的API：设备与传感器wx.onNetworkWeakChange()，监听弱网状态变化事件；wx.onNetworkStatusChange()，监听网络状态变化事件；wx.offNetworkWeakChange()，取消监听弱网状态变化事件；wx.offNetworkStatusChange()，取消监听网络状态变化事件；wx.getNetworkType()，获取网络类型；wx.getLocalIPAddress()，获取局域网IP地址。获取设备网络信息API：设备与传感器wx.setVisualEffectOnCapture()，设置截屏/录屏时屏幕表现；wx.setScreenBrightness()，设置屏幕亮度；wx.setKeepScreenOn()，设置是否保持常亮状态；wx.onUserCaptureScreen()，监听用户主动截屏事件；wx.offUserCaptureScreen()，用户主动截屏事件；wx.getScreenBrightness()，获取屏幕亮度。获取屏幕信息API：多媒体多媒体CameraContext.onCameraFrame(onCameraFrameCallbackcallback)，用于获取Camera实时帧数据；CameraContext.takePhoto(Objectobject)，用于拍摄照片；CameraContext.setZoom(Objectobject)，用于设置缩放级别；CameraContext.startRecord(Objectobject)，开始屏幕录像；CameraContext.stopRecord(Objectobject)，结束屏幕录像。多媒体操作的API：多媒体//index.wxml<cameradevice-position="back"flash="off"binderror="error"style="width:100%;height:300px;"></camera><buttontype="primary"bindtap="takePhoto">拍照</button><view>预览</view><imagemode="widthFix"src="{{src}}"></image>拍摄照片示例代码：//index.jsPage({takePhoto(){constctx=wx.createCameraContext()ctx.takePhoto({quality:'high',