微信小程序开发图解案例第4章课件.pptx

1、4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.1 请求服务器数据APIwx.request是用来请求服务器数据的API，它发起的是HTTPS请求，同时它需要在微信公众平台配置HTTPS服务器域名，一个月内可申请3次修改，否则在有AppID创建的项目无法使用wx.request请求服务器数据

2、的API，WebSocket会话、文件上传下载服务器域名都是如此，配置服务器域名如图所示。4.1 请求服务器数据APIwx.request(object)参数说明如表所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.2.1wx.uploadFile文件上传wx.uploadFile(ob

3、ject)参数说明如表所示。4.2.2wx.downloadFile文件下载wx.uploadFile是文件上传的API，wx.downloadFile是文件下载的API，正好相反，它是从服务器获得数据，将数据下载到微信小程序客户端本地，参数说明如表所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分

4、享API4.3 WebSocket会话APIWebSocket会话用来创建一个会话连接，创建完会话连接后可以进行通信，如同微信聊天和QQ聊天一样。它会用到以下7个API的使用。1. wx.connectSocket(OBJECT)创建一个会话连接。2. wx.onSocketOpen(CALLBACK)监听WebSocket连接打开事件。3. wx.onSocketError(CALLBACK)监听WebSocket错误。4. wx.sendSocketMessage(OBJECT)发送数据。5. wx.onSocketMessage(CALLBACK) 监听WebSocket接受到服务器的消

5、息事件。6. wx.closeSocket()关闭WebSocket连接。7. wx.onSocketClose(CALLBACK)监听WebSocket关闭。4.3 WebSocket会话APIwx.connectSocket(object)参数说明如表所示。4.3 WebSocket会话APIwx. sendSocketMessage (object)参数说明如表所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1

6、请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.4.1wx.chooseImage(OBJECT)选择图片wx.chooseImage选择图片API可以从本地相册选择图片或使用相机拍照来选择图片，参数说明如表所示。4.4.2wx.previewImage(OBJECT)预览图片wx.previewImage预览图片API可以用来预览多张图片以及设置默认显示的图片，参数说明如表所示。4.4.3wx.getImageInfo(OBJECT)获得图片信息wx.getImageInfo用来获得图片信息，包括图片的宽度、

7、图片的高度以及图片返回的图片路径，参数说明如表所示。4.4.3wx.getImageInfo(OBJECT)获得图片信息success返回参数说明如表所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.5.1wx.saveFile保存文件到本地wx.saveFile(object)可以根据

8、文件的临时路径，将文件保存到本地，下次启动微信小程序的时候，仍然可以获取到该文件，如果是临时路径，下次启动微信小程序的时候，就无法获取到该文件。本地文件存储的大小限制为10M。参数说明如表所示。4.5.2wx.getSavedFileList获取本地文件列表通 过 w x . s a v e F i l e 可 以 将 临 时 文 件 保 存 到 本 地 ， 成 为 本 地 文 件 ， 可 以 通 过wx.getSavedFileList来获取本地文件列表，获取到wx.saveFile保存的文件，参数说明如表所示。4.5.2wx.getSavedFileList获取本地文件列表success返

9、回参数说明如表所示。4.5.2wx.getSavedFileList获取本地文件列表fileList中的项目说明如表所示。4.5.3wx.getSavedFileInfo获取本地文件信息wx.getSavedFileInfo获取本地指定路径的文件信息，包括文件的创建时间、文件的大小以及接口调用结果。wx.getSavedFileInfo参数说明如表所示。4.5.3wx.getSavedFileInfo获取本地文件信息success返回参数说明如表所示。4.5.4wx.removeSavedFile删除本地文件wx.saveFile用来将文件保存到本地，而wx. removeSavedFile用

10、来删除本地文件，参数说明如表所示。4.5.5wx.openDocument打开文档wx.openDocument可以打开doc、xls、ppt、pdf、docx、xlsx、pptx等多种格式的文档，参数说明如表所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.6数据缓存API微信小程序数

