微信小程序为开发者提供了大量的 API。开发者通过 API 可以获得微信底层封装的高级特性，同时可以很方便地调用微信提供的各种能力，例如网络请求、获取用户信息、本地存储等能力。

学习目标：

掌握 scroll-view 组件，能够完成视图区域的横向滚动或者纵向滚动
掌握 slider 组件，能够运用 slider 组件完成滑动选择器的制作
掌握 <include> 标签，能够运用 < include > 标签引用其他文件中的代码
掌握背景音频 API，能够运用背景音频 API 实现音频后台播放、音频暂停等功能
掌握录音 API，能够运用录音 API 实现录音功能
掌握音频 API，能够运用音频 API 实现音频播放、暂停等功能
掌握选择媒体 API，能够运用 wx.chooseMedia () 方法选择图片或视频
掌握图片预览 APIreviewlmage () 方法预览图片
掌握文件上传 API，能够实现将本地资源上传到服务器中
能够运用 wx.downloadFile0) 方法实现资源文件的下载掌握文件下载 API
掌握 canvas 组件，能够灵活运用 canvas 组件创建画布
掌握画布 API，能够运用画布 API 完成图形的绘制

# 1.scroll-view

当一个容器中的内容有很多时，如果容器无法完整显示内容，则可以通过滚动操作来查看完整内容。

在微信小程序中，可以通过 scroll-view 组件来实现滚动效果，它支持横向滚动和纵向滚动，默认是不滚动的，需要通过 scroll-x 和 scroll-y 属性允许横向和纵向滚动。

scroll-view 组件的常用属性如下表所示：

属性	类型	说明
scroll-x	boolean	允许横向滚动，默认值为 false
scroll-y	boolean	允许纵向滚动，默认值为 false
scroll-top	number/string	设置竖向滚动条的位置，默认值为空
scroll-left	number/string	设置横向滚动条的位置，默认值为空
scroll-into-view	string	当前可在哪个方向滚动，则在哪个方向滚动到该元素。值为某子元素 id（id 不能以数字开头）
scroll-with-animation	boolean	在设置滚动条位置时是否使用动画过渡，默认值为 false
bindscrolltoupper	eventhandle	滚动到顶部 / 左边时触发的事件
bindscrolltolower	eventhandle	滚动到底部 / 右边时触发的事件
bindscroll	eventhandle	滚动时触发的事件

允许横向滚动、纵向滚动后，还需要使 scroll- view 组件中内容的宽度和高度大于 scroll-view 组件本身的宽度和高度，这样才能滚动。

在实际开发中，由于 scroll-view 组件的默认宽度为 100%，会占满整个屏幕，所以当内容的宽度超出屏幕宽度显示范围时，即可横向滚动。

若要实现纵向滚动，则需要在样式中为 scroll-view 组件设置一个固定高度，否则 scroll-view 组件会被内容撑大，导致无法纵向滚动。

scroll-view 组件的使用案例：

①在 pages/index/index.wxml 文件中编写页面结构。

	<scroll-view scroll-x="true" scroll-y="true" style="height: 200px;" bindscroll="scroll">
	<view style="width: 200%; height: 400px; background-image: linear-gradient(to bottom right, red, yellow);">
	</view>
	</scroll-view>
	<!-- scroll-view 组件设置了允许横向滚动和纵向滚动。-->

②在 pages/index/index.js 文件中添加 scroll () 事件处理函数输出 e.detail 的值。

	scroll: function (e) {
	console.log(e.detail)
	}
	// 通过 e.detail 获取滚动时的位置信息。

拖曳滚动条使 scroll () 函数执行，然后在控制台中查看输出结果如下图所示：

e.detail 为自定义事件所携带的数据，下面对上图中获取到的信息进行讲解，具体如下。

scrollLeft：横向滚动条左侧到视图左边的距离。
scrollTop：纵向滚动条上端到视图顶部的距离。
scrollHeight：纵向滚动条在 Y 轴上最大滚动距离。
scrollWidth：横向滚动条在 X 轴上最大的滚动距离。
deltaX：横向滚动条的滚动状态。
deltaY：纵向滚动条的滚动状态。

# 2.slider 组件

在微信小程序中，通过 slider 组件可以定义一个滑动选择器。

