第一章
认识微信小程序
简介：是腾讯公司于2011年1月21日推出的一款为智能终端提供实时通信的应用程序。
正式上线的时间是2017年1月
优势：
1.无需安装
2.触手可及
3.用完即走
4.无需卸载
场景：
1.简单的业务逻辑
2.低频率的使用场景
微信开发者工具页面功能介绍：
1.工具栏
2.模拟区
3.目录文件区
4.编辑区
5.调试区
1）Console 面板：调试小程序的控制面板
2）Sources 面板：源文件调试信息页
3）Network 面板：网络调试信息页
4）Security 面板：安全认证信息页
5）Storage 面板：数据存储信息页
6）AppData 面板：实时数据信息页
7）Wxml 面板：布局信息页
8）Sensor 面板：重力传感器信息页
9）Trace 面板：路由追踪信息页
10）扩展菜单项：设置开发工具的定制与开发
1本章小结：
首先介绍了微信小程序，讲解了微信小程序的特征及微信小程序应用场景的特点，然后重点讲解了微信小程序项目的开发流程，最后介绍了微信小程序开发工具的使用。
第二章
小程序基本目录结构
主体文件有3个
app.js 逻辑文件
app.json 公共设置文件
app.wxss 主样式表文件
页面文件有4个
.js 逻辑文件
.wxml 结构文件
.wxss 样式表文件
.json 配置文件
小程序开发框架
小程序 MINA 框架系统分为视图层（View）和逻辑层（App Service)
View 由框架设计的标签语言 WXML 和用于描述组件样式 WXSS 组成，它们的关系就像 HTML 和 CSS的关系。
App Service是 MINA 框架服务中心，由微信客户端启用异步线程单独加载运行。
如何存储数据文件
使用API接口，如下：
wx. getStorage 获取本地数据缓存
wx. setStorage 设置本地数据缓存
wx. clearStorage 清理本地数据缓存
网络存储与调用
wx. request 发起网络请求
wx.uploadFile 上传文件
wx.downloadFile 下载文件
wx.navigateTo 新窗口打开页面
wx.redirectTo 原窗口打开页面
如何创建小程序页面
1. 启动微信开发工具，点击新建文件夹，创建新的项目news
点击 + ，新建文件（顺序可变换）
news.js 代码内容：空
news.json 代码内容：{ "pages" :[ "pages/index/index" ] }
news.wxml 代码内容：欢迎学习小程序，实现大梦想！
news.wxss 代码内容：空
3. 点击app.json，加入 "pages/news/news",
如何配置文件
配置文件分为全局配置文件（app.json) 和页面配置文件（*.json)
1. 全局配置项
2. window 配置项
3. tabBar 配置项
3.1 tabBar 中 list 选项
4. networkTimeout 配置项
什么是逻辑层文件
小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件
定义页面生命周期函数
onLoad 页面加载函数
onShow 页面显示函数
onReady 页面数据绑定函数
onHide 页面隐藏函数
onUnload 页面卸载函数
条件数据绑定
条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件
1. wx:if 条件数据绑定；判断是否数据绑定当前组件
例如：< view wx:if ="{{ conditon }}">内容< /view >
2. block wx:if 条件数据绑定；当需要通过一个表达式去控制多个组件时，可以通过< block >将多个组件包起来，然后在<block>中添加 wx:if 属性即可
例如：< block wx:if="{{ true }}" >
< view >view1< /view >
< view >view2 < /view >
< /block >
列表数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定
1. wx:for 控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件
格式：< view wx:for = "{{ items }}” >
{{ index }} : {{ item }}
< /view >
items为一个数组，数组当前项的下标变量名默认为index，数组当前项的变量名默认为item
2. block wx:for 与 block wx:if 类似，在wxml中也可使用< block >包装多个组件进行列表数据绑定
格式：
< block wx:for = "{{ student }}" >
< view >
< text > {{ index }} < /text >
< text >{{ item,name }} < /text >
< text > {{ item.age }} < /text >
< text >{{ item.hobby }} < /text >
< /view >
< /block >
事件
在小程序中，事件分为冒泡事件和非冒泡事件两大类型
冒泡事件：指某个组且件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素
非冒泡事件：指某个组件上的事件被触发后，该事件不会向父节点传递。在WXML中，冒泡事件有6个
页面样式文件（WXSS）
具有Css大部分特性
2本章小结：
首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。
第三章
盒子模型
盒子模型元素有 margin ，padding ，border ，width ， height
微信小程序的视图层由 WXML 和 WXSS 组成
WXSS用于描述WXML的组成样式，决定WXML的组件如何显示
盒子模型结构
width 和 height
内容的宽度和高度
padding - top , padding - right , padding - bottom 和 padding - left
上内边距，右内边距，底内边距和左内边距
border - top , border - right , border - bottom 和 border - left
上边框，右边框，底边框和左边框
margin - top , margin - right , margin - bottom 和 margin - left
上外边框，右外边框，底外边框和左外边框
块级元素与行内元素
元素按显示分为块级元素，行内元素和行内块元素，它们的显示方式由 display 属性控制
块级元素特点：
（1）一个块级元素占一行
（2）块级元素的默认高度由内容决定，除非自定义高度
（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度
（4）块级元素的宽度、高度、外边距及内边距都可以自定义设置
（5）块级元素可以容纳块级元素和行内元素
行内元素特点：
（1）行内元素不能设置高度和宽度，其高度和宽度由内容决定
（2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素
（3）同一块内，行内元素和其他行内元素显示在同一行
当元素的 display 属性被设置为 inline- block 时，元素被设置为行内块元素
行内块元素可以被设置高度、宽度、内边距和外边距
浮动与定位
float 属性定义浮动
基本格式：
{ float:none |left |right ; }
clear 属性用于清除浮动元素对其他元素的影响
基本格式：
{ clear:left |right |both |none }
元素定位
position属性可以实现对页面元素的精确定位
基本格式：
{ position:static |relative |absolute |fixed }
static 默认值，该元素按照标准流进行布局
relative 相对定位
absolute 绝对定位
fixed 固定定位
flex 布局
flex布局是万维网联盟在 2009年 提出的一种新布局方案
flex是 flexible box 的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局
flex布局主要由容器和项目组成
容器默认存在两根轴：水平主轴和垂直交叉轴
设置 display 属性可以将一个元素指定为flex布局，设置 flex- direction 属性可以指定轴方向
主轴既可以是水平方向，也可以是垂直方向
flex 布局模型
1.1 flex 容器属性有 7 种
1. display
指定元素是否为flex布局，
语法格式为：
.box{display:flex |inline - flex;}
2. flex - direction
设置主轴的方向，即项目排列的方向
语法格式为：
.box{flex -direction:row |row -reverse |column |column - reverse;}
row 起点在左端
row - reverse 起点在右端
column 起点在顶端
column - reverse 起点在底端
fex - direction 示例
(a) row；(b) row - revene；(e) column； (d) column - revense
3. flex - wrap
指定当项目在一根轴线的排列位置不够时，项目是否换行
语法格式为：
.box{flex -wrap;nowrap lwrap lwrap -reverse;}
nowrap 不换行，默认值
wrap 换行,第一行在上方
wrap - reverse 换行，第一行在下方
align - item 自动换行；但align-item的值不能为“stretch”
fex-wrap示例
(a) nownap；(b) wrap；(c) wrap - revense
4. flex - flow
默认值为rownowrap
语法格式如下：
.box{flex - flow:<flex - direction>||<flex - wrap>;}
.box| flex - flow;row nowrap;| //水平方向不换行
.box|flex - flow:row - reverse wrap;| //水平方向逆方向换行
.box|flex - flow:column wrap - reverse;} //垂直方向逆方向换行
5. justify - content
定义项目在主轴上的对齐方式
语法格式如下：
.box{justify - content:flex - start |flex - end |center |space - between |space - around;}
justify - content 方向从左到右
flex - start 左对齐
flex - end 右对齐
center 居中
space - between 两端对齐
space - around 每个项目两侧的间隔相等
justify - content 示例
(a) flex - start；(b) center；(c) flex - end；(d) space - between；(e)space - around
6. align - items
指定项目在交叉轴上的对齐方式
语法格式如下：
.box{align -items:flex -start |flex -end Icenter Ibaseline Istretch;}
align - items 默认交叉由上到下
flex - start 交叉轴起点对齐
flex - end 交叉轴终点对齐
center 交叉轴中线对齐
baseline 项目根据它们第一行文字的基线对齐
stretch 未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值
7. align - content
定义项目有多根轴线的对齐方式，如果只有一根轴线，该属性不起作用
语法格式如下：
.box{align - content:flex - start |flex - end | center |space - between space - around |stretch}
space - between 与交叉轴两端对齐，轴线之间的间隔平均分布
space - around 每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍
其余各属性值的含义与align-items属性的含义相同
align - content 示例
(a) flex - start； (b) center； (e) flex - end
1.2 项目属性有 6 种
1. order
定义项目的排列顺序，数值越小，排列越靠前，默认值为0
语法格式如下：
.item{order: < number >;}
2. flex - grow
定义项目的放大比例，默认值为0，即不放大
语法格式如下：
.item{flex - grow:< number >;}
3. flex - shrink
定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小
语法格式如下：
.item{flex - shrink: < number >;}
4. flex - basis
定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto
语法格式如下：
.item{flex - basis: < number > lauto;}
5. flex
其默认值分别为0、1、auto
语法格式如下：
.item{flex:< flex - grow >|< flex - shrink >|< flex - basis >;}
6. align - self
指定单独的伸缩项目在交叉轴上的对齐方式，该属性会重写默认的对齐方式
语法格式如下：
.item {align - self:auto |flex - start |flex - end |center |baseline stretch;}
auto 表示继承容器align-items 的属性，如果没有父元素，则等于stretch(默认值)
3本章总结：
本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了flex布局的基本原理、容器和项目的相关属性
第四章
组件的定义及属性
1.1 语法格式如下：
< 标签名 属性名 = “属性值” > 内容.... < /标签名 >
id 组件的唯一表示，保持整个页面唯一，不常用
class 组件的样式类，对应 WXSS 中定义的样式
style 组件的内联样式，可以动态设置内联样式
hidden 组件是否显示，所有组件默认显示
data - * 组件触发事件时，会发送给事件处理函数
以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值
bind * / catch * 绑定逻辑层相关事件处理函数
1.2 容器视图组件
主要包括：view，scroll - view 和 swiper 组件
1.2 swiper
swiper 组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的 swiper 组件由 <swiper/> 和<swiper - item/>两个标签组成，不能单独使用
二. 基础内容组件
基础内容组件包括icon，text 和 progress，主要用在视图页面中展示图标、文本和进度条等信息
1.3 icon
icon组件即图标组件，通常用于表示一种状态
1.4 progress
progress 组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等
progress 组件属于块级元素
2.5 progress组件属性
三. 表单组件
1.5 button
button 组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用
当 <button> 被 <form/> 包裹时，可以通过设置form - type属性来触发表单对应的事件
2.6 buttom组件属性
1.6 radio
radio 单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio- group/ > (单项选择器)和<radio/>(单选项目)两个组件组合而成
2.7 radio- group 及 radio 组件属性
1.7 checkbox
复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox - group/>(多项选择器)和< checkbox/>(多选项目)两个组件
2.8 checkbox-group 及 checkbox 组件属性
1.8 switch
switch 组件的作用类似开关选择器
2.9 switch 组件属性
1.9 slider
slider 组件为滑动选择器，可以通过滑动来设置相应的值
3.0 slider组件属性
2.0 picker
picker 组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择
picke组件目前支持5种选择器，分别是：selector 普通选择器，multiSelector 多列选择器，time 时间选择器，date 日期选择器、region 省市选择器
1. 普通选择器 mode=selector
3.1 picker组件中selector选择器属性
2. 多列选择器 mode=multiSelector
允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象
3.2 picker 组件 multiSelector 选择器属性
3.3 picker 组件 time 选择器属性
3.4 picker 组件 date 选择器属性
3.5 picker 组件 region 选择器属性
2.1 picker-view
picker-view 组件为嵌入页面的滚动选择器
组件的列的个数和列的内容由用户通过 <picker-view-column/> 自定义设置
3.6 picker-view 组件属性
picker-view 组件为嵌入页面的滚动选择器
组件的列的个数和列的内容由用户通过 <picker-view-column/> 自定义设置
label
abel组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id,或者将控件放在该标签下，当点击label组件时，就会触发对应的控件。for属性的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前，label组件可以绑定的控件有<button/ >、<checkbox/ >、<radio/>、<switch/ >。
form
form组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<form/ >表单中formType为submit的<button/ >组件时，会将表单组件中的value值进行提交。form组件的属性如下表所示。
多媒体组件
多媒体组件包括image（图像）、audio（音频）、video（视频）、camera（相机）组件，使用这些组件，可以让页面更具有吸引力。
image
image组件为图像组件，与HTML中的 <img/ >类似，系统默认image组件的宽度为300 px、高度为2250 px, image组件的属性如下表所示。
image组件中的mode属性有13种模式，其中缩放模式有4种，裁剪模式有9种。
缩放模式
scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以将图片完整地显示出来。
aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，在另一个方向将会发生截取。
widthFix宽度不变，高度自动变化，保持原图宽高比不变。
裁剪模式
top 不缩放图片，只显示图片的顶部区域。
bottom 不缩放图片，只显示图片的底部区域。
center 不缩放图片，只显示图片的中间区域。
left 不缩放图片，只显示图片的左边区域。
right 不缩放图片，只显示图片的右边区域。
top_left 不缩放图片，只显示图片的左上边区域。
top_right 不缩放图片，只显示图片的右上边区域。
bottom_left 不缩放图片，只显示图片的左下边区域。
bottom_right 不缩放图片，只显示图片的右下边区域。
audio
audio组件用来实现音乐播放、暂停等，其属性如下表所示。
video
video组件用来实现视频的播放、暂停等。视频的默认宽度为300飘向，高度为225px，video组件的属性如下表所示。
camera
camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个camera 组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像;在手机中运行时，使用手机前后摄像头实现拍照或录像。camera组件的属性如下表所示。
其他组件
在小程序中,除了前面介绍的组件以来，map组件和canvas组件比较常用。
map
map组件用于在页面中显示地图或路径，常用于LBS(基于位置服务)或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等能力，不能在croll-view、swiper、picker-view、movable-view组件中使用。
map组件的markers属性用于在地图上显示标记的位置，其相关属性如下表所示。
map组件的 polyline属性用来指定一系列坐标点，从数组第一项连线到最后一项，形成一条路线，可以指定线的颜色、宽度、线型以及是否带箭头等，其相关属性如下表所示。
4本章小结：
本章介绍了小程序中的常用组件，包括容器组件(view、scroll -view、swiper)、基础内容组件(icon、text、progress、rich-text)、表单组件(form、input、button、radio、check- box、label、picker、picker - view、slider、switch、textarea)、多媒体组件(audio、image、 video、camera)、其他组件(map、canvas等)。熟练掌握这些组件的属性和方法是开发小程序的必备技能。
第四章
5本章小结：
本章主要讲解微信小程序的第三方工具---即速应用，首先介绍了即速应用的优势及特点，然后介绍了即速应用的布局组件、基础组件、高级组件和其他组件，最后介绍了即速应用的后台管理及打包、上传功能。通过对本章的学习，可以为以后使用即速应用制作各类小程序打下坚实的基础。
第六章
6.1 网络 API
网络 API 可以帮助开发者实现网络 URL 访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了10个网络 API 接口。
wx.request（Object）接口 用于发起 HTTPS 请求。
wx.uploadFile（Object）接口用于将本地资源上传到后台服务器。
wx.downloadFile（Object）接口用于下载文件资源到本地。
wx.connectSocket（Object）接口 用于创建一个 WebSocket 连接。
wx.sendSocketMessage（Object）接口 用于实现通过 WebSocket 连接发送数据。
wx.closeSocket（Object）接口用于关闭 WebSocket 连接。
wx.onSocketOpen（CallBack）接口 用于监听 WebSocket 连接打开事件。
wx.onSocketError（CallBack）接口 用于监听 WebSocket 错误。
wx.onSocketMessage（CallBack）接口 用于实现监听 WebSocket 接收到服务器的消息事件。
wx.onSocketClose（CallBack）接口 用于实现监听 WebSocket 关闭。
6.1.1 发起网络请求
wx. request（Object）实现向服务器发送请求，获取数据等各种网络交互操作。
一个微信小程序同时只能有5个网络请求连接，并且是 HTTPS 请求。
表 6-1 wx. request（Object）相关参数
通过 wx. request（Object）获取百度（https://www.baidu.com）首页的数据。
需要在微信公众平台小程序服务器配置中的 request 合法域名中添加 “https://www.baidu.com”
示例代码如下：
<!--liuzhang.wxml-->
<text></text>
<button type="primary" bindtap="getbaidutap"> 获取 HTML 数据 </button>
<textarea value='{{html}}'auto-heightmaxlength='0'></textarea>
<!--liuzhang.js-->
Page({
data:{
html:""
},
getbaidutap:function(){
var that = this;
wx.request({
url:'https://www.baidu.com',//百度网址
data:{},//发送数据为空
header:{'Content-Type':'application/json'},
success:function(res){
console.log(res);
that.setData({
html:res.data
})
}
})
}
})
运行结果：
通过 wx. request（Object）的 GET 方法获取邮政编码对应的地址信息。
示例代码如下：
<!--pages/liuzhang/liuzhang.wxml-->
<text></text>
<view> 邮政编码: </view >
<input type="text" bindinput="input" placeholder='6位邮政编码'/>
<button type="primary" bindtap="find"> 查询 </button>
<block wx:for="{{address}}">
<block wx:for="{{item}}"><text>{{item}}</text></block>
</block >
<!--liuzhang.js-->
Page({
data:{
postcode:"",
address:[],//邮政编码对应的地址
errMsg:"",
error_code:-1//错误码
},
input:function(e){//输入事件
this.setData({
postcode:e.detail.value,
})
console.log(e.detail.value)
},
find:function(){//查询事件
var postcode =this.data.postcode;
if(postcode!=null&& postcode!=""){
var self =this;
//显示 toast 提示消息
wx.showToast({
title:'正在查询,请稍候....',
icon: 'loading',
duration:10000
});
wx.request({
url:'https://v.juhe.cn/postcode/query',
//第三方后台服务器
data :{
' postcode' :postcode,
'key':'0ff9bfccdf147476e067de994eb5496e'
},
header :{
'Content-Type ':'application/json',
},
method:'GET',//方法为GET
success:function(res){
wx.hideToast();//隐藏toast
if(res.data.error_code==0){
console.log(res);
self.setData({
errMsg:"",
error_code:res.data.error_code,//错误代码
address:res.data.result.list//获取到的数据
})
}
else{
self.setData({
errMsg:res.data.reasonllres.data.reason,//错误原因分析
error_code:res.data.error_code
})
}
}
})
}
}
})
运行结果：
6.1.2 上传文件
wx. uploadFile（Object）接口用于将本地资源上传到开发者服务器，并在客户端发起一个 HTTPS POST 请求。
表 6-2 wx. uploadFile（Object）相关参数
通过 wx. uploadFile（Object），可以将图片上传到服务器并显示。
示例代码如下：
<!--pages/liuzhang/liuzhang.wxml-->
<text></text>
<button type="primary" bindtap="uploadimage"> 上传图片 </button ><image src="../image/q.jpg" mode="widthFix"/>
<!--liuzhang.js-->
Page({
data:{
img :null,
uploadimage:function(){
var that =this;
//选择图片
wx.chooseImage({
success:function(res){
var tempFilePaths =res.tempFilePaths
upload(that,tempFilePaths);
}
})
function upload(page,path){
//显示toast提示消息
wx.showToast({
icon:"loading",
title:"正在上传"
}),
wx.uploadFile({
url:"http://localhost/",
filePath:path[0],
name:'file',
success:function(res){
console.log(res);
if(res.statusCodel=200){
wx.showModal({
title:'提示',
content:'上传失败',
showCancel:false
})
return;
}
var data =res.data
page.setData({ //上传成功修改显示头像
img:path[0]
})
},
fail:function(e){
console.log(e);
wx.showModal({
title:'提示',
content:'上传失败',
showCancel:false
})
},
complete:function(){//隐藏 Toast
wx.hideToast();
}
})
}
}
}
})
运行结果：
6.1.3 下载文件
wx. downloadFile（Object）接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个 HTTPGET 请求，返回文件的本地临时路径。
表 6-3 wx. downloadFile（Object）相关参数
通过 wx. downloadFile（Object）实现从服务器中下载图片，后台服务采用WAMP软件在本机搭建。
示例代码如下：
<!--liuzhang.js-->
Page({
data:{
img:null,
},
downloadimage:function(){
var that = this;
wx.downloadFile({
url: "http://localhost/1.jpg", //通过WAMP软件实现
success:function(res){
console.log(res)
that.setData({
img:res.tempFilePath
})
}
})
}
})
<!--liuzhang.wxml-->
<button type="primary" bind:tap="downloadimge"> 下载图像 </button>
<image src="{{img}}" mode='widthFix'style = "width:90%;height:500px"></image>
运行结果：
6.2 多媒体 API
多媒体 API 主要包括图片 API 、录音 API 、音频播放控制 API、音乐播放控制 API 等，其目的是丰富小程序的页面功能。
6.2.1 图片 API
图片 API 实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个 API 接口：
wx.chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。
wx.previewImage（Object）接口用于预览图片。
wx.getImageInfo（Object）接口用于获取图片信息。
wx.saveImageToPhotosAlbum（Object）接口 用于保存图片到系统相册。
1. 选择图片或拍照
wx. chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用 wx. saveFile 保存图片到本地。
表 6-4 wx. chooseImage（Object）相关参数
若调用成功，则返回 tempFilePaths 和 tempFiles，tempFilePaths 表示图片在本地临时文件路径列表。tempFiles 表示图片的本地文件列表，包括 path 和 size。
示例代码如下：
<!--liuzhang.js-->
wx.chooseImage({
count:2,//默认值为9
sizeType:['original','compressed'],//可以指定是原图还是压缩图,默认
者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性来显示图片
var tempFilePaths =res.tempFilePaths
var tempFiles =res.tempFiles;
console.log(tempFilePaths)
console.log(tempFiles)
}
})
运行结果：
2. 预览图片
wx. previewImage（Object）接口主要用于预览图片。
表 6-5 wx. previewImage（Object）相关参数
3. 获取图片信息
wx. getImageInfo（Object）接口用于获取图片信息。
表 6-6 wx. getImageInfo（Object）相关
示例代码如下：
<!--liuzhang.js-->
wx.chooseImage({
success:function(res){
wx.getImageInfo({
src:res.tempFilePaths[0]，
success:function(e){
console.log(e.width)
console.log(e.height)
}
})
}，
})
运行结果同上
4. 保存图片到系统相册
wx. saveImageToPhotosAlbum（Object）接口用于保存图片到系统相册，需要得到用户授权scope.writePhotosAlbum。
表 6-7 wx. saveImageToPhotosAlbum
6.2.2 录音 API
录音 API 提供了语音录制的功能，主要包括以下两个 API 接口：
wx.startRecord（Object）接口用于实现开始录音。
wx.stopRecord（Object）接口。
用于实现主动调用停止录音。
1. 开始录音
wx. startRecord（Object）接口用于实现开始录音。当主动调用 wx.stopRecord（Object）接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用 wx. saveFile（）接口。
表 6-8 wx. startRecord（Object）相关参数
2. 停止录音
wx. stopRecord（Object）接口用于实现主动调用停止录音。
示例代码如下：
<!--liuzhang.js-->
wx.startRecord)
({
success: function(res){
var tempFilePath= res.tempFilePath},
fail: function(res){
//录音失败
}
})
setTimeout(function(){//结束录音
wx.stopRecord()
},10000)
6.2.3 音频播放控制 API
音频播放控制 API 主要用于对语音媒体文件的控制，包括播放、暂停、停止及 audio 组件的控制，主要包括以下 3 个 API ：
wx.playVoice（Object）接口 用于实现开始播放语音。
wx.pauseVoice（Object）接口用于实现暂停正在播放的语音。
wx.stopVoice（Object）接口 用于结束播放语音。
1. 播放语音
wx. playVoice（Object）接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。
表 6-9 wx. playVoice（Object）相关参数
示例代码如下：
<!--liuzhang.js-->
wx.startRecord({
success: function(res){
var tempFilePath= res.tempFilePath
wx.playVoice({//录音完后立即播放
filePath:tempFilePath, complete:function(){
}
})
}
})
2. 暂停播放
wx. pauseVoice（Object）用于暂停正在播放的语音。再次调用 wx.playVoice（Object）播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，则需要先调用 wx.stopVoice（Object）。
示例代码如下：
<!--liuzhang.js-->
wx.startRecord({
success: function(res){
var tempFilePath = res.tempFilePath
wx.playVoice({ filePath:tempFilePath
})
setTimeout(function(){
//暂停播放
wx.pauseVoice()},5000)
}
})
3. 结束播放
wx. stopVoice（Object）用于结束播放语音。
示例代码如下：
<!--liuzhang.js-->
wx.startRecord({
success: function(res){
var tempFilePath =res.tempFilePath wx.playVoice({
filePath:tempFilePath})
setTimeout(function(){
wx.stopVoice()},5000)
}
})
6.2.4 音乐播放控制 API
音乐播放控制 API 主要用于实现对背景音乐的控制，音乐文件只能是网络流媒体，不能是本地音乐文件。音乐播放控制 API 主要包括以下 8 个 API ：
wx.playBackgroundAudio（Object）接口 用于播放音乐。
wx.getBackgroundAudioPlayerState（Object）接口 用于获取音乐播放状态。
wx.seekBackgroundAudio（Object）接口 用于定位音乐播放进度。
wx.pauseBackgroundAudio（）接口 用于实现暂停播放音乐。
wx.stopBackgroundAudio（）接口 用于实现停止播放音乐。
wx.onBackgroundAudioPlay（CallBack）接口 用于实现监听音乐播放。
wx.onBackgroundAudioPause（CallBack）接口 用于实现监听音乐暂停。
wx.onBackgroundAudioStop（CallBack）接口 用于实现监听音乐停止。
1. 播放音乐
wx. playBackgroundAudio（Object）用于播放音乐，同一时间只能有一首音乐处于播放状态。
表 6-10 wx. playBackgroundAudio（Object）相关参数
示例代码如下：
<!--liuzhang.js-->
wx.playBackgroundAudio({
dataUrl:'http://bmob - cdn -16488.b0.upaiyun.com/2018/02.
09 /117e4a1b405195b18061299e2de89597.mp3'，
title:'有一天'，
coverImgUrl:'http://bmob -cdn - 16488.b0.upaiyun.com/2018/
02 /09/f604297140c9681880cc3d3e581f7724.jpg',
success:function(res){
console.log(res)/成功返回playBackgroundAudio:ok
})
2. 获取音乐播放状态
wx.getBackgroundAudioPlayerState（Object）接口用于获取音乐播放状态。
表 6-11 wx. getBackgroundAudioPlayerState（Object）相关参数
表 6-12 wx. getBackgroundAudioPlayerState 相关参数
示例代码如下：
<!--liuzhang.js-->
wx.getBackgroundAudioPlayerState({
success:function(res){
var status = res.status
var dataUrl= res.dataUrl
var currentPosition= res.currentPosition
var duration = res.duration
var downloadPercent= res.downloadPercent
console.log("播放状态:"+status)
console.log("音乐文件地址:"+ dataUrl)
console.log("音乐文件当前播放位置:"+currentPosition) console.log("音乐文件的长度:"+duration) console.log("音乐文件的下载进度:"+status)
})
3. 控制音乐播放进度
wx. seekBackgroundAudio（Object）接口用于控制音乐播放进度。
表 6-13 wx. seekBackgroundAudio（Object）相关参数
示例代码如下：
<!--liuzhang.js-->
wx.seekBackgroundAudio(
position:30
1)
4. 暂停播放音乐
wx. pauseBackgroundAudio（）接口用于暂停播放音乐。
示例代码如下：
<!--liuzhang.js-->
wx.playBackgrondAudio{
dataUrl:'/music/a.mp3',
title:'我的音乐',
coverImgUrl:'/images/poster.jpg',
success:function(){
console.log('开始播放音乐了');
}
});
setTimeout(function(){
console.log('暂停播放');
wx.pauseBackgroundAudio();
},5000);
5. 停止播放音乐
wx. stopBackgroundAudio（）接口用于停止播放音乐。
示例代码如下：
<!--liuzhang.js-->
wx.playBackgrondAudio{
dataUrl:'/music/a.mp3',
title:'我的音乐',
coverImgUrl:'/images/poster.jpg',
success:function(){
console.log('开始播放音乐了');
}
});
setTimeout(function(){
console.log('暂停播放');
wx.stopBackgroundAudio();
},5000);
6. 监听音乐播放
wx. onBackgroundAudioPlay（CallBack）接口用于实现监听音乐播放，通常被 wx. playBack-groundAudio（Object）方法触发，在 CallBack 中可改变播放图标。
示例代码如下：
<!--liuzhang.js-->
wx.playBackgroundAudio({
dataUrl:this.data.musicData.dataUrl,
title:this.data.musicData.title,
coverImgUrl:this.data.musicData.coverImgUrl,
success:function(){
wx.onBackgroundAudioStop(function(){
that.setData({
isPlayingMusic:false
})
})
7. 监听音乐暂停
wx. onBackgroundAudioPause（CallBack）接口用于实现监听音乐暂停，通常被wx. pause-BackgroundAudio（）方法触发。在 CallBack 中可以改变播放图标。
8. 监听音乐停止
wx. onBackgroundAudioStop（CallBack）接口用于实现监听音乐停止，通常被音乐自然播放停止或 wx.seekBackgroundAudio（Object）方法导致播放位置等于音乐总时长时触发。在 CallBack 中可以改变播放图标。
9. 案例展示
在此，以小程序 music 为案例来展示音乐 API 的使用。该小程序的 4 个页面文件分别为 music. wxml、music.wxss、music. json 和 music. cojs。
6.3 文件 API
从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件 API。文件 API 提供了打开、保存、删除等操作本地文件的能力，主要包括以下 5 个 API 接口：
wx.saveFile（Object）接口 用于保存文件到本地。
wx.getSavedFileList（Object）接口 用于获取本地已保存的文件列表。
wx.getSaveFileInfo（Object）接口 用于获取本地文件的文件信息。
wx.removeSaveFile（Object）接口 用于删除本地存储的文件。
wx.openDocument（Object）接口 用于新开页面打开文档，支持格式：doc、xls、ppt、pdf、docx、xlsx、ppts。
1. 保存文件
wx. saveFile（Object）用于保存文件到本地。
2. 获取本地文件列表
wx. getSavedFileList（Object）接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳（从1970/01/01 08: 00: 00到当前时间的秒数）文件列表。
3. 获取本地文件的文件信息
wx. getSaveFileInfo（Object）接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx. getFileInfo（Object）接口。
4. 删除本地文件
wx. removeSaveFile（Object）接口用于删除本地存储的文件。
5. 打开文档
wx. openDocument（Object）接口用于新开页面打开文档，支持格式有doc、xls、ppt、pdf、docx、xlsx、pptx。
6.4 本地数据缓存 API
小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10 MB，其目的是提高加载速度。数据缓存的接口主要有 4 个：
wx.setStorage（Object）或wx.setStorageSync（key, data）接口 用于设置缓存数据。
wx.getStorage（Object）或wx.getStorageSync（key）接口 用于获取缓存数据。
wx.removeStorage（Object）或wx.removeStorageSync（key）接口 用于删除指定缓存数据。
wx.clearStorage（）或wx.clearStorageSync（）接口 用于清除缓存数据。其中，带Sync后缀的为同步接口，不带Sync后缀的为异步接口。
6.4.1 保存数据
1. wx. setStorage（Object）接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来key对应的内容。
2. wx. setStorageSync（key, data）是同步接口，其参数只有 key 和 data。
示例代码如下:
wx.getStorageSync('age','25')
6.4.2 获取数据
1. wx. getStorage（Object）接口是从本地缓存中异步获取指定key对应的内容。
2. wx. getStorageSync（key）从本地缓存中同步获取指定key对应的内容。其参数只有key。
6.4.3 删除数据
1. wx. removeStorage（Object）接口用于从本地缓存中异步移除指定key。
2. wx. removeStorageSync（key）接口用于从本地缓存中同步删除指定 key 对应的内容。其参数只有key。
6.4.4 清空数据
wx. clearStorage（）
接口用于异步清理本地数据缓存，没有参数。
接口用于同步清理本地数据缓存。
6.5 位置信息 API
小程序可以通过位置信息 API 来获取或显示本地位置信息, 小程序支持 WGS84 和 GCj02 标准, WGS84 标准为地球坐标系，是国际上通用的坐标系 GCj02 标准是中国国家测绘局制定的地理信息系统的坐标系统，是由 WGS84 坐标系经加密后的坐标系，又称为火星坐标系。默认为 WGS84标准，若要查看位置需要使用 GCj02 标准。主要包括以下 ３ 个 API 接口:
wx.getLocation(Object)
接口用于获取位置信息。
wx.chooseLocation(Object)
接口用于选择位置信息。
wx.openLocation(Object)
接口用于通过地图显示位置。
6.5.1 获取位置信息
wx.getLocation(Object) 接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息。
6.5.2 选择位置信息
wx.chooseLocation(Object) 接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。
6.5.2 显示位置信息
wx.openLocation(Object)
接口用于在微信内置地图中显示位置信息。
6.6 设备相关 API
设备相关的接口用于获取设备相关信息,主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下 ５ 个接口 API:
wx.getSystemInfo(Object) 接口、wx.getSystemInfoSync()
接口用于获取系统信息。
wx.getNetworkType(Object)
接口用于获取网络类型。
wx.onNetworkStatusChange(CallBack)
接口用于监测网络状态改变。
wx.makePhoneCall(Object)
接口用于拨打电话。
wx.scanCode(Object)
接口用于扫描二维码。
6.7 获取系统信息
wx.getSystemInfo(Object) 、wx.getSystemInfoSync()
接口分别用于异步和同步获取系统信息。
wx.getSystemInfo()，wx.getSystemInfoSync()
接口调用成功后, 返回系统相关信息。
6.8 网络状态
1. 获取网络状态
wx.getNetWorkType(Object) 用于获取网络类型，其相关参数如表所示。
如果 wx.getNetWorkType() 接口被成功调用，则返回网络类型包，有wifi、2G、3G、4G、unknown (Android下不常见的网络类型)、none (无网络)。
运行结果：
２.监听网络状态变化
wx.onNetworkStatusChange (CallBack) 接口用于监听网络状态变化，当网络状态变化时，返回当前网络状态类型及是否有网络连接。
6.9 拨打电话
wx.makePhoneCall (Object) 接口用于实现调用手机拨打电话, 其相关参数如表所示。
6本章小结 ：
主要介绍了小程序的各类核心 API，包括网络 API、多媒体 API、文件 API、本地数据及缓存 API、位置信息 API 及设备相关 API 等。通过对本章的学习，大家应深刻地理解各类 API 是开发各类小程序的核心。
1905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
