微信小程序开发实战 第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)
莫凡商城的注册、登录功能
微信小程序开发项目教程（慕课版）
工业和信息化人才培养规划教材 人民邮电出版社
本章导读
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模板思维导图下载
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】比 较数字大 小
微信小程序开发图解案例教程 第6章 综合案例：仿智行火车票12306微信小程序
图6.16
海报轮播显示
（1）进入到PAGES/TRAIN/TRAIN.WXML文件里，采用VIEW、SWIPER、IMAGE 进行布局，图片宽度设置为100%，高度设置为80PX。 SWIPER滑块视图容器设置为自动播放(AUTOPLAY="TRUE")，自动切换 时间间隔为3S(INTERVAL="3000")，滑动动画时长为1S(DURATION="1000")； 采用WX:FOR循环来显示要展示的图片，从TRAIN.JS文件里获取IMGURLS图 片路径。
仿智行火车票12306微信小程序的设计流程为：先设计底部标签导 航，添加导航对应的4个界面，即火车票、飞机票、汽车票、个人中心； 在火车票界面里设计海报轮播效果、火车票查询界面；再添加一个表设计；在个人中心界面 里完成个人中心界面设计；最后添加一个抢票界面，完成抢票界面的设 计。
（3）在WINDOW数组里配置窗口导航背景颜色为蓝色（#5495E6）， 导航栏文字为智行12306，字体颜色设置为白色（#FFFFFF）。 （4）在TABBAR对象里配置底部标签导航背景色为白色（#FFFFF）， 文字默认颜色为灰色，选中时为蓝色（#5495E6），在LIST数组里配 置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。
（4）设计火车票列表界面时，可以先设计出一条火车票信息，然 后发起网络请求获得所有的火车票列表，采用列表渲染的方式展现 出所有火车票信息。 （5）个人中心采用列表式导航的方式来进行二级界面导航，这种 导航设计也是先设计出一个菜单，其他的导航菜单可以直接复用这 个菜单的界面效果。 （6）抢票界面也是非常有规律性的界面，先设计出第一个区域内 容，其他区域内容可以直接进行复用。
微信小程序开发六
微信小程序开发(六)第六章 APIAPI框架总览(绘图API专列章学习,暂略)2.上传下载:wx.upload(object)|wx.download(object)3.嵌套字:第2节媒体API 1.图片:2.录音:3.音频控制:4.音乐控制:5.视频:6.音频组件控制:7.视频组件控制:8.文件:第3节数据API第4节位置API 1.位置:2.地图组件:第5节设备API 1.系统信息:2.网络类型:3.重力感应:4.罗盘指南:5.拨打电话:6.扫码:7.剪贴板:8.篮牙:第6节窗口API 1.互动操作:2.导航设置:3.导航操控:4.动画操作:第7节绘图API详述于第七章.第8节开放接口API1.小程序登录API=登录微信:=签名验证|加密解密为了确保开放接口返回用户数据的安全性，微信会对明文数据进行签名。
开发者可以根据业务需要对数据包进行签名校验，确保数据的完整性。
签名校验算法涉及用户的session_key，通过wx.login 登录流程获取用户session_key，并自行维护与应用自身登录态的对应关系。
通过调用接口（如 wx.getUserInfo）获取数据时，接口会同时返回 rawData、signature，其中 signature = sha1( rawData + session_key )开发者将 signature、rawData 发送到开发者服务器进行校验。
服务器利用用户对应的session_key 使用相同的算法计算出签名 signature2 ，比对 signature 与 signature2 即可校验数据的完整性。
2.用户信息3.微信支付4.模板信息不作讲解5.客服操作API=接收消息和事件-进入客服:<contack-button />-客服消息转发-消息类型:{文本,图片,事件}-格式类型:{xml,json}-公共字段:{ToUserName,FromUserName,CreateTime,MsgType,} -专有字段:文本:{Content,MsgId}图片:{PicUrl,MsgId}事件:{Event,SessionFrom}=发送客服消息=临时素材接口-新增临时素材-获取临时素材=接入指导(消息服务器接入) Step1:埴写服务器配置:Step2:服务器验证(PHP)Step3:实现服务功能6.分享功能7.二维码通过后台接口可以获取小程序任意页面的二维码，扫描该二维码可以直接进入小程序对应的页面接口地址：8.收货地址9.卡券10.设置第9节拓展接口API数据转换1．数据缓冲转为BASE64：Wx.arrayBufferToBase64(arrayBuffer) 2．BASE64转为数据缓冲：Wx.base64ToArrayBuffer(base64)[说明]此章中没有列举绘图API,在第七章中专门学习.。
《微信小程序开发与实战》课后习题答案
微信小程序企业开发实战课后习题答案答案第一章 微信小程序简介1．填空题（1）轻量（2）微信公众号、微信小程序、企业微信（3）即用即走，无须下载第二章 微信开发者工具1、填空题（1）订阅号、服务号、小程序、企业微信（2）小程序（3）WXML、WXSS、JSON、JS2、选择题（1）C（2）B第三章 微信小程序起步1．填空题（1）WXML、WXSS、JSON、JS（2）渲染层、逻辑层（3）App()、Page()、Component()2、选择题（1）D（2）D第四章 小程序的配置文件 1、填空题（1）app.json（2）style（3）page.json（4）black2、选择题（1）D（2）B（3）C第五章 WXML语法基础 1、填空题（1）Mustache（2）wx:if、wx:elif、wx:else （3）import、include2、选择题（1）B第六章 WXSS样式处理 1、填空题（1）rpx（2）px、rpx、rem（3）import2、选择题（1）B第七章 WXS语法1、填空题（1）WeiXin Script（2）module、src（3）constructor、typeof2、选择题（1）C（2）D（3）C第八章 WXS语法1、填空题（1）MINA（2）View视图层、App Service逻辑层、Native系统层（3）ECMAScript、小程序框架、小程序API2、选择题（1）A（2）B（3）C第九章 微信小程序核心组件1、填空题（1）view（2）表单（3）camera、mode（4）longitude、latitude2、选择题（1）D（2）B（3）B第十章 微信小程序核心API1、填空题（1）HTTPS（2）10（3）enablePullDownRefresh2、选择题（1）D（2）D（3）A第十一章 微信小程序开放能力1、填空题（1）wx.getUserProfile()（2）wx.requestPayment()（3）onAddToFavorites()、onShareAppMessage()、onShareTimeline() 2、选择题（1）A（2）D第十二章 微信小程序云开发1、填空题（1）云数据库、云存储、云函数（2）小程序管理员、云开发管理员、云开发开发者（3）非关系型（4）wx.cloud.callFunction()2、选择题（1）A（2）D（3）D第十三章 第三方UI组件库1、填空题（1）WXML、WXSS、JSON、JS（2）component、true（3）<slot>2、选择题（1）C（2）B。
《小程序,巧应用：微信小程序开发实战》读书笔记模板
2.3.1 MINA框架 2.3.2目录结构 2.3.3逻辑层 2.3.4视图层 2.3.5数据层
2.4.1预览、上传、审核与发布 2.4.2加载运行
2.5.1入口与界面 2.5.2与HTML 5应用开发的差异 2.5.3的最佳应用场景 2.5.4对企业、开发者的意义与影响 2.5.5开发者角色与技能要求
7.2流媒体转码与 播放——视频点播
7.1文件上传与下 载——小相册
7.3互动——高冷 机器人
7.4 LBS应 用——周边信
息点
7.5 WebSocket高 级应用——远 程控制设备
7.1.1功能详解 7.1.2程序结构 7.1.3程序细化 7.1.4程序体验
7.2.1功能详解 7.2.2程序目录结构 7.2.3程序细化
A.3投诉与处罚规范
A.4遵守当地法律监 管
A.5平台运营规 范免责声明
A.6动态文档
B.2服务类目审核
B.1账号基本信息
B.3整体审核规则
精彩摘录
这是《小程序，巧应用：微信小程序开发实战》的读书笔记模板，可以替换为自己的精彩内容摘录。
作者介绍
这是《小程序，巧应用：微信小程序开发实战》的读书笔记模板，暂无该书作者的介绍。
4.2.1 icon 4.2.2 text 4.2.3 progress
4.3.1 button 4.3.2 checkbox-group 4.3.3 checkbut 4.3.6 label
4.4.1 action-sheet 4.4.2 modal 4.4.3 toast 4.4.4 loading
2.1理解
2.3进一步了解开 发框架
2.4的发布与使 用
2.5深入理解的 应用场景
《微信小程序开发实战》读书笔记思维导图PPT模板下载
任务2.1 详解配 置文件
任务2.2 介绍微 信小程序App和 Pag...
任务2.3 构建用 户界面
任务2.4 项目实 战：祥云天气
任务2.5 添加列 表渲染
任务2.6 添加条 件渲染
任务2.7 添加事 件
本章作业
第3章 常用组件
任务3.1 掌握基 本组件的使用
任务3.2 掌握视 图容器组件的使
06 第3章 常用组件
07 第4章 常用API
目录
08
第5章 综合案例：豆 瓣电影
09
第6章 使用WePY开 发微信小程序
010
第7章 微信小游戏开 发
011
第8章 使用Cocos Creator开...
微信小程序以一种极度轻量化、无处不在、用完即走的方式全面连接到了用户与服务，在给用户带来更好体 验的同时，大幅降低了自身开发的门槛和成本。本书不局限于原生微信小程序开发，还涉及微信生态技术圈中的 WePY框架应用、微信小游戏开发、使用Cocos Creator开发小游戏等内容，是读者从微信小程序入门到实战开发 的极佳读物。 本书实用性强、示例丰富、侧重实战、与新技术结合紧密，可作为刚接触或即将接触微信小程序 的开发者的指导用书，也适合有微信小程序开发经验，但还需进一步提升自我能力的开发者使用。
任务6.1 使用 WePY创建项目
任务6.2 学习 WePY框架的基础
任务6.3 学习 WePY框架的核心
任务6.4 使用 WePY开发小猪基 金
任务6.6 实现小 猪基金详情页
任务6.5 使用 wx-charts实现
图...
本章作业
第7章 微信小游戏开发
任务7.1 介绍微 信小游戏
任务7.2 学习微 信小游戏开发基
微信小程序开发实战 第5章 API应用案例(上)
✎ 5.1 【案例1】用户登录
2 前导知识
获取缓存数据示例代码如下：
// 获取数据缓存 wx.getStorage({
key: 'key', success: res => {
console.log(res.data) }, fail: res => {} })
// 本地缓存中指定的 key // 接口调用成功的回调函数
✎ 5.1 【案例1】用户登录
5 检查用户是否已经登录
进入app.js中编写checkLogin()函数，判断token是否存在。
checkLogin: function(callback) { var token = this.globalData.token if (!token) { token = wx.getStorageSync('token') // 从数据缓存中获取token if (token) {this.globalData.token = token} else { callback({ is_login: false }) return }} // 如果token存在，请求服务器，判断是否有效
},
✎ 5.1 【案例1】用户登录
4 实现用户登录
请求login登录接口。
url: 'http://127.0.0.1:3000/login', method: 'post', data: { code: res.code }, success: res => { console.log('token: ' + res.data.token)
const wx = {
微信小程序API
}) setTimeout(function () {
wx.hideLoading() }, 2000)
6.1 界面交互API
10
单击“操作菜单”按钮，如图所示。
wx.showActionSheet({ itemList: ['A', 'B', 'C'], success(res) {
确保手机微信小程序打开调试。 单击“打开地图选择位置”按钮，如图所示。
6.2 地图操作
21
单击“获取当前的地理位置、速度”按钮，如图 所示，在手机上单击“去这里”图标，将调用手 机上的导航软件
6.3 常用组件
22
常用组件是WXML的一些基本标签，如view、input等。在微信小程序中，很多标签带 有自己的效果，可以实现一些简单的JS逻辑。一个微信小程序页面可以分解成多个组成部分， 组件就是微信小程序页面的基本组成单元。为了让开发者快速进行开发，微信小程序的宿主 环境中提供了一系列基础组件。
console.log(res.tapIndex)}, fail(res) {
console.log(res.errMsg)} })
6.1 界面交互API
11
单击“动态设置当前页面的标题”按钮，如 图所示，将标题设置为“当前页面”。
wx.setNavigationBarTitle({ title: '当前页面' })
异步API 大多数API是异步API，如 wx.request、wx.login等。 这类API通常会接收一个 Object类型的参数。
6.1 界面交互API
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第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】模拟时钟