slider 组件是微信小程序表单组件中的一种，用于滑动选择某一个值。用户可以通过拖曳滑块在一个固定区间内进行选择。

slider 组件的常用属性如下表所示：

属性	类型	说明
min	number	最小值，默认值为 0
max	number	最大值，默认值为 100
step	number	步长，取值大于 0，可被 max-min 整除，默认值为 1
value	number	当前取值，默认值为 0
activeColor	color	已选择的颜色，默认值为 #1aad19
backgroundColor	color	背景条的颜色，默认值为 #e9e9e9
block-size	number	滑块的大小，取值范围为 12~28，默认值为 28
block-color	color	滑块的颜色，默认值为 #ffffff
show-value	boolean	是否显示当前值，默认值为 false
bindchange	eventhandle	完成一次拖曳后触发的事件
bindchanging	eventhandle	拖曳过程中触发的事件

slider 组件的使用

①在 pages/index/index.wxml 文件中编写页面结构。

<slider bindchanging="sliderChanging" show-value="true" />

<!-- 当拖曳 slider 组件的滑块时，会执行 sliderChanging () 事件处理函数 -->

<!-- 通过设置 show-value 属性可将当前值显示出来 -->

②在 pages/index/index.js 文件中编写事件处理函数 sliderChanging ()。

	sliderChanging: function (e){
	console.log(e.detail.value)
	}
	//e.detail.value 表示当前 slider 组件的值

保存代码后，会看到页面中显示了一个滑动选择器。拖曳滑块到 13 的页面效果

如下图所示：

在控制台中可以看到 sliderChanging () 函数执行时输出的当前 slider 值如下图所示：

# 3.<include> 标签

<include> 标签用于引用其他文件的代码，相当于把引用的代码复制到 < include > 标签的位置。

<include> 标签的用途主要有以下两点，具体如下：

当一个 WXML 页面中的代码过多时，会给代码的维护带来麻烦，有时为了找到某一处代码可能需要翻阅几百行。这时可以利用 <include> 标签将代码拆分到多个文件中，从而可以更方便地查找代码。
当多个 WXML 页面中有相同的部分时，可以将这些公共部分抽取出来，保存到一个单独的 WXML 文件中，然后在用到的地方通过 <include> 标签引入。这样可以减少重复的代码，并且修改时只需要修改一次。

<include> 标签的使用案例：

假设在 index.wxml 文件中，页面的头部和尾部是公共部分，可将头部代码抽取到 header.wxml 文件中、尾部代码抽取到 footer.wxml 文件中，然后在 index.wxml 文件中使用标签进行引入。

在 pages/index/index.wxml 文件中编写页面结构。

	<!-- index.wxml -->
	<include src="header.wxml" />
	<view>body</view>
	<include src="footer.wxml" />

在 pages/index/header.wxml 文件中编写头部的页面结构
<view>header</view>
在 pages/index/footer.wxml 文件中编写尾部的页面结构
<view>footer</view>
当上述代码运行后，实际得到的 pages/index/index.wxml 文件的页面结构如下所示
<view>header</view>
<view>body</view>
<view>footer</view>

# 4. 背景音频 API

在微信小程序中，使用背景音频 API 可以实现音频的后台播放

在使用背景音频 API 前，需要在 app.json 文件中配置 requiredBackgroundModes 属性，开启微信小程序后台音频播放功能，示例代码如下。

"requiredBackgroundModes":  ["audio"]  //requiredBackgroundModes 属性值为数组类型，在数组中添加 audio 项表示开启后台音频播放功能。

背景音频 API 的使用方法如下：

第一步：通过 wx.getBackgroundAudioManager () 方法获取到一个 BackgroundAudioManager 实例；

var audioGbam =  wx.getBackgroundAudioManager()  //BackgroundAudioManager 实例

第二步：通过 BackgroundAudioManager 实例的相关属性和方法实现背景音频的播放。

BackgroundAudioManager 实例常用的属性和方法：

