微信小程序开发实战 第6章 API应用案例(下)
合集下载
ch06小程序媒体API
使用该值。
封面图url，用于做原生音频播放器背景图。原生音频播放器中的分 否
享功能，分享出去的卡片配图及背景也将使用该图。
webUrl protocol
String String
页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也 否 将使用该值。 音频协议。默认值为 'http'，设置 'hls' 可以支持播放 HLS 协议的直 否 播音频
Number Number Number String Number
audioSource
String
必填 否
否 否 否 否 否
否
说明
支持版本
指定录音的时长，单位 ms ，如果传入了合法的 duration ，在到达指定的 duration 1.6.0
后会自动停止录音，最大值 600000（10 分钟）,默认值 60000（1 分钟）
最低版本
1.9.90 1.9.90
01 图片管理
03 获取图片信息
orientation参数说明说明如表所示。
枚举值 up down left right up-mirrored
down-mirrored
left-mirrored
right-mirrored
说明 默认 180度旋转 逆时针旋转90度 顺时针旋转90度 同up，但水平翻转
03
音频管理
03 音频管理
音频根据其播放性质可以分为背景音频和前台音频。 背景音频在小程序最小化之后还可以继续在后台播放。
03 音频管理
属性 duration
类型
说明
Number 当前音频的长度（单位：s），只有在当前有合法的 src 时返回
微信小程序开发实战 第6章 API应用案例(下)
✎ 6.1 【案例5】模拟时钟
4 钟表页面绘制
clock.js
Page({ width: 0, height: 0 ,// 初始化宽高 onLoad: function() { wx.getSystemInfo({ }) }, // 获取系统的宽高 timer:null, onReady: function() { …… function draw(){ } // 绘制函数 function drawClock(ctx, radius) {} // 绘制表盘部分 function drawHand(ctx, radius) {} // 绘制指针部分 }
2 前导知识
第5步：移动画笔坐标位置，绘制（左眼圆圈）
ctx.moveTo(85, 80) ctx.arc(80, 80, 5, 0, 2 * Math.PI, true)
第6步：移动画笔坐标位置，绘制（右眼圆圈）
ctx.moveTo(125, 80) ctx.arc(120, 80, 5, 0, 2 * Math.PI, true)
✎ 6.1 【案例5】模拟时钟
2 前导知识
canvas用法：
创建canvas.wxml文件。
<canvas canvas-id="myCanvas"></canvas>
canvas组件默认样式如下。
canvas { width: 300px; height: 150px; display: block; position: relative;
},
✎ 6.2 【案例6】罗盘动画
5 单击按钮操作罗盘
④ 编写skew()函数，实现对 X、Y 轴坐标进行倾斜
translate: function() { animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step() this.setData({ animation: animation.export() })
微信小程序开发图解案例教程第6章 综合案例：仿智行火车票12306微信小程序
图6.8 个人中心界面
图6.9 抢票界面
6.2 设计思路及相关知识点
6.2.1 设计思路
（1）设计底部标签导航，准备好底部标签导航的图标并建立相应 的4个页面；设置默认时图片和选中时图片，标签名称采用两种颜 色，蓝色为选中颜色，灰色为默认颜色。 （2）设计幻灯片轮播效果，准备好幻灯片需要轮播的图片。 （3）设计火车票查询区域，火车票查询区域有火车票和飞机票两 个页签的切换效果，切换选中时，背景色为白色，文字颜色为黑色。
6.2.2 相关知识点
（1）在界面布局的时候，会用到微信小程序的组件，包括VIEW视图 容器组件、IMAGE图片组件、SWIPER滑块视图容器组件、表单相关组 件等组件的使用。 （2）界面样式设计，需要写一些WXSS样式进行界面的美化和渲染。 （3）获取火车票列表信息，需要使用WX.REQUEST发起网络请求获取 到火车票相关信息，返回JSON数据，在界面中进行渲染。 （4）界面跳转需要使用WX.NAVIGATETO这个API接口来实现。
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第6章 综合案例：仿智行火车票12306微信小程序
需求描述 ■ 设计思路及相关知识点 ■ 准备工作 ■ 设计流程 ■ 小结 ■
智行火车票对12306购票流程进行了 大量优化，使用户购票更加快捷，还额 外提供了智能查询和火车票监控功能。
智行火车票APP的主要界面如图6.1、 图6.2、图6.3、图6.4所示。
6.3 准备工作
（1）需要准备一个APPID，如果没有APPID，就不能在手机上进行项目 的预览，但是在开发工具上开发是没有任何问题的。 （2）底部标签导航，需要有选中图片和默认图片，放置在IMAGES/BAR 文件夹下，如图6.10所示。
微信小程序开发项目教程ppt第6章(185)
第6章
莫凡商城的注册、登录功能
微信小程序开发项目教程（慕课版）
工业和信息化人才培养规划教材 人民邮电出版社
本章导读
The chapter’s introduction
注册、登录功能是非常通用的功能，几乎所有的网站、App、H5、小程序等 都会用到注册、登录功能。莫凡商城的注册、登录等功能的设置会用到微信小程 序的表单组件，涉及微信小程序界面交互、数据缓存API 应用及微信小程序登录相 关接口API。在储备好这些基础知识之后，就可以实现莫凡商城注册功能、登录功 能、修改密码功能、意见反馈功能和清除缓存功能的设置了。
6.1.1 button 按钮组件
button 按钮组件提供了3 种类型的按钮： 基本类型按钮、默认类型按钮及警告类型按 钮，按钮的大小有默认和迷你两种，如图所 示。
6.1.1 button 按钮组件
button 按钮组件有很多属性，每个属性有不同的作用。
属性 size
type
plain disabled loading
eventhandle
说明
用户单击该按钮时，会返回获取到的用户信息，回调的detail 数据与 wx.getUserInfo 返回的一致，opentype="getUserInfo"时有效 客服消息回调，open-type="contact"时有效 获取用户手机号回调，open-type=getPhonenumber 时有效 当使用开放能力时， 发生错误的回调， opentype=launchApp 时有效 在打开授权设置页后回调，open-type=openSetting时有效 打开App 成功的回调，open-type=launchApp 时有效
否
莫凡商城的注册、登录功能
微信小程序开发项目教程（慕课版）
工业和信息化人才培养规划教材 人民邮电出版社
本章导读
The chapter’s introduction
注册、登录功能是非常通用的功能，几乎所有的网站、App、H5、小程序等 都会用到注册、登录功能。莫凡商城的注册、登录等功能的设置会用到微信小程 序的表单组件，涉及微信小程序界面交互、数据缓存API 应用及微信小程序登录相 关接口API。在储备好这些基础知识之后，就可以实现莫凡商城注册功能、登录功 能、修改密码功能、意见反馈功能和清除缓存功能的设置了。
6.1.1 button 按钮组件
button 按钮组件提供了3 种类型的按钮： 基本类型按钮、默认类型按钮及警告类型按 钮，按钮的大小有默认和迷你两种，如图所 示。
6.1.1 button 按钮组件
button 按钮组件有很多属性，每个属性有不同的作用。
属性 size
type
plain disabled loading
eventhandle
说明
用户单击该按钮时，会返回获取到的用户信息，回调的detail 数据与 wx.getUserInfo 返回的一致，opentype="getUserInfo"时有效 客服消息回调，open-type="contact"时有效 获取用户手机号回调，open-type=getPhonenumber 时有效 当使用开放能力时， 发生错误的回调， opentype=launchApp 时有效 在打开授权设置页后回调，open-type=openSetting时有效 打开App 成功的回调，open-type=launchApp 时有效
否
《微信小程序企业开发实战》课程教学大纲
《微信小程序企业开发实战》课程教学大纲学分：3学分学时：45学时（其中：讲课学时：30 上机学时：15 ）适用专业：通识选修课、专业拓展课先修课程：计算机基础、计算机网络、HTML5+CSS3+JavaScript一、课程的性质与目标《微信小程序开发实战》是专注于微信小程序开发的Web前端教材，涉及微信小程序框架、文件配置、WXML语法、WXSS布局、WXS语法、页面组件、应用接口API、云开发模式、第三方组件的使用等。
通过本课程的学习，学生能够理解微信小程序的实质，掌握微信小程序开发的基本技能，快速高效的开发微信小程序。
提高学生对计算机科学与技术的兴趣，促进学生能在未来的学习和工作中，使用“计算机思维”来解决实际问题，全面提高学生的综合素质。
二、课程设计理念与思路课程设计理念：高等职业教育不仅注重对专业知识和技能的传授，也注重对学生综合素质的培养，不局限于个人选择的专业，有助于个人潜力能够得到最大限度的发挥。
在全球云计算和移动互联的产业背景下，在高等教育的通识教育中增加有关计算机技术基础知识与能力的课程，有助于非计算机专业大学生综合素质的提高。
课程设计思路：微信小程序企业开发实战作为一门选修课，让学生把一门程序设计语言掌握到实用的程度较有难度。
本课程并非简单介绍微信小程序开发的理论内容，而是将理论讲解与实际操作相结合，其中所涉及的大部分知识点适用于所有编程的基础知识，如变量、运算符、选择语句和标签概念等。
可潜移默化地培养学生程序化、系统化的思维模式，让学生能够使用逻辑思维解决问题。
同时，培养学生的自学能力。
软件技术的发展日新月异，教材不能做到和语言同步，互联网的存在为自学掌握一门技能提供了便捷，可以让学生自己分析问题、动手编程和，在此过程中，学生上网查阅相关资料，能够更新知识，并逐渐具备独立研究的能力。
三、教学条件要求操作系统：Windows 10开发工具：微信开发者工具四、课程的主要内容及基本要求第一章微信小程序简介第二章微信开发者工具第三章微信小程序起步第四章小程序的配置文件第五章 WXML语法基础第六章 WXSS样式处理第七章 WXS语法第八章小程序中的JavaScript第九章微信小程序核心组件第十章微信小程序核心 API第十一章微信小程序开放能力（可选）第十二章微信小程序云开发（可选）第十三章自定义组件与第三方 UI 组件库（可选）第十四章第十五章项目实战：电影之家小程序（可选）项目实战：美妆商城小程序（可选）第十六章五、学时分配注：可选章节未计入合计课时。
微信小程序开发实战 第5章 API应用案例(上)
说明
✎ 5.1 【案例1】用户登录
2 前导知识
保存数据缓存示例代码如下：
// 保存数据缓存 wx.setStorage({
key: 'key', data: 'value', success: res => {}, fail: res => {} })
// 本地缓存中指定的key // 需要存储的内容（支持对象或字符串） // 接口调用成功的回调函数 // 接口调用失败的回调函数
const wx = {
appid: '',
// 需要填写开发者的AppID
secret: ''
// 需要填写开发者的AppSecret
}
✎ 5.1 【案例1】用户登录
3 搭建开发者服务器
② 模拟数据库。
var db = { session: {}, user: {}
}
// 模拟数据库 // 保存openid和session_key的会话信息 // 保存用户记录，如用户名、积分等数据
✎ 5.1 【案例1】用户登录
2 前导知识
数据缓存：缓存数据，从而在小程序退出后再次打开时，可以从缓存中读取上次保存的数据，常用的数
据缓存API如下表所示：
方式
异步
同步
名称
wx.setStorage() wx.getStorage() wx.getStorageInfo() wx.removeStorage() wx.setStorageSync() wx.getStorageSync() wx.getStorageInfoSync() wx.removeStorageSync()
未登录示例
第6章 综合案例：仿智行火车票12306微信小程序
微信小程序简明开发教程
第6章 综合案例：仿智行火车票12306微信小程序
总结
底部标签导航设计 海报轮播效果设计 火车票查询界面设计 火车票列表设计 个人中心界面设计 抢票界面设计 项目上传和预览
微信小程序简明开发教程
6.2 设计思路及相关知识点
设计思路 相关知识点
微信小程序简明开发教程
第6章 综合案例：仿智行火车票12306微信小程序
6.3 准备工作
微信小程序简明开发教程
第6章 综合案例：仿智行火车票12306微信小程序
6.4 设计流程
底部标签导航设计 海报轮播效果设计 火车票查询界面设计 火车票列表设计 个人中心界面设计 抢票界面设计 项目上传和预览
微信小程序简明开发教程
主讲人：小刚老师
第6章 综合述 6.2 设计思路及相关知识点 6.3 准备工作 6.4 设计流程
微信小程序简明开发教程
第6章 综合案例：仿智行火车票12306微信小程序
6.1 需求描述
微信小程序简明开发教程
第6章 综合案例：仿智行火车票12306微信小程序
《微信小程序开发实战》读书笔记PPT模板思维导图下载
4.2 【任 务1】邀 请函页面
04
4.3 【任 务2】照 片页面
05
4.4 【任 务3】美 好时光页 面
06
4.5 【任 务4】婚 礼地】 宾客信息页面
课后习题
第5章 API应用案例（上）
【教学导航】
5.1 【案例1】用 户登录
5.2 【案例2】个 人中心
5.3 【案例3】天 气预报查询
第8章 综合项目—— 点餐系统
08
第7章 小程序开发框 架
本书是针对Web前端开发人员编写的一本快速掌握微信小程序开发的教程。本书通过通俗易懂的语言、丰 富实用的案例，讲解微信小程序的原理和开发技术。全书共8章，第1、2章主要讲解微信小程序的入门知识，介 绍微信小程序的优势和发展前景，通过简单易懂的“比较数字大小”案例帮助读者快速熟悉开发流程；第3、4章 分别讲解“音乐”和“婚礼邀请函”小程序项目，通过这两章的学习，读者可以掌握小程序的布局和各种组件的 使用；第5、6章讲解微信小程序的各种API，通过8个典型的案例对这些API的使用进行演示；第7章讲解微信小 程序开发框架，涵盖了微信小程序模块开发、第三方框架（mpvue、WePY）和UI库（WeUI）；第8章讲解一 个综合项目—点餐系统，详细讲解项目从需求分析到代码实现的全过程。本书适合作为高等院校本、专科计算机 相关专业的教材，也可作为广大计算机编程爱好者的参考书。
内容提要
第1章 微信小程序入门
【教学导航】
1.1 初识微信小 程序
1.2 开发环境搭 建
1.3 小程序的开 发体验
本章小结
1.4 团队开发与 项目上线
课后习题
第2章 微信小程序开发基础
01
【教学导 航】
02
2.1 【案 例1】比 较数字大 小
04
4.3 【任 务2】照 片页面
05
4.4 【任 务3】美 好时光页 面
06
4.5 【任 务4】婚 礼地】 宾客信息页面
课后习题
第5章 API应用案例（上）
【教学导航】
5.1 【案例1】用 户登录
5.2 【案例2】个 人中心
5.3 【案例3】天 气预报查询
第8章 综合项目—— 点餐系统
08
第7章 小程序开发框 架
本书是针对Web前端开发人员编写的一本快速掌握微信小程序开发的教程。本书通过通俗易懂的语言、丰 富实用的案例，讲解微信小程序的原理和开发技术。全书共8章，第1、2章主要讲解微信小程序的入门知识，介 绍微信小程序的优势和发展前景，通过简单易懂的“比较数字大小”案例帮助读者快速熟悉开发流程；第3、4章 分别讲解“音乐”和“婚礼邀请函”小程序项目，通过这两章的学习，读者可以掌握小程序的布局和各种组件的 使用；第5、6章讲解微信小程序的各种API，通过8个典型的案例对这些API的使用进行演示；第7章讲解微信小 程序开发框架，涵盖了微信小程序模块开发、第三方框架（mpvue、WePY）和UI库（WeUI）；第8章讲解一 个综合项目—点餐系统，详细讲解项目从需求分析到代码实现的全过程。本书适合作为高等院校本、专科计算机 相关专业的教材，也可作为广大计算机编程爱好者的参考书。
内容提要
第1章 微信小程序入门
【教学导航】
1.1 初识微信小 程序
1.2 开发环境搭 建
1.3 小程序的开 发体验
本章小结
1.4 团队开发与 项目上线
课后习题
第2章 微信小程序开发基础
01
【教学导 航】
02
2.1 【案 例1】比 较数字大 小
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
ctx.moveTo(160, 100) ctx.arc(100, 100, 60, 0, 2 * Math.PI, true)
第4步：移动画笔坐标位置，绘制（嘴巴线条）
ctx.moveTo(140, 100) ctx.arc(100, 100, 40, 0, Math.PI, false)
✎ 6.1 【案例5】模拟时钟
// 设置填充色为红色 // ctx.fillRect(x, y, width, height)
✎ 6.1 【案例5】模拟时钟
2 前导知识
第3步：画图
ctx.draw()
矩形效果图：
✎ 6.1 【案例5】模拟时钟
2 前导知识
③ canvas绘制笑脸，示例代码如下： 第1步：创建Canvas绘图上下文对象CanvasContext
第1步：创建Canvas绘图上下文对象CanvasContext
const ctx = wx.createCanvasContext('myCanvas')
第2步：使用Canvas绘图上下文进行绘图描述
ctx.setFillStyle('red') // 画一个矩形，填充为红色 ctx.fillRect(10, 20, 150, 75)
✎ 6.1 【案例5】模拟时钟
2 前导知识
canvas用法：
创建canvas.wxml文件。
<canvas canvas-id="myCanvas"></canvas>
canvas组件默认样式如下。
canvas { width: 300px; height: 150px; display: block; position: relative;
const ctx = wx.createCanvasContext('myCanvas')
第2步：设置线条颜色和线宽
ctx.setStrokeStyle('#ff0000') ctx.setLineWidth(2)
✎ 6.1 【案例5】模拟时钟
2 前导知识
第3步：移动画笔坐标位置，绘制（外部大圆）
2 前导知识
第5步：移动画笔坐标位置，绘制（左眼圆圈）
ctx.moveTo(85, 80) ctx.arc(80, 80, 5, 0, 2 * Math.PI, true)
第6步：移动画笔坐标位置，绘制（右眼圆圈）
ctx.moveTo(125, 80) ctx.arc(120, 80, 5, 0, 2 * Math.PI, true)
✎ 6.1 【案例5】模拟时钟
3 钟表页面布局
clock.wxml
<canvas canvas-id="myCanvas" class="mycanvas"></canvas>
clock.wxss
.mycanvas{ width: 100%;height: 100%;position: fixed; }
☞点击查看本节相关知识点
【案例6】罗盘动画
☞点击查看本节相关知识点
【案例7】文件上传与下载
☞点击查看本节相关知识点
【案例8】在线聊天系统
☞点击查看本节相关知识点
✎ 6.1 【案例5】模拟时钟
1 案例分析
模拟时钟任务需求： 使用canvas绘制时钟，实现模拟时钟的功能。 钟表时间与系统时间保持一致，刻度将24小时制转化为12小时制。 绘制中心圆 绘制外层大圆 绘制分针、时针、秒针。
第7步：画出当前路径的边框
ctx.stroke()
✎ 6.1 【案例5】模拟时钟
2 前导知识
第8步：移动画笔坐标位置，绘制（左眼圆圈）
wx.draw ()
笑脸效果图：
✎ 6.1 【案例5】模拟时钟
2 前导知识
④ canvas对象方法介绍：
CanvasContext.draw ()：将之前在绘图上下文中的描述（路径、样式、变形）画到canvas中。 CanvasContext.arc()：创建一条弧线。 CanvasContext.rect()：创建一个矩形路径。 CanvasContext.lineTo()：新增一个新点，用stroke方法来画线条。 CanvasContext.moveTo()：把路径移动到画布中的指定点，不创建线条。
String Boolean EventHandle EventHandle EventHandle EventHandle EventHandle EventHandle
canvas组件的唯一标识符 触摸点在canvas区域移动时且有绑定手势事件时，禁止屏幕滚动及下拉刷新 手指触摸动作开始 手指触摸后移动 手指触摸动作结束 手指触摸动作被打断，如来电提醒、弹窗 手指长按500ms后触发，触发了该事件后进行移动不会触发屏幕的滚动 当发生错误时触发error事件，detail = {errMsg: 'something wrong'}
}
✎ 6.1 【案例5】模拟时钟
2 前导知识
canvas组件默认效果图：
✎ 6.1 【案例5】模拟时钟
2 前导知识
值得一提
canvas组件是原生组件，它的层级是最高的，不能通过z-index设置层级，css动画对canvas组 件无效。
✎ 6.1 【案例5】模拟时钟
2 前导知识
② canvas绘制矩形，演示绘制的基本步骤
✎ 6.1 【案例5】模拟时钟
1 案例分析
页面效果图：
时钟模拟
✎ 6.1 【案例5】模拟时钟
2 前导知识
① canvas组件（原生组件，默认宽高为300px*225px）
canvas 常用属性
属性类型Biblioteka 说明canvas-id disable-scroll bindtouchstart bindtouchmove bindtouchend bindtouchcancel bindlongtap binderror
第6章 API应用案例（下）
微信 小程序
• 【案例5】模拟时钟 • 【案例7】文件上传与下载
• 【案例6】罗盘动画 • 【案例8】在线聊天系统
✎
1 掌握canvas的用法
学习目标
掌握WebSocket的使用
4
熟悉canvas 的API对象 2
的用法
了解animation动画的用法
3
✎
目录
【案例5】模拟时钟
第4步：移动画笔坐标位置，绘制（嘴巴线条）
ctx.moveTo(140, 100) ctx.arc(100, 100, 40, 0, Math.PI, false)
✎ 6.1 【案例5】模拟时钟
// 设置填充色为红色 // ctx.fillRect(x, y, width, height)
✎ 6.1 【案例5】模拟时钟
2 前导知识
第3步：画图
ctx.draw()
矩形效果图：
✎ 6.1 【案例5】模拟时钟
2 前导知识
③ canvas绘制笑脸，示例代码如下： 第1步：创建Canvas绘图上下文对象CanvasContext
第1步：创建Canvas绘图上下文对象CanvasContext
const ctx = wx.createCanvasContext('myCanvas')
第2步：使用Canvas绘图上下文进行绘图描述
ctx.setFillStyle('red') // 画一个矩形，填充为红色 ctx.fillRect(10, 20, 150, 75)
✎ 6.1 【案例5】模拟时钟
2 前导知识
canvas用法：
创建canvas.wxml文件。
<canvas canvas-id="myCanvas"></canvas>
canvas组件默认样式如下。
canvas { width: 300px; height: 150px; display: block; position: relative;
const ctx = wx.createCanvasContext('myCanvas')
第2步：设置线条颜色和线宽
ctx.setStrokeStyle('#ff0000') ctx.setLineWidth(2)
✎ 6.1 【案例5】模拟时钟
2 前导知识
第3步：移动画笔坐标位置，绘制（外部大圆）
2 前导知识
第5步：移动画笔坐标位置，绘制（左眼圆圈）
ctx.moveTo(85, 80) ctx.arc(80, 80, 5, 0, 2 * Math.PI, true)
第6步：移动画笔坐标位置，绘制（右眼圆圈）
ctx.moveTo(125, 80) ctx.arc(120, 80, 5, 0, 2 * Math.PI, true)
✎ 6.1 【案例5】模拟时钟
3 钟表页面布局
clock.wxml
<canvas canvas-id="myCanvas" class="mycanvas"></canvas>
clock.wxss
.mycanvas{ width: 100%;height: 100%;position: fixed; }
☞点击查看本节相关知识点
【案例6】罗盘动画
☞点击查看本节相关知识点
【案例7】文件上传与下载
☞点击查看本节相关知识点
【案例8】在线聊天系统
☞点击查看本节相关知识点
✎ 6.1 【案例5】模拟时钟
1 案例分析
模拟时钟任务需求： 使用canvas绘制时钟，实现模拟时钟的功能。 钟表时间与系统时间保持一致，刻度将24小时制转化为12小时制。 绘制中心圆 绘制外层大圆 绘制分针、时针、秒针。
第7步：画出当前路径的边框
ctx.stroke()
✎ 6.1 【案例5】模拟时钟
2 前导知识
第8步：移动画笔坐标位置，绘制（左眼圆圈）
wx.draw ()
笑脸效果图：
✎ 6.1 【案例5】模拟时钟
2 前导知识
④ canvas对象方法介绍：
CanvasContext.draw ()：将之前在绘图上下文中的描述（路径、样式、变形）画到canvas中。 CanvasContext.arc()：创建一条弧线。 CanvasContext.rect()：创建一个矩形路径。 CanvasContext.lineTo()：新增一个新点，用stroke方法来画线条。 CanvasContext.moveTo()：把路径移动到画布中的指定点，不创建线条。
String Boolean EventHandle EventHandle EventHandle EventHandle EventHandle EventHandle
canvas组件的唯一标识符 触摸点在canvas区域移动时且有绑定手势事件时，禁止屏幕滚动及下拉刷新 手指触摸动作开始 手指触摸后移动 手指触摸动作结束 手指触摸动作被打断，如来电提醒、弹窗 手指长按500ms后触发，触发了该事件后进行移动不会触发屏幕的滚动 当发生错误时触发error事件，detail = {errMsg: 'something wrong'}
}
✎ 6.1 【案例5】模拟时钟
2 前导知识
canvas组件默认效果图：
✎ 6.1 【案例5】模拟时钟
2 前导知识
值得一提
canvas组件是原生组件，它的层级是最高的，不能通过z-index设置层级，css动画对canvas组 件无效。
✎ 6.1 【案例5】模拟时钟
2 前导知识
② canvas绘制矩形，演示绘制的基本步骤
✎ 6.1 【案例5】模拟时钟
1 案例分析
页面效果图：
时钟模拟
✎ 6.1 【案例5】模拟时钟
2 前导知识
① canvas组件（原生组件，默认宽高为300px*225px）
canvas 常用属性
属性类型Biblioteka 说明canvas-id disable-scroll bindtouchstart bindtouchmove bindtouchend bindtouchcancel bindlongtap binderror
第6章 API应用案例（下）
微信 小程序
• 【案例5】模拟时钟 • 【案例7】文件上传与下载
• 【案例6】罗盘动画 • 【案例8】在线聊天系统
✎
1 掌握canvas的用法
学习目标
掌握WebSocket的使用
4
熟悉canvas 的API对象 2
的用法
了解animation动画的用法
3
✎
目录
【案例5】模拟时钟