11、据缓存API用来处理数据缓存信息，可以将数据缓存到本地、获取到本地缓存数据、移除缓存数据以及清理缓存数据。常用的数据缓存API有以下几种。1. wx.setStorage(OBJECT) 异步方式将数据存储在本地缓存中指定的 key 中。2. wx.setStorageSync(KEY,DATA)同步方式将数据存储在本地缓存中指定的 key 中。3. wx.getStorage(OBJECT)异步方式从本地缓存中获取指定 key 对应的内容。4. wx.getStorageSync(KEY)同步方式从本地缓存中获取指定 key 对应的内容。5. wx.getStorageInfo(OBJECT

12、)异步方式获取当前storage的相关信息。6. wx.getStorageInfoSync(OBJECT)同步方式获取当前storage的相关信息。7. wx.removeStorage(OBJECT) 异步方式从本地缓存中移除指定的key。8. wx.removeStorageSync(KEY) 同步方式从本地缓存中移除指定的key。9. wx.clearStorage()异步方式清理本地数据缓存。10. wx.clearStorageSync()同步方式清理本地数据缓存。4.6.1数据缓存到本地异步方式将数据存储到本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，参数说明

13、如表所示。1wx.setStorage(OBJECT)4.6.1数据缓存到本地同步方式将数据存储到本地指定的key中，会覆盖掉原来该 key 对应的内容，相比于异步缓存数据，它更简练一些，参数说明如表所示。2wx.setStorageSync(KEY,DATA)4.6.2获取本地缓存数据wx.getStorage(OBJECT)使用异步方式从本地缓存中获取指定 key 对应的内容。参数说明如表所示。1wx. getStorage (OBJECT)4.6.2获取本地缓存数据wx. getStorageSync (OBJECT)是一个同步的接口，用来从本地缓存中同步获取指定 key 对应的内容。它

14、只有一个参数，如表所示。2wx. getStorageSync (OBJECT)4.6.2获取本地缓存数据w x. g e t S t o r a g e和w x. g e t S t o r a g e S y nc这两个接口都是从本地指定的key值来获取数据，wx.getStorageInfo是异步方式获取当前storage的相关信息，是获取所有key的值，参数说明如表所示。3wx. getStorageInfo (OBJECT)4.6.2获取本地缓存数据success返回参数说明如表所示。3wx. getStorageInfo (OBJECT)4.6.3移除和清理本地缓存数据wx.rem

15、oveStorage(OBJECT)用来异步从本地缓存中移除指定的key，参数说明如表所示。1. wx.removeStorage(OBJECT)4.6.3移除和清理本地缓存数据wx. removeStorageSync(OBJECT)用来同步从本地缓存中移除指定的key，它的效果和wx.removeStorage一样，参数说明如表所示。2wx. removeStorageSync(KEY)4.6.3移除和清理本地缓存数据wx. clearStorage ()、wx. clearStorageSync ()用来清理本地所有缓存数据，前者是异步清理缓存数据，后者是同步清理缓存数据。3wx. cl

16、earStorage ()、wx. clearStorageSync ()4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.7.1获得位置、选择位置、打开位置使用wx.getLocation(OBJECT)可以获得当前位置信息，包括当前位置的地理坐标、速度，用户离开小程序后，此接口无法调用；当

17、用户单击“显示在聊天顶部”时，此接口可继续调用。具体参数如表所示。1.wx.getLocation(OBJECT)获得当前位置4.7.1获得位置、选择位置、打开位置success返回参数说明如表所示。1.wx.getLocation(OBJECT)获得当前位置4.7.1获得位置、选择位置、打开位置使用wx.chooseLocation打开地图来选择位置，具体参数说明如表所示。2.wx.chooseLocation(OBJECT)选择位置4.7.1获得位置、选择位置、打开位置success返回参数说明如表所示。2.wx.chooseLocation(OBJECT)选择位置4.7.1获得位置、选择