类型	名称	说明
属性	src	背景音频的数据源，默认值为空字符串，当设置了新的 src 时，会自动开始播放，目前支持的格式有 M4A、AAC、MP3、WAV
属性	startTime	背景音频开始播放的位置（单位：秒）
属性	title	背景音频标题，用于原生音频播放器的背景音频标题
属性	playbackRate	播放速率，范围 0.5∼2.00.5∼2.0 倍，默认值为 1 倍
属性	duration	当前背景音频的长度（单位：秒），只有在有合法 src 时有效（只读）
属性	currentTime	当前背景音频的播放位置（单位：秒），只有在有合法 src 时有效（只读）
属性	paused	当前是否暂停或停止（只读）
方法	play()	播放背景音频
方法	pause()	暂停背景音频
方法	seek()	跳转到指定位置
方法	stop()	停止背景音频
方法	onCanplay()	背景音频进入可以播放状态的事件（参数为回调函数）
方法	onWaiting()	监听背景音频加载中事件，当背景音频因为数据不足需要停下来加载时会触发
方法	onError()	监听背景音频播放错误事件
方法	onPlay()	监听背景音频播放事件
方法	onPause()	监听背景音频暂停事件
方法	onSeeking()	监听背景音频开始跳转操作事件
方法	onSeeked()	监听背景音频完成跳转操作事件
方法	onEnded()	监听背景音频自然播放结束事件
方法	onStop()	监听背景音频停止事件
方法	onTimeUpdate()	监听背景音频播放进度更新事件，只有微信小程序在前台时会回调

背景音频 API 的使用案例：

在 pages/index/index.js 文件中的 onReady () 函数中编写如下代码。

	onReady: function () {
	// 创建 BackgroundAudioManager 实例
	var audio = wx.getBackgroundAudioManager()
	// 当开始播放音乐时，输出调试信息
	audio.onPlay(function () { console.log('开始播放') })
	// 设置背景音频的标题
	audio.title = '音乐标题'
	// 设置背景音频的资源地址
	audio.src = 'http://127.0.0.1:3000/1.mp3'
	}

# 5. 录音 API

录音功能在日常生活中使用很广泛，使用该功能可以记录重要的工作内容、优美的歌声等。那么在微信小程序中如何实现录音功能呢？微信小程序为开发者提供了录音 API。

录音 API 的使用方法如下：

第一步：通过 wx.getRecorderManager () 方法获取到一个 RecorderManager 实例，该实例是一个全局唯一的录音管理器，用于实现录音功能；

var recorderManager =  wx.getRecorderManager()  //RecorderManager 实例

第二步：通过 RecorderManager 实例的方法实现录音功能。

RecorderManager 实例的常用方法如下表所示。

方法名称	说明
start()	开始录音
pause()	暂停录音
resume()	继续录音
stop()	停止录音
onStart()	监听录音开始事件
onResume()	监听录音继续事件
onPause()	监听录音暂停事件
onStop()	监听录音结束事件

onFrameRecord	监听已录制完指定帧大小的文件事件。如果设置了 frameSize, 则会回调此事件
onError()	监听录音错误事件
onInterruptionBegin	监听录音因为系统占用而被中断开始事件。以下场景会触发此事件：微信语音聊天、微信视频聊天，此事件触发后，录音会被暂停。pause 事件在此事件后触发
onInterruptionEnd	监听录音中断结束事件。在收到 interruptionBegin 事件后，微信小程序内所有录音会暂停，收到此事件之后才可再次录音成功

录音 API 的使用案例：

在 pages/index/index.js 文件中的 onReady () 函数中编写如下代码。

	// 获取全局唯一的录音管理器 RecorderManager
	var recorderManager = wx.getRecorderManager()
	// 监听录音开始事件
	recorderManager.onStart(() => {
	console.log('录音开始');
	})
	// 监听录音停止事件
	recorderManager.onStop(res => {
	console.log('录音停止')
	console.log(res.tempFilePath)
	}) // 开始录音
	recorderManager.start()
	// 5 秒后自动停止录音
	setTimeout(() => {
	recorderManager.stop()
	}, 5000)

# 6. 音频 API

在微信小程序中，除了背景音频 API 可以实现播放音频的功能外，还可以通过音频 API 来播放音乐。

背景音频 API 与音频 API 的区别在于背景音频 API 支持后台播放，而音频 API 不支持后台播放。

音频 API 的使用方法如下：

第一步：通过 wx.createInnerAudioContext () 方法获取到一个 InnerAudioContext 实例；

var audioCtx =  wx.createInnerAudioContext()  //InnerAudioContext 实例

第二步：通过 InnerAudioContext 实例的属性和方法实现音频播放功能。

