6.1【案例5】模拟时钟

6.1.1 案例分析

模拟时钟任务需求：

• 使用canvas绘制时钟，实现模拟时钟的功能。
• 钟表时间与系统时间保持一致，刻度将24小时制转化为12小时制。
• 绘制中心圆
• 绘制外层大圆
• 绘制分针、时针、秒针。

页面效果图：

6.1.2 前导知识

1. canvas组件（原生组件，默认宽高为300px*225px）
   canvas 常用属性：
   
   canvas用法：

• 创建canvas.wxml文件。
  
• canvas组件默认样式如下。
  

canvas组件默认效果图：

注意：
canvas组件是原生组件，它的层级是最高的，不能通过z-index设置层级，css动画对canvas组件无效。

2. canvas绘制矩形，演示绘制的基本步骤
   第1步：创建Canvas绘图上下文对象CanvasContext
   
   第2步：使用Canvas绘图上下文进行绘图描述
   
   第3步：画图
   
   矩形效果图：
   
3. canvas绘制笑脸，示例代码如下：
   第1步：创建Canvas绘图上下文对象CanvasContext
   
   第2步：设置线条颜色和线宽
   
   第3步：移动画笔坐标位置，绘制（外部大圆）
   
   第4步：移动画笔坐标位置，绘制（嘴巴线条）
   
   第5步：移动画笔坐标位置，绘制（左眼圆圈）
   
   第6步：移动画笔坐标位置，绘制（右眼圆圈）
   
   第7步：画出当前路径的边框
   
   第8步：移动画笔坐标位置，绘制（左眼圆圈）
   
   笑脸效果图：
   
4. canvas对象方法介绍：
   CanvasContext.draw ()：将之前在绘图上下文中的描述（路径、样式、变形）画到canvas中。
   CanvasContext.arc()：创建一条弧线。
   CanvasContext.rect()：创建一个矩形路径。
   CanvasContext.lineTo()：新增一个新点，用stroke方法来画线条。
   CanvasContext.moveTo()：把路径移动到画布中的指定点，不创建线条。

6.1.3 钟表页面布局

6.1.4 钟表页面绘制

6.2【案例6】罗盘动画

6.2.1 案例分析

风水罗盘动画任务需求：

• 实现旋转动画效果。
• 实现缩放动画效果。
• 实现移动动画效果。
• 实现倾斜动画效果。
• 实现旋转和缩放动画同时效果。
• 实现旋转后缩放动画效果。

6.2.2 前导知识

1. wx.createAnimation()
   wx.createAnimation() 参数对象的常用属性：
   
2. animation动画对象
   • animation.step()：动画队列。
   • animation.export()：导出动画。
   • animation.rotate(number angle)：从原点顺时针旋转一个角度。
   • animation.scale(number sx, number sy)：缩放。
   • animation.skew(number ax, number ay)：倾斜
   • animation.translate(number tx, number ty)：平移变换。

6.2.3 设计罗盘页面布局

6.2.4 手指触摸旋转罗盘

6.2.5 单击按钮操作罗盘

1. 编写rotate()函数，实现从原点顺时针旋转一个角度
   
2. 编写scale()函数，实现缩放效果
   
3. 编写translate()函数，实现平移变换
   
4. 编写skew()函数，实现对 X、Y 轴坐标进行倾斜
   
5. 编写rotateAndScale()函数，实现旋转和缩放同时进行
   
6. 编写rotateThenScale()函数，实现旋转之后再缩放
   
7. 编写all()函数，实现同时展示全部动画
   
8. 编写allOrder()函数，实现按顺序展示全部动画
   
9. 编写reset()函数，实现回到原始状态
   

6.3【案例7】文件上传与下载

6.3.1 案例分析

文件上传、下载案例任务需求：

• 实现了请求服务器文件的上传与下载。
• 实现调起设备录音功能。
• 实现停止录音功能。
• 实现播放录音功能。
• 实现上传录音文件到服务器的功能

6.3.2 前导知识

1. 录音API
   
2. 文件上传API
   
3. 文件下载API
   

6.3.3 录音和上传

在Page()前面编写代码，获取音频实例对象和录音管理器对象，并在录音完成后保存音频文件的临时路径

在Page()中编写代码：

6.3.4 文件的下载

文件的下载任务需求：

• 用户单击“播放文章”按钮，调用wx.downloadFile()方法。
• 把服务器文件下载到本地。
• 接口调用成功后，在success()回调函数中播放音频文件。

6.4【案例8】在线聊天系统

6.4.1 案例分析

在线聊天案例实现了客户端和服务器端的对话聊天，服务器端用Node.js来搭建服务，客户端通过小程序中的WebSocket API来实现。
在线聊天系统任务需求：

• 服务器向小程序发送消息，展示在聊天界面的左侧。
• 小程序向服务器发送信息，展示在聊天界面的右侧。
• 小程序发送消息，服务器端收到后自动回复消息返送给小程序。

页面效果图：

6.4.2 前导知识

1. WebSocket
   WebSocket作用：
   • 实现了浏览器和服务器的全双工通信。
   • 是客户端与服务器之间专门建立的一条通道。
   • 建立连接后，就可以从通道中实时获取服务器的数据。

注意事项：WebSocket的协议是以ws或wss开头的，在小程序中，正式项目必须使用wss协议，在开发模式下可以使用ws协议。

2. wx.connectSocket()，创建一个WebSocket连接：
   
3. wx.sendSocketMessage()，通过WebSocket连接发送数据：
   
4. wx.onSocketMessage()，监听WebSocket接受到服务器的消息事件：
   

6.4.3 编写Node.js服务器端代码

本节选择使用Node.js搭建开发者服务器，安装Node.js，创建项目：

1. 初始化项目，将会自动创建package.json配置文件。
   
2. 安装webSocket库。
   
3. 安装nodemon监控文件修改（如果已经安装则跳过此步）。
   

执行上述命令后，在项目目录下创建socket.js文件，编写代码如下：

1. 引入http模块和WebSocket库。
   
2. 创建一个webSocket Server。
3. 事件监听。
   
4. 连接的关闭监听。
   
5. 接收控制台中的输入。
   
6. 暴露对外访问接口地址。
   
7. 保存上述代码后，执行如下命令，启动服务器。
   

6.4.4 实现通信功能

1. 创建空白项目，在app.json中添加页面路径。
   
2. 进入index.js中，连接服务器测试。
   

执行上述代码，在服务器控制台看到输出结果。

小程序端控制台接收消息结果，如下图所示：

6.4.5 编写聊天页面

进入index.js文件，监听服务器发送给客户端的消息，并将消息显示在页面中。

编写rolling_bottom()方法，使聊天内容始终显示在最底端。

初始化data:{}数据。

编写input输入框绑定事件bindChange()函数，监听input值的改变。

编写“发送”按钮绑定事件send()函数，判断发送内容是否为空。

编写temp对象。

编写发送对象为空的逻辑代码。

编写关闭页面的onUnload()函数，关闭WebSocket连接。

总结

本章讲解了canvas绘图、animation动画、文件上传与下载、录音与播放，以及通过WebSocket实现在线聊天系统。通过本章学习，读者应掌握这些技术的使用，能够利用canvas来绘制各种图形；能够使用animation动画实现移动、旋转、移动、缩放等效果；能够根据实际需求开发文件上传、下载、录音、在线聊天等功能。