第5章：微信小程序API精讲（下）

微信小程序入门与实战第5章：小程序API精讲（下）本章目录01.设备相关API详解学习系统信息、地理位置、扫码、蓝牙等设备交互API。02.媒体相关API详解掌握图片选择与预览、音视频控制等媒体处理API。03.实战：“随手拍”小程序开发综合运用设备和媒体API，实现拍照上传功能。04.常见问题与总结解答API使用中的常见问题，巩固学习成果。05.课后实操任务布置实操任务，深化理解与应用。学习目标掌握核心API调用，独立完成小程序开发。设备相关API概述与分类设备API分类体系什么是设备API？用于获取设备信息和操作设备硬件，实现小程序与设备的深度交互（如获取型号、定位、扫码、蓝牙连接等）。设备API主要分类系统信息：wx.getSystemInfo,wx.getNetworkType地理位置：wx.getLocation,wx.chooseLocation扫码服务：wx.scanCode蓝牙通信：wx.openBluetoothAdapter,wx.startBluetoothDevicesDiscoveryNFC能力：wx.getHCEState,wx.startHCE系统信息与地理位置APIwx.getSystemInfo用途：获取手机型号、操作系统版本、屏幕尺寸等设备信息，用于适配与优化。wx.getSystemInfo({success:(res)=>{console.log('型号:',res.model);console.log('屏幕宽:',res.screenWidth);}});wx.getLocation用途：获取用户当前地理位置（经纬度）。需在app.json中配置权限声明。wx.getLocation({type:'gcj02',//国测局坐标success:(res)=>{console.log('纬度:',res.latitude);console.log('经度:',res.longitude);}});扫码与蓝牙APIwx.scanCode(扫码识别)用途：调起客户端的扫码界面，快速识别二维码或条形码内容。wx.scanCode({success:(res)=>{console.log('扫码结果:',res.result);}});蓝牙API(基础流程)用途：搜索和连接蓝牙设备，实现小程序与硬件的数据通信。1.初始化：wx.openBluetoothAdapter2.搜索：wx.startBluetoothDevicesDiscovery3.监听：wx.onBluetoothDeviceFound4.连接：wx.createBLEConnection注意：使用蓝牙API前需确保用户授权，并处理蓝牙开关未打开的异常情况。媒体相关API概述与分类什么是媒体API？用于操作图片、音频、视频等媒体资源，实现选择、预览、播放、录制等功能，为小程序提供丰富的多媒体体验。媒体API核心分类图片类APIwx.chooseImage,wx.previewImage,wx.uploadFile音频类APIwx.createAudioContext,wx.playVoice,wx.stopVoice视频类APIwx.createVideoContext,wx.chooseVideo,wx.saveVideo...相机类APIwx.createCameraContext(实时相机控制)图片选择与预览APIwx.chooseImage(选择图片)用途：从相册选择图片或使用相机拍照。常用参数：count(最大数量),sizeType(原图/压缩),sourceType(相册/相机)wx.chooseImage({count:1,sizeType:['original','compressed'],sourceType:['album','camera'],success:(res)=>{consttempFilePaths=res.tempFilePaths;}});wx.previewImage(预览图片)用途：预览图片，支持缩放、保存操作。关键参数：current(当前显示图片),urls(图片链接列表)wx.previewImage({current:tempFilePaths[0],urls:tempFilePaths});音频与视频控制API音频控制(wx.createAudioContext)创建并返回音频上下文对象，用于控制音频的播放、暂停、停止等操作。//获取音频上下文constaudioCtx=wx.createAudioContext('myAudio');audioCtx.play();//播放audioCtx.pause();//暂停视频控制(wx.createVideoContext)创建并返回视频上下文对象，用于控制视频的播放、暂停、全屏等操作。//获取视频上下文constvideoCtx=wx.createVideoContext('myVideo');videoCtx.play();//播放videoCtx.requestFullScreen();//全屏实战案例：“随手拍”小程序流程图核心流程解析点击拍照按钮：用户触发操作入口选择图片/拍照：调用wx.chooseImage获取素材预览图片：调用wx.previewImage展示效果上传图片：调用wx.uploadFile传输至服务器展示图片列表：更新数据并渲染页面总结：通过这个流程，我们综合运用了小程序的媒体API，实现了从本地选择、预览到云端上传的完整闭环。实战案例：“随手拍”小程序开发(WXML/WXSS)WXML结构(视图层)<viewclass="container"><!--拍照按钮--><buttonbindtap="chooseImage">拍照/选择图片</button><!--图片列表--><viewclass="image-list"><imagewx:for={{images}}src={{item}}bindtap="previewImage"></image></view></view>WXSS样式(样式层).container{/*页面内边距*/padding:20rpx;}button{margin-bottom:20rpx;}.image-list{display:flex;flex-wrap:wrap;}.image-listimage{width:150rpx;height:150rpx;margin:10rpx;border-radius:10rpx;}核心逻辑解析：通过wx:for循环渲染图片列表，利用bindtap绑定事件实现拍照与预览功能；样式上采用Flex布局实现图片的自适应排列，配合rpx单位确保多端适配。实战案例：“随手拍”小程序开发(JS逻辑)Page({data:{images:[]},chooseImage(){wx.chooseImage({count:1,success:(res)=>{consttemp=res.tempFilePaths[0];this.setData({images:[...this.data.images,temp]});}});},previewImage(e){wx.previewImage({current:e.currentTarget.dataset.src});}});选择图片(chooseImage)调用wx.chooseImage获取临时路径，更新data中的images数组预览图片(previewImage)接收点击事件参数，调用wx.previewImage实现大图预览上传图片(uploadImage)调用wx.uploadFile上传至服务器，需替换真实接口URL注：实际项目开发中，上传图片成功后需解析服务器返回的永久链接并更新页面数据。常见问题排查Q1:调用wx.getLocation提示用户拒绝授权？检查是否在app.json中配置了permission权限声明，并引导用户在小程序设置中开启位置权限。Q2:wx.chooseImage选择图片失败？检查用户是否授权了相册访问权限，或者是否在模拟器中测试（部分功能在模拟器中可能受限）。Q3:蓝牙连接失败？确保蓝牙模块已初始化成功，设备已开启蓝牙，并且小程序有权限访问蓝牙。Q4:wx.uploadFile上传图片失败？检查服务器地址是否正确，是否为HTTPS协议，以及服务器是否正常运行。同时需配置合法域名。提示：遇到问题时，仔细检查代码逻辑，并参考微信官方文档，是解决问题的关键。本章总结设备相关API的使用掌握了获取系统信息、地理位置、扫码和蓝牙连接的方法，实现设备交互能力。媒体相关API的使用学会了选择图片、预览图片、控制音视频播放的技巧，丰富多媒体体验。“随手拍”小程序实战综合运用设备和媒体API，实现了完整的拍照上传功能，巩固开发能力。常见问题处理方案掌握了权限配置、域名配置等常见问题的解决方案，提升开发效率。课后实操任