InnerAudioContext 实例常用的属性和方法与 BackgroundAudioManager 实例常用的属性和方法相同，但是 InnerAudioContext 实例没有 title 属性。InnerAudioContext 实例特有的属性和方法如下表所示


类型	名称	说明	默认值
属性	autoplay	是否自动开始播放，默认值为 false	false
属性	loop	是否循环播放，默认值为 false	false
属性	volume	音量，范围 0∼10∼1 , 默认值为 1	1
方法	destroy()	销毁当前实例

音频 API 的使用案例：

	// 创建 InnerAudioContext 实例
	var audioCtx = wx.createInnerAudioContext()
	// 设置音频资源地址
	audioCtx.src = 'http://127.0.0.1:3000/1.mp3'
	// 当开始播放音频时，输出调试信息
	audioCtx.onPlay(() => {
	console.log('开始播放')
	}) // 开始播放 audioCtx.play ()

# 7. 媒体 API

微信小程序提供了选择媒体 API，其用于选择图片或视频，一般用于上传头像、上传照片和上传视频等功能中。

通过调用 wx.chooseMedia () 方法即可使用选择媒体 API，该方法执行后，会提示用户拍摄图片或视频，或从手机相册中选择图片或视频。

wx.chooseMedia () 方法的常用选项如下表所示

选项	类型	说明
count	number	最多可以选择的文件个数，默认值为 9
mediaType	Array.< string>	文件类型，默认值为 ['image', 'video']
sourceType	Array.< string>	图片和视频选择的来源，默认值为 ['album', 'camera']
maxDuration	number	拍摄视频最长拍摄时间，单位秒。时间范围为 3~60 秒之间。不限制相册，默认值为 10
camera	string	仅在 sourceType 为 camera 时生效，可设置使用前置或后置摄像头，默认值为 back
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行）

mediaType 选项的合法值有 3 个：

image（只能拍摄图片或从相册选择图片）；
video（只能拍摄视频或从相册选择视频）；
mix（可同时选择图片和视频）。

sourceType 选项的合法值有 2 个：

album（从相册选择）；
camera（使用相机拍摄）。

媒体 API 的使用：

在 pages/index/index.wxml 文件中编写页面结构
<button bindtap="test">选择图片</button>
为按钮绑定了 test () 函数

在 pages/index/index.js 文件中编写事件处理函数 test ()

	test: function () {
	wx.chooseMedia({
	count: 9,
	// 最多可以选择 9 个文件
	mediaType: ['image'],
	// 文件类型为只能拍摄图片或从相册中选图片 s
	ourceType: ['album', 'camera'],
	// 图片来源为从相册选择和使用相机拍摄 success (res)
	{
	// 获取用户选择的文件
	const tempFilePath =res.tempFiles[0].tempFilePath
	console.log(tempFilePath)
	}
	})
	}

# 8. 图片预览 API

微信小程序提供了图片预览 API，通过图片预览 API 可以预览图片，且在预览过程中用户可以进行保存图片、发送给朋友等操作。

通过调用 wx.previewImage () 方法即可使用预览图片 API。

wx.previewImage () 方法的常用选项如下表所示：

选项	类型	说明
urls	Array.< string>	需要预览的图片链接，为必填项，默认值为 ""
showmenu	boolean	是否显示长按菜单，默认值为 true
current	string	当前显示图片的链接，默认值为 urls 的第一张
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（调用成功、失败都会执行）

urls 选项支持 http 或者 https 协议的网络图片地址，如果使用本地图片进行预览，会出现黑屏加载不出图片的情况。

通过 wx.previewImage () 方法预览图片：

在 pages/index/index.js 文件的 Page ({}) 中定义页面所需的数据。
data: {
url:'http://127.0.0.1:3000/tree.jpg'
},
定义了 url 属性，表示图片地址，该图片来自本地服务器
在 pages/index/index.wxml 文件中编写页面结构
<image src="" bindtap="previewImage"
为 image 组件绑定 tap 事件，事件处理函数为 previewImage () 函数，点击按钮可实现图片的预览

在 pages/index/index.js 文件的 Page ({}) 中添加 previewImage () 函数，实现图片的预览

	previewImage() {
	wx.previewImage({
	urls: [
	this.data.url // 需要预览的图片链接列表
	]
	})
	}