18、位置、打开位置使用wx.openLocation(OBJECT)接口可以使用微信内置地图查看位置，具体参数说明如表所示。3wx.openLocation(OBJECT)打开位置4.7.2地图组件控制wx.createMapContext(mapId)地图组件控制用来创建并返回 map 上下文 mapContext 对象，它有两个方法：一个是getCenterLocation，获取当前地图中心的经纬度，返回的是GCJ-02 坐标系，可以用于 wx.openLocation；另一个是moveToLocation，将地图中心移动到当前定位点，需要配合map组件的show-location使用。get

19、CenterLocation方法的具体参数说明如表4.31所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.8.1获得系统信息wx.getSystemInfo(OBJECT)用来异步获取设备的系统信息，具体参数说明如表所示。1wx.getSystemInfo(OBJECT)异步获取系统信

20、息4.8.1获得系统信息success返回参数说明如表所示。1wx.getSystemInfo(OBJECT)异步获取系统信息4.8.1获得系统信息wx. getSystemInfoSync用来同步获取系统信息，它是没有参数的，示例代码如下。2wx. getSystemInfoSync()同步获取系统信息Page( onLoad: function () try var res = wx.getSystemInfoSync() console.log(“手机型号= + res.model) console.log(“设备像素比= + res.pixelRatio) console.log(“窗

21、口宽度= + res.windowWidth) console.log(“窗口高度= + res.windowHeight) console.log(“微信设置的语言= + res.language) console.log(“微信版本号= + res.version) console.log(“操作系统版本= + res.system) console.log(“客户端平台= + res.platform) catch (e) / Do something when catch error ) 4.8.2获取网络状态微信小程序使用wx.getNetworkType(OBJECT)来获取网络类

22、型，网络类型分为2g、3g、4g、wifi，具体参数如表所示。4.8.3重力感应微信小程序使用wx.onAccelerometerChange(CALLBACK)来进行重力感应，监听重力感应数据，频率为5次/秒，具体参数说明如表所示。4.8.4罗盘微信小程序使用wx.onCompassChange(CALLBACK)来监听罗盘数据，频率为5次/秒，具体参数说明如表所示。4.8.5拨打电话微信小程序使用wx.makePhoneCall(OBJECT)来拨打电话，具体参数说明如表所示。4.8.6扫码微信小程序使用wx.scanCode(OBJECT)来调起客户端扫码界面，扫码成功后返回对应的结果，

23、具体参数说明如表所示。4.8.6扫码success返回参数说明如表所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.9.1消息提示框消息提示框经常用来提交成功或者加载中的一种友好提示方式，如图所示。4.9.1消息提示框可以设置提示框的内容、类型、时间以及相应的事件，如果想显示消息提示框，

24、可以使用wx.showToast(OBJECT)的API，它的具体参数说明如表所示。4.9.2模态弹窗模态弹窗是对整个界面进行覆盖，防止用户对界面中的其他内容进行操作，如图所示。4.9.2 模态弹窗使用wx.showModal(OBJECT)显示模态弹窗，可以设置提示的标题、提示的内容、“取消”按钮和样式、“确定”按钮和样式以及一些绑定的事件，具体参数说明如表所示。4.9.3操作菜单在App软件里，经常可以看到会从底部弹出很多选项供我们选择，也可以取消选择，如所示。4.9.3操作菜单在微信小程序里，同样可以实现这样的效果，需要使用wx.showActionSheet(OBJECT)显示操作菜单

25、这个API接口，具体参数如表所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.10登录API微信小程序的登录是必不可少的环节，它的登录可以简单理解为以下几个步骤。1.使用wx.login获取code值。2.拿到code值后再加上AppID、secret（在公众开发平台AppID下）、gr