运行程序，单击图片前后的对比如下图所示:

# 9. 文件上传 API

在生活中，经常需要进行文件上传操作，例如更改头像需要将新的头像上传到服务器中。微信小程序提供了文件上传 API，使用文件上传 API 可以在微信小程序中发起一个 POST 请求，将本地资源上传到服务器。通过调用 wx.uploadFile () 方法即可使用文件上传 API。

wx.uploadFile () 方法的常用选项：

选项	类型	说明
url	string	开发者服务器地址，该项为必填项
header	object	HTTP 请求的 Header, Header 中不能设置 Referer
timeout	number	超时时间，单位为毫秒
name	string	文件对应的 key, 开发者在服务器端可以通过这个 key 获取文件的二进制内容，该项为必填项
filePath	string	要上传的文件资源的路径（本地路径），该项为必填项
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（接口调用成功、失败都会执行）

文件上传 API 的使用案例：

	wx.uploadFile({
	filePath: '文件路径',
	name: 'image',
	url: 'http://127.0.0.1:3000/upload',
	success: res => {
	console.log(res)
	}
	})

# 10. 下载 API

在生活中，经常需要下载一些文件，例如将网络中某个参考资料下载到本地进行查看。

微信小程序提供了文件下载 API，使用文件下载 API 可以实现文件下载功能。通过调用 wx.downloadFile () 方法即可使用文件下载 API。

wx.downloadFile () 方法的常用选项如下表：

选项	类型	说明
url	string	下载资源 url, 该项为必填项
header	object	HTTP 请求的 Header,Header 中不能设置 Referer
timeout	number	超时时间，单位为毫秒
filePath	string	指定文件下载后存储的路径（本地路径）
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数（接口调用成功、失败都会执行）

文件下载 API 的使用案例：

	wx.downloadFile({
	url: 'http://127.0.0.1:3000/tree.jpg',
	success: res => {
	// 判断服务器响应的状态码
	if (res.statusCode === 200) {
	console.log(res.tempFilePath)
	}
	}
	})

# 11.canvas 组件

在 HTML 中，<canvas> 标签可用于图形的绘制，也可用于创建图片特效和动画。在微信小程序中，canvas 组件也起着类似作用，可用于自定义绘制图形，该组件支持 2D 和 WebGL 的绘图。

canvas 组件的常用属性如下表：

属性	类型	说明
type	string	指定 canvas 组件的类型，支持 2D 和 WebGL
canvas-id	string	canvas 组件的唯一标识符，若指定了 type 属性则无须再指定该属性
disable-scroll	boolean	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动及下拉刷新，默认值为 false
bindtouchstart	eventhandle	手指触摸动作开始
bindtouchmove	eventhandle	手指触摸后移动
bindtouchend	eventhandle	手指触摸动作结束
bindtouchcancel	eventhandle	手指触摸动作被打断，例如来电提醒，弹窗等
bindlongtap	eventhandle	手指长按 500 毫秒之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror Grill	eventhandle	当发生错误时触发 error 事件

canvas 组件的使用案例：

①在 pages/index/index.wxml 文件中编写页面结构。

	<canvas id="myCanvas" type="2d"></canvas>
	<!-- 定义了 canvas 组件，用于创建画布。其中，type 属性值为 2d，表示使用 Canvas 2D 接口。 -->

②在 pages/index/index.wxss 文件中编写 canvas 组件的页面样式。

	#myCanvas {
	display: block;
	width: 300px;
	height: 150px;
	position: relative;
	border: 1px solid red;
	}

为了方便查看默认 canvas 组件的大小，设置了 1px 的红色实心边框，页面效果如下图所示。

# 12. 画布 API

概念：通过 canvas 组件创建画布后，要想在画布中绘制图案，需要通过画布 API 来完成。

画布 API 的使用方法如下：

第一步：获取 Canvas 实例；
第二步：通过 Canvas 实例获取 RenderingContext（渲染上下文）实例；
第三步：通过 RenderingContext 实例的属性和方法完成绘图操作。

获取 Canvas 实例的示例代码如下：

	wx.createSelectorQuery()
	.select('#myCanvas')
	// 页面中 & lt;canvas > 标签的 id
	.fields({ node: true, size: true })
	.exec(res => {
	// 获取 Canvas 实例
	const canvas = res[0].node
	// 调用 getContext () 方法获取 RenderingContext 实例
	const ctx = canvas.getContext('2d')
	})