26、ant_type授权类型去请求路径https:/ /jscode2session，来获取session_key。3.拿到session_key可以生成自己的3rd_session存储在storage。4.后续用户进入微信小程序，先从storage获得3rd_session，再根据这个去查找合法的session_ key。4.10登录API登录时序图如图所示。4.10登录API微信小程序使用wx.login接口来获取登录凭证（code），进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的会话密钥（session_key）。用户数据的加解密通信需要依赖会话密钥完成。具体参数说

27、明如表所示。1wx.login(OBJECT)获取登录凭证code4.10登录APIsuccess返回参数说明如表所示。1wx.login(OBJECT)获取登录凭证code4.10登录APIhttps:/ HTTPS 接口，开发者服务器使用登录凭证code 获取 session_key 和 openid。其中，session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输。接口地址为https:/ &js_ code=JSCODE&grant_type=authorization_code。2code 换取 session_key4.10

28、登录API返回参数说明如表 所示。2code 换取 session_key4.10登录API微信小程序可以使用wx.checkSession(OBJECT) 检查登录态是否过期，如果过期就重新登录，具体参数说明如表所示。3wx.checkSession(OBJECT) 检查登陆态是否过期4.10登录API微信小程序使用wx.getUserInfo(OBJECT)来获取用户信息，在获取用户信息之前，需要调用wx.login 接口，只有用户在登录状态，才能获取到用户的相关信息。具体参数说明如表所示。4wx.getUserInfo(OBJECT) 获取用户信息4.10登录APIsuccess返回参数

29、说明如表所示。4wx.getUserInfo(OBJECT) 获取用户信息4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API4.11 微信支付API微信支付主要有5个步骤：小程序内调用登录接口、商户server调用支付统一下单、商户server调用再次签名、商户server接收支付通知、商户ser

30、ver查询支付结果，小程序支付的交互过程如图所示。4.11 微信支付API微信小程序提供了微信支付接口，可以使wx.requestPayment(OBJECT)来进行微信支付，具体参数说明如表所示。4.2 文件上传与下载API4.3 WebSocket会话API4.4 图片处理API4.5 文件操作API4.6 数据缓存API4.7 位置信息API4.13 沙场大练兵： 仿豆瓣电影微信小程序目录contents4.1 请求服务器数据API4.8 设备应用API4.9 交互反馈API4.10 登录API4.11 微信支付API4.12 分享API沙场大练兵/豆瓣电影App是一款用来购买电影票、查

31、看影评的软件，其主界面如图所示。仿豆瓣电影微信小程序4.13.1电影顶部页签切换效果在电影界面的顶部有3个页签：上映、影院、我看，页签的切换，会带动相应的内容进行切换展示。我们采用顶部页签切换效果，来完成各个页面的切换展示，如图所示。4.13 沙场大练兵：仿豆瓣电影微信小程序2.9.2宫格导航设计海报轮播效果是很多App软件和网站都会采用的一种方式，在有限的区域内动态地展示商品图片信息或者广告信息，豆瓣电影里也有海报轮播效果，如图所示。4.13.2电影海报轮播效果4.13.3电影列表方式布局豆瓣电影的电影列表采用每行3列的方式来进行布局，显示电影海报和电影名称，如图所示。4.13 沙场大练兵：仿豆瓣电影微信小程序4.13 沙场大练兵：仿豆瓣电影微信小程序2.9.2宫格导航设计在电影列表界面里，单击电影海报图片，可以查看具体的电影详情。电影详情页在顶部也是采用页签切换的方式进行布局，布局方式和电影页面一致。页签的下面是介绍电影相关信息的区域，接着是“我想看”和“看过了”两个按钮，再往下是电影介绍、导演演员列表的展现，如图所示。4.13.4电影详情页布局4.13.5项目上传与预览项目开发完后，可以上传到微信小程序服务器上。4.13 沙场大练兵：仿豆瓣电影微信小程序2.9.2宫格导航设计