RenderingContext 实例的常用属性和方法如下表所示：

类型	名称	说明
属性	width	画布宽度
属性	height	画布高度
属性	fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
属性	strokeStyle	设置描边颜色
属性	lineWidth	设置或返回当前的线条宽度
属性	font	设置或返回文本内容的当前字体属性
属性	textBaseline	设置或返回在绘制文本时使用的当前文本基线

方法表

类型	名称	说明
方法	rect()	创建矩形
方法	fillRect()	绘制 “被填充” 的矩形
方法	strokeRect()	绘制矩形（无填充）
方法	clearRect()	在给定的矩形内清除指定的像素
方法	stroke()	绘制已定义的路径
方法	beginPath()	开始创建一个路径
方法	closePath()	创建从当前点回到起始点的路径
方法	moveTo()	把路径移动到画布中的指定点，不创建线条
方法	arc()	创建一条弧线
方法	rotate()	以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate () 方法修改，旋转角度为正数，顺时针旋转，否则逆时针旋转
方法	translate()	对当前坐标系的原点 (0,0) 进行变换。默认的坐标系原点为页面左上角
方法	fillText()	在画布上绘制被填充的文本
方法	restore()	恢复之前保存的绘图上下文
方法	save()	保存绘图上下文

Canvas 绘制的基本步骤

①在 pages/index/index.wxml 文件中编写页面结构。

	<canvas id="draw" type="2d"></canvas>
	<!-- 定义了 canvas 组件，用于创建画布。其中，type 属性值为 2d，表示使用 Canvas 2D 接口。-->

②在 pages/index/index.js 文件中编写代码获取 Canvas 实例。

	onReady: function () {
	wx.createSelectorQuery().select('#draw')
	.fields({ node: true, size: true })
	.exec(res => {
	const canvas = res[0].node
	const ctx = canvas.getContext('2d')
	this.drawRect(ctx)
	this.drawSmile(ctx)
	})
	},
	drawRect: function (ctx) {
	// 绘制矩形，在后面的步骤中实现
	},
	drawSmile: function (ctx) {
	// 绘制笑脸，在后面的步骤中实现
	}

③编写绘制矩形函数 drawRect ()。

	drawRect: function (ctx) {
	ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
	ctx.fillRect(10, 10, 150, 50)
	},

矩形的绘制效果如下图所示

④接下来绘制笑脸，先把调用绘制矩形的方法注释起来。

// this.drawRect(ctx)

⑤编写绘制笑脸函数 drawSmile ()。

	drawSmile: function (ctx) {
	// 设置线条颜色为红色，线条宽度为 2px
	ctx.strokeStyle = '#f00'
	ctx.lineWidth = '2'
	// 移动画笔坐标位置，绘制外部大圆
	ctx.moveTo(160, 80)
	ctx.arc(100, 80, 60, 0, 2 * Math.PI, true)
	// 移动画笔坐标位置，绘制外部嘴巴线条
	ctx.moveTo(140, 80)
	ctx.arc(100, 80, 40, 0, Math.PI, false) } drawSmile: function (ctx) {
	原有代码……
	// 移动画笔坐标位置，绘制左眼圆圈
	ctx.moveTo(85, 60)
	ctx.arc(80, 60, 5, 0, 2 * Math.PI, true)
	// 移动画笔坐标位置，绘制右眼圆圈
	ctx.moveTo(125, 60)
	ctx.arc(120, 60, 5, 0, 2 * Math.PI, true)
	ctx.stroke()
	}

笑脸的绘制效果如下图所示：

微信小程序

	<view>header</view>
	<view>body</view>
	<view>footer</view>

	data: {
	url:'http://127.0.0.1:3000/tree.jpg'
	},

# 1.scroll-view

# 2.slider 组件

# 3.<include> 标签

# 4. 背景音频 API

# 5. 录音 API

# 6. 音频 API

# 7. 媒体 API

# 8. 图片预览 API

# 9. 文件上传 API

# 10. 下载 API

# 11.canvas 组件

# 12. 画布 API

第三章：微信小程序页面交互

第五章：微信小程序常用API（下）