第一到六章总结-CSDN博客

本文链接：https://blog.csdn.net/A1015_/article/details/138222329

第一章微信小程序概述

1.1认识微信小程序

1.1.1 小程序简介

微信是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信服务的应用程序。

1.1.2 小程序特征

1.无需安装

2.触手可及

3.用完即走

4.无需卸载

1.1.3 小程序应用场景的特点

张小龙先生希望微信小程序对用户来说，应该是“无处不在，触手可及，随时可用，用完即走”的一种“小应用”，重点在“小”，主要体现在以下两个方面。

1.简单的业务逻辑

简单是指应用本身的业务逻辑并不复杂。例如，出行类应用“ofo小黄车”（图1-1）,用户通过扫描二维码就可以实现租车，该应用的业务逻辑非常简单，服务时间很短暂，“扫完即走”。此外，各类O2O（Online To Offline，线上到线下）API，如家政服务、订餐类应用、天气预报类应用，都符合“简单”这个特性。不过，对于业务复杂的应用，无论从功能实现上还是从用户体验上，小程序都不如原生App（Application的简写，应用）。

2.低频度的使用场景

低频度是小程序使用场景的另一个特点。例如，提供在线购买电影票服务的小程序应用“猫眼”（图1-2），用户对该小程序的使用频度不是很高，就没有必要在手机中安装一个单独功能的App。
如果某种应用的使用频度很高（如社交类的QQ，社区类的百度贴吧、知乎，金融类的支付宝，等等），则以原生App的方式提供给用户服务会效果更好。
根据目前的统计，小程序主要以商务服务、电子商务和餐饮行业居多，小程序还覆盖了媒体、工具、教育、房地产、旅游、娱乐等行业领域，图1-3所示为“京东购物”小程序界面

根据我国首家提供小程序价值评估的第三方机构——阿拉丁指数统计，截至2017年10月30日，排名前10位的小程序关注指数如图1-4所示。

微信小程序的应用市场是随着用户需求的变化而改变的，随着微信小程序的不断升级，将来会有越来越多的小程序出现，我们的生活将会变得更加方便、快捷和多彩。

1.2 微信小程序开发流程

第一步，在微信公众平台上注册小程序账号

第二步，下载开发者进行编码

第三步，通过开发者工具提交代码，待审核通过后便可以发布

1.2.1 注册小程序账号

注册小程序账号只需要五步

1.在微信公众平台首页（mp.weixin.qq.com）单击位于右上方的“立即注册”按钮。

2.选择账号类型，单击“小程序”选项。

3.进入账号信息页面，填写信息。

4.进入主体信息登记页面，完善主体信息，即可完成注册。

1.2.2 开发环境准备

完成注册后，登录微信公众平台，单击设置--填写按钮，完善小程序信息。

单击设置--开发环境，获取AppID

1.2.3 微信开发工具的下载及安装

进入网址https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/downloa进行安装下载

1.2.4 创建第一个小程序项目

第一次打开“微信web开发者工具”，使用开发者的微信扫码二维码验证登录进入。

使用开发者的微信扫描二维码验证进入后，
单击“小程序项目”选项，填入“项目目录”，“AppID”和“项目名称”(若无AppID，则单击“可点此体验”)，并勾选“创建QuickStart项目”复选框。单击“确定”按钮后，将成功创建一个系统默认的示例项目

1.2.5 运行及发布小程序

开发者可以单击工具栏中的“调试器”图标，在模拟器中运行小程序，查看小程序的运行效果。开发者也可以单击工具栏中的“预览”图标，扫描二维码后即可在微信客户端中体验。
开发者还可以单击工具栏中的“上传”按钮，将小程序上传到微信公众平台，
开发者将小程序上传成功后，打开微信公众平台(mp.weixin.qq.com)，单击“开发管理”选项，进入“开发管理”对话框。
此时，开发者会发现小程序已经上传至公众平台，单击“开发版本”的“提交审核”按钮。待通过审核后，该按钮会变为“审核版本”，“审核版本”提交审核并通过后，该按钮会变为“线上版本”。当成为“线上版本”后，开发者单击“发布”按钮即可在微信发现中搜索该小程序项目。

1.3 微信小程序开发者工具界面功能介绍

我们把微信小程序开发者工具界面分为五大区域

1.工具栏
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。

2.模拟区
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。

3.目录文件区
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。

4.编辑区
编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js 及.json 文件的操作，使用组合键能提高代码的编辑效率。

5.调试区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Network;Security、Storage、AppData、 Wxml、Sensor和Trace。最右边的扩展菜单项“氵”是定制与控制开发工具按钮。

1.4本章小结

本章首先介绍了微信小程序，讲解了微信小程序的特征及微信小程序应用场景的特点，然后重点讲解了微信小程序项目的开发流程，最后介绍了微信小程序开发工具的使用。通过对本章的学习，读者能够从概念上对小程序有一个基本认识，为学习后续章节打下良好的基础。

第二章微信小程序开发基础

2.1 小程序的基本目录结构

我们以第1章新建的系统默认示例项目为参考，了解微信小程序项目的基本目录结构。
在微信小程序的基本目录结构中，项目主目录下有2个 index Js index.js子目录(pages和utils)和4个文件(app.js、app.json，app.wxss 和project.config. json )。
在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。
project. config. json文件是项目配置文件，包含项目名称、AppID 等相关信息，开发工具项目详情的可视文件，其目的和功能与projeet.config,json文件的目的和功能是一样的。

2.1.1 主体文件

app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面逻辑文件打包成一个javascript文件。该文件在项目中不可缺少。
app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少
app.wxss 小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.1.2页面文件

.js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML 页面中的.html 文件。该文件在页面中不可缺少。
.wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用 app.wxss中指定的样式规则。该文件在页面中不可缺少。
.json 文件页面配置文件。该文件在页面中不可缺少。

2.2 小程序的开发框架

微信团队为小程序的开发提供了 MINA 框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaScriptAPI，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

小程序NINA框架示意图

小程序MINA框架将整个系统划分为视图层和逻辑层。

视图层(View)由框架设计的标签语言WXML(WeiXinMarkup Language)和用于描述WXML组件样式的WXSS (WeiXin Style Sheets)组成，它们的关系就像HTML和 CSS的关系。

逻辑层(App Service)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。

MINA框架中的逻辑层使用JavaScript来编写交互逻辑、网络请求、数据处理，但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。

MINA框架为页面组件提供了bindtap、bindtouchstart等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能(如page切换、tab切换、多媒体、网络连接等)上使用接近于系统层(Native)的组件承载。所以，小程序 MINA 框架有着接近原生App 的运行速度，对Android端和iOS端能呈现得高度一致，并为开发者准备了完备的开发和调试工具。

2.2.1 视图层

MINA 框架的视图层由WXML与WXSS 编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml 文件与.wxss 文件的集合:.wxml文件用于描述页面的结构;.wxss文件用于描述页面的样式。
微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时寸间给逻辑层，而数据展现是以组件来进行的，组件是视图的基本组成单元。

2.2.2 逻辑层

层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括:
(1) 增加app( ) 和 Page()方法，进行程序和页面的注册。

(2)提供丰富的API，如扫一扫、支付等微信特有的能力。

(3)每个页面有独立的作用域，并提供模块化能力。
逻辑层就是通过各个页面的.js脚本文件来实现的。由于小程序并非运行在浏览器中，所以JavaScript在Web中的一些功能在小程序中无法使用，如document、window等。开发者开发编写的所有代码最终会被打包成独立的JavaScript文件，并在小程序启动的时候运行，直到小程序被销毁。

2.2.3数据层

1、页面临时数据或缓存
在Page( ) 中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的 this.data的值。
setData( ) 函数的参数接收一个对象，以(key,value)的形式表示将key在this.data中对应的值改变成value。
2.文件存储 (本地存储)

使用数据 API 接口，如下:

wx.getStorage获取本地数据缓存
wx. setStorage设置本地数据缓存。
wx. clearStorage 清理本地数据缓存。
3.网络存储与调用
上传或下载文件API 接口，如下: wx.request 发起网络请求。 wx.uploadFile上传文件。 wx. downloadFile下载文件。调用URL的API接口，如下:
wx. navigateTo 新窗口打开页面。 wx. redirectTo原窗口打开页面。

2.3创建小程序页面

启动微信开发工具，创建新的项目demo2，此处不勾选“创建QuickStart项目”复选项，单击“确定”按钮后，可以看到开发工具编，谓载小程序小程序项目中的“目录结构”界面只显示项目配置文件( project. config. json)，同时系统提示错误信息，将在 2.1.1小节中提到的3个主体文件(app.js、app.json和app.wxss)在项目的主目录下建立，小程序依然提示错误信息。

2.3.1创建第一个页面文件

继续在项目主目录下新建一个pages目录，在pages目录下新建一个index目录，并在index目录下新建index.js,index.json,index.wxml和index.wxss空文件。此时，系统仍然提示错误信息。假设，我们的目的是页面能显示“欢迎学习小程序，实现大梦想”。首先，打开index.wxml文件，输入“欢迎学习小程序，实现大梦想”。然后，告诉系统这个文件的名称及所处路径。因此，打开项目配置文件app.json，输入如下代码:
这段代码将index页面注册到小程序中，这个对象的第一属性pages接受了一个数组，该数组的每一项是一个字符串，该字符串由“路径”+“文件名”组成，不包含扩展名。pages 属性用来指定这个项目由哪些页面组成，多个页面之间用“,”分隔。
接下来，打开index.json文件，输入如下代码:

只需引入Page()方法，保证index.js文件不为空即可。
将这4个文件保存后进行编译，在模拟器中即可得到所需的结果。各文件的代码内容如表所示。

2.3.2创建另一个页面文件

在2.3.1小节中，我们采用逐步创建目录录及4个文件的方式成功创建了一个页面文件。在本节中，我们采用另一种方式来创建另一个个页面文件news。
打开app.json 文件，输入以下代码:

将文件保存后，我们发现系统在目录结构中自动添加了相应的目录和文件，系统还自动补全了每个页面文件中必需的基本代码，而且没有出现错误提示。

2.4配置文件

小程序的配置文件按其作用范围可以分为全局配置文件（app.json）和页面配置文件(*.json)

2.4.1全局配置文件

全局配置文件内容的整体结构如下:

1.pages 配置项
pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages配置项是必填项。
设置 pages配置项时，应注意以下3点:
(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml 和.wxss文件进行整合数据绑定。

2.window配置项
window配置项负责设置小程序状态栏，导航栏，标题，窗口背景色等系统样式。

在app.json中设置如下window配置项

3.tabBar配置项
当需要在程序底部或顶部设置菜单栏时，可以通过配置tabBar配置项来实现。

其中，list（列表）接受数组值，数组中的每一项也都是一个对象。

在app.jss文件中设置如下tabBar配置

效果如下

4.networkTimeout配置项
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。

5.debug 配置项
debug 配置项用于开启开发者工具的周试模式，默认为false。开启后，页面的注册、路
由、数据更新、事件触发等调试信息将以 info 的形式输出到Console(控制台)面板上。

2.4.2 页面配置文件

页面配置文件(*.json) 只能设置本本页面的窗口表现，而且只能设置window 配置项的内容。在配置页面配置文件后，页面中的 window 配置值将覆盖全局配置文件(app.json)中的配置值。

页面中的 window配置只需书写配置项，不必书写windov w，代码示例如下:

2.5逻辑层文件

小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件。

2.5.1 项目逻辑文件

项目逻辑文件app.js 中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
App()函数用于注册一个小程序，参数为0bject，用于指定小程序的生命周期函数、月户自定义属性和方法

2.5.2页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的牛寺有对象(document、window)及通过操作 DOM 改变页面，只能采用数据绑定和事件响应来实现。
在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个。

1.设置初始数据

2.定义当前页面的生命周期函数

3定义事件处理函数

开发者在Page() 中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定, 当达到触发事件时, 小程序就会执行Page() 中定义的事件处理函数。

4使用setData 更新数据

小程序在Page对象中封装了一个名为setData() 的函数, 用来更新data中的数据。

2.6 页面结构文件

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

2.6.1 数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法({{}})将变量或运算规则包起来。

１.简单绑定

简单绑定是指使用双大括号({{}})将变量包起来, 在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。

注意：简单绑定作用于组件属性、控制属性等，双大括号外应该添加双引号。

示例代码

2.运算

在{{}} 内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等), 这些运算均应符合JavaScript 运算规则。

示例代码如下：

2.6.2条件数字绑定

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前数组。

2.6.3列表数组绑定

列表数据绑定用于将列表中的各项数据进行重复数据绑定。

2.6.4模板

在小程序中，如果要经常使用几个组牛的组合(如“登录”选项)，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板。

1. 定义模板
模板代码由 wxml 组成，因此其定义也是在wxml 文件中，定义模板的格式为:
<template name ="模板名">
相关组件代码为:
</template >

其中，<template >为模板标签，name属性用于定义模板的名称。

2. 调用模板

将模板定义后，就可以对其进行调用了。调用模板的格式为:
<template is="模板名称"data == "{{传入的数据}}"/>
其中，<template >为模板标签;is属性用于指定要调用的模板名称;data属性定义要入的数据，如果模板中不需要传入数据，data属性可以省略。

2.6.5引用页面文件

在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提了两种方式来引用其他页面文件。

1. import 方式

如果在要引用的文件中定义了模木板代码，则需要用import方式引用。例如，在a.wxml文件中定义一个 item 模板.

2. include 方式

include 方式可以将源文件中除模板之外的其他代码全部引入，相当于将源文件中的代码复制到include 所在位置。

2.6.6页面事件

简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。
定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value”形式出现，key(属性名)以 bind 或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind 开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。

在小程序中，事件分为冒泡事件和非冒泡事件两大类型。

冒泡事件冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，级元素再向其父级元素传递，一直到页面的顶红级元素。
非冒泡事件非冒泡事件是指某个组件_上的事件被触发后，该事件不会向父节点传递。

2.7页面样式文件

页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。wxss 具有css的大部分特性，小程序对wxsS做了一些扩充和修改。
1.尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx( respnesive pixel)。WXSS规定屏幕宽度为750rpx，在系统数据绑定过程中会按比例转化为px。

2.样式导入

为了管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可。

3.选择器

目前WXSS仅支持CSS中常用的选择器，如，class，#id，element，before，aftert等。

4.WXSS常用属性

WXSS文件与css文件有大部分属性名及属性值相同

2.8本章小结

本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深
刻理解和熟练掌握，并勤写代码多加练习，为后续的学习打下扎实的基础

第三章页面布局

3.1盒子模型

微信小程序的视图层由WXML和WXSS组成。其中，WXSS(WeiXin Style Sheets)是基
于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。Wxss 具有
CSS 的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。
页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中
的各个元素。
盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中，一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成。

此外，对padding、border和margin可以进一步细化为上、下、左、右4个部分，在CSS中可以分别进行设置

图中各元素含义如下：

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上外边距、右外边距底外边距和左外边距。
因此，一个盒子实际所占有的宽度(高度)应该由“内容”+“内边距”本“边框”+“外边距”组成。

例如:

.box{
width:70px;
 padding:5px; 
margin:10px;
}

3.2块级元素与行内元素

元素按显示方式分为块级元素，行内元素和行内块元素，它们的显示方式由display属性控制。

3.2.1块级元素

块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。

块级元素的特点如下：
(1)一个块级元素占一行。

(2)块级元素的默认高度由内容决定，除非自定义高度。

(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。

(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。

(5)块级元素可以容纳块级元素和行内元素。

<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代码如下:

<view style = "border:1px solid #f00">块级元素1</view >

<view style = "border:1px solid #0f0;margin:15px; padding:20px">块级元素 2</view>

<view style = "border:lpx solid #00f;width:200px;height:80px">块级元素3</view >

<view style = "border:lpx solid #ccc;" >
<view style="height: 60px">块级元素4</view>

<view style="border:1px solid #f00;width:100px;background-color:#ccc"></view>
<!--父级元素高度随内容决定,内容为文本</View>

3.2.2行内元素

行内元素，不必从新一行开始，通常会与前后的其其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以人设置大小，常用于控制页面中文本的样式。将一个元素的display属性设置为inline后，该元元素即被设置为行内元素。

行内元素的特点如下:

(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定。

(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素。

(3)同一块内，行内元素和其他行内元素显示在同一行。

<text/>组件默认为行内元素，使用 <view/ > 及<text/>组件演示盒子模型及行内元素
的示例代码如下:

<view style ="padding:20px    >    
<text style = "border: lpx solid #f00">文本1 </text >
<text style = " border:lpx solid #0f0;margin:10px;padding:
5px">文本 2 < /text>
<view style = "border:1 px solid #00f;display:inline">块级元素
设置为行内元素</view>一行显示不全,自动换行显示
< /view >

3.2.3行内块元素

当元素的display属性被设置为inline - blocl k时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。

示例列代码如下:

<view >
元素显示方式的<view style="displa ay:inline -block;
border:1px solid#f00;
margin:10px;
padding:10px;
width:2200px;">块级元素、行内元素和行内块元素< /view>三种类型。
< /view >

3.3浮动与定位

3.3.1元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定
位置的过程。在CSS中，通过float属性来定义浮动其基本格式如下:

{float:none | left |right;}

其中， none--默认值，表示元素不浮动;
left-元素向左浮动; right一-元素向右浮动。
在下面的示例代码中，分别对box1、box2、box3 元素左浮动:

<view >box1 ,box2,box3没浮动</view >
<view style = "border:lpx solid #f00 ;padding:5px">    
<view style = "border:lpx solid #0f0" >box1 </view >
<view style = "border:1px solid #0f0 " >box2 </view >
<view style = "border:1px solid #0f0 "> box3 </view >
</view>
<view>box1 左浮动</view>
<view style = "border:1px solia #f00 ;padding:5px">
<view style ="float:left;border:1px solid #0f0 " >box1 </view >
<view style = "border:1px solid #0f0 " > box2 </view >
<view style = "border:1px solid #0f0 " >box3 </view>
</view >
<view >box1 box2左浮动</view>
<view style = "border:1px solid #f00 ;padding:5px">
<view style ="float:left;border:1px solid #0f0">box1 </view >
<view style ="float:left;border:1px solid #0f0">box2</view >
<view style = "border:1px solid #0f0 ">box3 </view >
</view>
<view >box1 box2 box3左浮动</view>
<view style = "border:1px solid #f00 ;padding:5px">
<view style ="float:left;border:1px solid #0f0">box1 </view >
<view style ="float:left;border:1px solid #0f0">box2</view >
<view style = "float: left;border:1px solid #0f0; ">box3 </view >
</view>

通过案例我们发现，当box3左浮动后，父元素的边框未能包裹box3元素。这时，通过清除浮动来解决。
由于浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生在CSS中，clear属性用于清除浮动元素对其他元素的影响，其基本格式如下:

{clear:left | right |both | none}

其中，left--清除左边浮动的影响，也就是不允许左侧有浮动元素;
right--清除右边浮动的影响，也就是不允许右侧有浮动元素;

both-同时清除左右两侧浮动的影响;

none--不清除浮动。

示例代码如下:

<view >box1,box2 左浮动,box3清除左浮动</view >
<view style = "border:lpx solid  #f00 ;padding:5px>
<view style = "float;left ; border:1px solid  #ofo">box1 </view >
<view style = "float:left;  border:lpx solid  #ofo" >box2 </view
<view style = "clear:left;  border:lpx solid  #ofo "> box3 </view>
</view>

另外，还可以在父元素外添加一个空元素，实现父元素包裹浮动元素。

示例代码如下：

//wxml
<view >box1 box2 box3左浮动 在父元素后添加一个空元素</view >
<view style = "border:lpx solid  #f00 ;padding:5px" class="clearfloat">
<view style = "float;left ; border:1px solid  #ofo" >box1 </view >
<view style = "float:left ; border:1px solid  #ofo " >box2 </view >
<view style = "float:left ; border:1px solid  #ofo "> box3 </view ></view>
//wxss
.clearfloat :: after{display;block;clear:both;height:0;content:""}

3.3.2元素定位

浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过position 属性可以实现对页面元素的精确定位。基本格式如下:

{position:static | relative | absolute | fixed}
其中，static默认值，该元素按照标准流进行布局;
relative一相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
absolute一绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
fixed--固定定位，相对于浏览器窗口进行定位。

对box1、box2、box3进行元素静态定位，示例代码如下:

<!--三个元素匀未定位 static -->
<view style ="border:1px solid #0f0;width:100px;height:100px" >box1 </view >
<view style = "border:1px solid #0f0;width:100px;height:100px" >box2 </view >
<view style = "border:1px solid #0f0;width:100px;height:100px" >box3 </view >

对box1、box2、box3进行元素相对定位，示例代码如下:

<!-- box2元素相对定位 -->
<view style ="border:1px solid #0f0;width:100px;height:100px">box1 </view >
<view style = "border:1px solid #0f0;width:100px;height:100px;position: relative; left: 30px; top: 30px;"> box2 </view >
<view style = "border:1px solid #0f0;width:100px;height:100px"> box3 </view >

对box1、box2、box3进行元素绝对定位，示例代码如下:

<!-- box2元素绝对定位 -->
<view style ="border:1px solid #0f0;width:100px;height:100px">box1 </view >
<view style = "border:1px solid #0f0;width:100px;height:100px;position: absolute; left: 30px; top: 30px;"> box2 </view >
<view style = "border:1px solid #0f0;width:100px;height:100px"> box3 </view >

对box1、box2、box3进行元素固定定位，示例代码如下:

<!-- box2元素固对定位 -->
<view style ="border:1px solid #0f0;width:100px;height:100px">box1 </view >
<view style = "border:1px solid #0f0;width:100px;height:100px;position: fixed;left: 30px; top: 30px;"> box2 </view >
<view style = "border:1px solid #0f0;width:100px;height:100px"> box3 </view >

通过案例我们发现，绝对定位和固定定位的效果相同，这是因为他们的的夫元素是page，没有定位。

如果将box1 box2，box3的父元素采用相对定位，box2使用绝对定位

如果将box1，box2，box3的父元素采用相对定位

3.4 flex布局

flex布局是万维网联盟(WorldWide Web Consortium,W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。 flex 是 flexible box 的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。
flex 布局主要由容器和项目组成，采用flex布局的元素称为flex容器(flexcontainer), flex 布局的所有直接子元素自动成为容器的成员，称为flex项目(flexitem)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(crossaxis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做mainend;交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size。flex布局模型如图3-12所示。
设置 display属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向。

3.4.1 容器属性

flex容器支持的属性有7种，

1.display
display用来指定元素是否为flex布局，语法格式为

.box {display :flex | inline-flex;}
flex-——块级flex布局，该元素变为弹性盒子；

inline-flex——行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex布局。

设置了flex布局之后，子元素的float，clear和verti-aligan属性将失效。

2.flex-direction
flex-direction用于设置主轴的方向，即项目排列的方向，语法格式为

.box{flex-direction:|row-reverse |column|column-reverse;}
row--主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为rov
row - reverse-主轴为水平方向，起点在右端; column--主轴为垂直方向，起点在顶端;
column - reverse-主轴为垂直方向，起点在底端。

图所示为元素在不同主轴方向下的显示效果。

3.flex-wrap
flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，

语法格式为

.box {flex-wrap:nowrap | wrap |wrap-reverse}
nowrap--不换行，默认值;
wrap--换行，第一行在上方;
wrap - reverse--换行，第一行在下方。
当设置换行时，还需要设置align-item 性来配合自动换行，但align-item 的值不能为“stretch”。

flex - wrap 不同值的显示效果如图所示。

4.flex-flow

flex-fow 是 flex -direction 和 flex -wrap的简写形式，默认值为row nowrap。

语法格式如下:

.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
justify -content用于定义项目在主轴上的对齐方式。

语法格式如下:

.box{justify -content:flex-start |flex - end lcenter lspace -between Ispace -around;}

justify-content-与主轴方向有关，默认主轴水平对齐，方向从左到右;
flex- start--左对齐，默认值; flex -end--右对齐; center--居中;
space - between两端对齐，项目之间的间隔都相等; space - around-每个项目两侧的间隔相等。

图所示为justify-content不同值的显示效果。

6. align -items

align-items 用于指定项目在交叉轴上的对齐方式，

语法格式如下:

.box{align -items:flex -start lflex - end lcenter lbaseline Istretch;}

align-items-与交叉轴方向有关，默认交叉由上到下;
flex - start--交叉轴起点对齐; flex -end--交叉轴终点对齐; center--交叉轴中线对齐;
baseline-项目根据它们第一行文字的基线对齐;
stretch-如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

示例代码如下:

//.wxml
<view class = "cont1">
<view class = "item" >1 </view>
<view class = "item item2">2 </view >
<view class = "item item3">3 </view >
<view class = "item item4 " >4 </view ></view >
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: aqua;
  border: 1px solid #F00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: aqua;
  border: 1px solid #F00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}

.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: aqua;
  border: 1px solid #F00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: flex-end;
}



.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: aqua;
  border: 1px solid #F00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: flex-end;
}
.item4{
  height: 220px;
}

7.align-content

align-content用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。

语法格式如下

.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch}
space-between——与交叉轴两端对齐，轴线之间的间隔平均分布；

space-around——每根轴线两侧得间隔都相等，轴线之间得间隔比轴线与边框间隔大一倍。

3.4.2项目属性

1.order

order属性定义项目得排序顺序，数值越小，排列越考前，默认值为0.

语法格式如下：

.item{order:<number>;}
实例代码如下；

<view class ="cont1">
<view class = "item" >1</view >
<view class = "item " >2 </view >
<view class ="item " >3 </view >
<view class ="item ">4 </view >
</view >
<view class ="cont1">
<view class = "item" style = "order:1">1</view>
<view class = "item" style = "order:3" >2</view>
<view class = "item" style = "order:2">3</view>
<view class = "item" >4</view >
</view >

2.flex-grow
flex-grow定义项目得放大比例，默认值为0，即不放大

语法格式如下

.item{flex-grow:<number>;}
实例代码如下

<view class ="cont1">
<view class = "item" >1</view >
<view class = "item " >2 </view >
<view class ="item " >3 </view >
<view class ="item ">4 </view >
</view >
<view class ="cont1">
<view class = "item;">1</view>
<view class = "item" style = "flex-grow: 1" >2</view>
<view class = "item" style = "flex-grow: 2">3</view>
<view class = "item" >4</view >
</view >

在示例中，剩余空间被分成3份，元素2占1份，元素3占2份。

3. flex - shrink
flex - shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小。

语法格式如下:

.item{flex -shrink: <number > ;}

示例代码如下

<view class ="cont1">
<view class = "item" >1</view >
<view class = "item " >2 </view >
<view class ="item" >3 </view >
<view class ="item ">4 </view >
</view >
<view class ="cont1">
<view class = "item"style="flex-shrink:220px">1</view>
<view class = "item" style ="flex-shrink:200px">2</view>
<view class = "item" style ="flex-shrink:220px">3</view>
<view class = "item" style="flex-shrink:160px">4</view>
</view>

4. flex - basis

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto(即项目的本来大小)。语法格式如下:

.item{flex-basis: <number > lauto;}
示例代码如下:

<view class ="cont1">
<view class = "item" >1</view >
<view class = "item " >2 </view >
<view class ="item" >3 </view >
<view class ="item ">4 </view >
</view >
<view class ="cont1">
<view class = "item">1</view>
<view class = "item" style ="flex-basis:100px;">2</view>
<view class = "item" style ="flex-basis: 200px;">3</view>
<view class = "item">4</view>
</view>

5.flex

flex 属性是flex - grow、flex - shrink和flex - ba asis 的简写，其默认值分别为0、1、auto。语法格式如下:

.item{flex:<flex -grow> |<flex - s] hrink > l<flex -basis >;}
示例代码如下:

.item{flex:auto;} //等价于.item{fle ex:1 1 auto;
.item{flex:none;}//等价于.item{fle; x:00auto;}

6. align -self

align-self 属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式

语法格式如下:

.item{align - self:auto |flex - start |flex - end lcenter |baseline stretch;}

在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致。 auto 表示继承容器align-items的属性，如果没有父元素，则等于stretch(默认值)。

3.5 本章小结

本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了flex布局的基本原理、容器和项目的相关属性。大家学好这些内容，可为小程序项目的布局打下良好的基础。

第四章页面组件

4.1组件的定义及属性

组件是页面视图层(WXML)的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。

每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下:

<标签名属性名=“属性值”>内容…</标签名 >
组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data - *、bind * /catch *等。

id 组件的唯一表示，保持整个页面唯一，不常用。
class 组件的样式类，对应WXSS中定义的样式。
style 组件的内联样式，可以动态设置内联样式。
hidden 组件是否显示，所有组件默认显示。
data -* 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值。

bind * /catch * 组件的事件，绑定逻辑层相关事件处理函数。

4.2 容器视图组件

容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view，scroll-view，和swiper组件。

4.2.1 view

view组件是快级组件，没有特殊功能，只要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面组件，通过设置view的css属性可以实现各种复杂的布局。

示例代码如下

<!--index.wxml-->
<!--秀秀秀秀秀秀奇-->
<view style="text-align:center">默认flex布局</view >
<view style="display:flex">
<view style="border:1px solid #f00;flex-grow:1">1</view>
<view style="border:1px solid #f00;flex-grow:1">2</view >
<view style="border:1px solid #f00;flex-grow:1">3</view >
</view >
<view style="text-align:center">上下混合布局</view >
<view style="display:flex;flex-direction:column" >
<view style="border:lpx solid #f00;" >1</view >
<view style="display:flex">
<view style ="border:1px solid #f00; flex-grow:l">2 </view >
<view style ="border:1px solid #f00;flex-grow:2">3 </view >
</view >
</view >
<view style="text-align:center">左右混合布局</view>
<view style ="display:flex">
<view style = "border:1px solid #f00;flex-grow:1">1 </view >
<view style = "display:flex;flex-direction:column;flex-grow:1">
<view style = " border:1px solid #f00;flex-grow:1">2 </view >
<view style = "border:lpx solid #f00;flex-grow:2">3 </view >
</view ></view >

4.2.2 scroll-view

通过设置scroll-view组件的相关属性可以实现滚蛋视图的功能。

【注意]
(1)在使用竖向滚动时，如果需要给scroll - view组件设置一个固定高度，可以通过 WXSS设置height来完成。

(2)请勿在scroll-view组件中使用textarea、 map、canvas、video组件。

(3) scroll - into -view属性的优先级高于scrol l-top。

(4)由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。

(5)如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。

通过scroll - view组件可以实现下拉刷新和上拉加载更多，代码如下:

//scro1l -view.wxml
<view clasa = "container"style = "padding:0rpx">2<!--垂直滚动,这里必须设置高度-->
<scro11-view scroll-top="||scrollTopll"scrol1 -y ="truer    
style= " height:!lscrollHeight!l px;" class =" list" bingscrolltolower= "bindDownLoad"
   bindscrolltoupper ="topLoad" bindscroll ="scroll">
<view class = "item"wx:for="{{list}|">
<image class = "img"src ="{{item.pic_ur1||"> </image>
<view class ="text">    
< text class ="title">|{item.name|| </text >
< text class = "description"> {litem.short_description|} < /text>
</view >    
</view>    
</scroll -view>    
<view class ="body -view">
<loading hidden = "{{hidden|| "bindchange = "loadingChange">加载中...    
</loading >    
</view >    
</view >    

//scroll-view.js
var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size =5;
var sort ="last";
var is_easy =0;
var lange_id =0;
var pos_id =0;
var unlearn =0;
//请求数据    
var loadMore = function(that) l
that.setData({    
hidden: false    
});    
wx.request(38 url:url,39 data:{
page: page,    
page_size:page_size,    
sort: sort,    
is_easy: is_easy,    
lange_id: lange_id,    
pos_id: pos_id,    
unlearn: unlearn    }
success: function(res){
//console.info(that.data.list);    
var list = that.data.list;    
for(var i= 0; i < res.data.list.length; i++)    
list.push(res.data.list[i]);    
that.setData(
list: list    
});
page ++;
that.setData({
hidden: true    
});
}
})
}
page({
data:{
hidden: true,    
list:[]，    
scrollTop:0,    
scrollHeight:0    }
onLoad: function( ){
var that = this;
wx.getSystemInfo({
success: function(res){    
that.setData({    
scrollHeight: res.windowHeight
});    
});
loadMore(that);
//页面滑动到底部
bindDownLoad: function(){
var that = this;    
loadMore(that);    
console.log("lower");    
}，
scroll: function(event){
//该方法绑定了页面滚动时的事件,这里记录了当数据后把页面定位到这里
this.setData({    
scrollTop: event.detail.scrollTop    
});    
}，
topLoad: function(event){
//该方法绑定了页面滑动到顶部的事件,然后做页面上
page =0;
this.setData({
list:[]，    
scrollTop: 0    
});    
loadMore(this);    
console.log("lower");    
})

//scroll -view.wxss
.userinfo {
display:flex;    
flex-direction:column;    
align-items:center;    
.userinfo -avatar {
width:128rpx;    
height:128rpx;    
margin:20rpx;    
border -radius:50%;    }
.userinfo -nickname {
color:#aaa;     }
.usermotto {
margin-top:200px;    
/* */
scroll-view{
width:100%    }
.item{
width:90%;    
height:300rpx;    
margin:20rpxauto;    
background:brown;    
overflow:hidden;    
}
.item.img {
width:430rpx;    
margin -right:20rpx;    
float:left;    
}
.title{
font -size:30rpx;    
display:block;    
margin:30rpxauto;    
}
.description{
font -size:26rpx;    
line -height:15rpx;    
}

4.2.3 swiper

swiper组件可以实现轮播图、图片预页览、滑动页面等效果。一个完整的swiper组件由< swiper/ >和 < swiper -item/>两个标签组成，它们不能单独使用。<swiper/>中只能放置一个或多个<swiper -item/>，若放置其他组件则会被删除;<swiper-item/>内部可以放置任何组件，默认宽高自动设置为100%。

< swiper -item/>组件为滑块项组件，仅可以被放置在<swiper/>组件中，宽高尺寸默认按 100%显示。

设置swiper组件，可以实现轮播图效果，代码如下:

<swiper-item indicator-dots='true'autoplay='true'interval='5000'duration='1000'>
<swiper-item>
<image src="/image/wx.jpg" style="width: 100%"></image>
</swiper-item>
<swiper-item>
  <image src="/image/wx2.jpg" style="width: 100%"></image>
</swiper-item>
</swiper-item>

4.3基础内容组件

基础内容组件包括icon、text 和progress 主要用于在视图页面中展示图标、文本和进度条等信息。

4.3.1 icon

icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性如表所示。

示例代码如下

<view>icon 类型:
<block wx:for ="{{iconType}}">
<icon type ="{{item}}"/>{{item}}
</block>
</view >
<view>icon 大小:
<block wx:for="{{iconSize}}">
<icon type = "success" size ="{{item}}"/>{{item}}</block >
</view >
<view>icon 颜色:
<block wx:for ="{{iconColor}}">
<icon type = "success" size = "30" color ="{{item}}"/>{{item}}</block ></view >
//pages/icon/icon.js 
Page({
  data:{
    iconType:[
      "success","success_no_circle","info","warn","waiting","cancel","download","search","clear"],
      iconSize:[10,20,30,40],
      iconColor:['#f00','#f00','#f00']
  }
})

4. 3.2 text

text组件用于展示内容，类似HTML的<span >，text组件中的内容支持长按选中，支持转义字符“\”，属于行内元素。

示例代码如下

<block wx:for="{{x}}" wx:for-item="x">
<view class = "aa">
<block wx:for ="{{25 -x}}" wx:for-item="x">
<text decode ="{{true}}" space="{{true}}">&nbsp;
</text >
</block >
<block wx:for ="{{y}}" wx:for-item ="y" >
<block wx:if ="{{y <=2*x-1}}">
<text > * </text >
</block >
</block >
</view >
</block >
 
<block wx:for="{{x}}" wx:for-item ="x">
<view class = "aa">
<block wx:for ="{{39 +x}}"wx:for-item ="x" >
<text decode ="{{true}}" space="{{true}}">&nbsp;
</text >
</block >
<block wx:for="{{y}}" wx:for-item ="y">
<block wx:if ="{{y<=11 -2 *x}}">
<text > * </text >
</block >
</block >
</view >
</block>
//text.js 
Page({ data:{
x:[1,2,3,4,5],
y: [1,2,3 ,4 ,5 ,6 ,7 ,8 ,9 ]
}})

4.3.3 progre

progress 组件用于显示进度状态，如资源原加载、用户资料完成度、媒体资源播放进度等。 progress 组件属于块级元素，

其属性如表所示。

示例代码如下

<view>显示百分比</view>
<progress percent='80' show-info ='80'></progress>
<view>改变宽度 </view>
<progress percent ='50'stroke-width ='2'> </progress >
<view>自动显示进度条</view>
<progress percent ='80' active > </progress>

4.4表单组件

表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。表单组件不仅可以放置在<form/>标签中使用，还可以作为单独组件和其他组件混合使用。

4.4.1 button

button 组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一般来说，在一个程序中一个按钮至少有3种状态:默认点击(default)、建议点击(primary)、谨慎点击(warn)。在构建项目时，应在合适的场景使用合适的按钮，当<button>被<form/>包裹时，可以通过设置form-type属性来触发表单对应的事件。

button组件的属性如表所示。

示例如下

//button.wxml
<button type = "default">type:d lefault</button >
<button type = "primary" >type:p rimary </button >
<button type = "warn">type:warn</button >
<button type = "default" bindtar p='buttonSize' size ="{{size}}">改变size</button>
<button type = "default" bindtap='buttonPlain' plain="{{plain}}">改变 plain</button >
<button type = "default" bindtay p ='buttonLoading' loading ="{{load- ing}}">改变loading显示</button >
//button.js 
Page({
data:{
       size:'default',
      plain:'false',
      loading:'false'},
//改变按钮的大小
buttonSize:function(){
if(this.data.size =="default")
this.setData({size:'mini'})
 else
this.setData({size:'default'})
 
//是否显示镂空
buttonPlain({plain:!this.data.plain})
this.setData({ plain:! this.data.plain})
},
//是否显示loading图案
buttonLoading: function(){
this.setData({ loading:!this.data.loading})}
})

4.4.2 radio

单选框用来从一组选项中选取一个选项，在小程序中，单选框由<radio- group/>(单项选择器)和<radio/>(单选项目)两个组件组合而成，一个包含多个<radio/>的<radio - group/>表示一组单选项，在同一组单选项中<radio/>是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。

它们的属性如表所示。

示例代码如下

//radio.wxml
<view>选择您喜爱的城市:</view>
<radio -group bindchange = "citychange">
<radio value="西安">西安</radio ><radio value ="北京">北京</radio ><radio value ="上海">上海</radio ><radio value ="广州">广州</radio ><radio value="深圳">深圳</radio >< /radio - group >
<view>你的选择:{{city}} < /view >
 
<view>选择您喜爱的计算机语言:</view>
<radio -group class ="radio -group" bindchange= "radiochange">
<label class ="radio" wx:for ="{{radios}}">
<radio value ="{{item,value}}" checked ="{{ item.checked}}"/
{{item.name} }
</label >
</radio -group >
<view>你的选择:{{lang}}</view >
//js
Page({
date:{
radios:{
name: 'java',value: 'JAVA'}，
I name: 'python',value: 'Python',checked: 'true'},{ name: 'php',value:'phP' } ,{ name:'swif',value:'Swif'},
],
city:", lang:"},
citychange:function(e){
this.setData({ city:e.detail.value});},
radiochange:function(event){
this.setData({ lang: event.detail.value}); console.log(event.detail.value)
})

4.4.3 checkbox

复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox - group/> <checkbox/>(多选项目)两个组件组合而成。一个<checkbox - group/>表示一组选项可以在一组选项中选中多个选项。

它们的属性如表所示。

示例代码如下

//checkobx.wxml
<view >选择您想去的城市:</view >
<checkbox -group bindchange = "cityChange" ><label wx;for="{{citys}}">
<checkbox value= "{{item.value}}" checked ='{litem.checked}!'
{{item.value}|< /checkbox ></label >
< /checkbox - group >
<view>您的选择是:{{city}}</view >
 
//checkbox.js 
Page({
city:", data: { citys:[
name: 'km',value:'昆明'}， name:'sy',value:'三亚'}，
 name: 'zh',value:'珠海',checked:'true'},{ name:'dl',value:'大连'}]
/,
cityChange:function(e){
console.log(e.detail.value); var city =e.detail.value; this,setData({ city: city })

4.4.4 swith

属性如下

示例代码如下

//switch.wxml
<view >
<switch bindchange = "sw " >{{var1}}
</switch>
</view>
<view >
<switch checked bindchange = "sw2 ">{{var2}} 
</switch>
</view>
<view >
<switch type ="checkbox" bindchange ="sw3 " >{{var3}} </switch></view >
 
Page({
data: {
  var1:'关', var2:'开', var3:'未选'},
  sw: function(e)
  {this.setData({var1: e.detail.value ?'开':'关'}) },
  sw2: function(e)
  {this.setData({ var2:e.detail.value ?'开':'关'})},
  sw3: function(e)
  {this.setData({var3: e.detail.value ?'已选':'未选'})
  }
})

4.4.5 slider

slider组件为滑动选择器，可以通过滑动来设置相应的值。

示例代码如下

<view>默认min =0 max =100 step =1</view><slider></slider >
 
<view>显示当前值</view>
<slider show-value></slider >
<view>设置min =20 max =200 step=10 </view >
<slider main='0'max='200'step='10'show-value></slider>
 
<view>背景条红色,已选定颜色绿色</view>
<slider color="#f00"selected-color='#0f0'></slider>
 
<view>滑动改变icon的大小</view>
<slider show-value bindchange='sliderchange'> </slider>>
<icon type="success"size='{{size}}'> </icon>
Page({
  data:{
    size:'20'
  },
  sliderchange:function(e){
  this.setData({size:e.detail.value })
  }
  })

4.4.6 picker

picker组件为滚动选择器，当用户点击 picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是:selector(普通选择器)、multiSelector(多列选择器)、time(时间选择器)、date(日期选择器)、region(省市选择器)。

1.普通选择器
普通选择器(mode= selector)的属性如表

<view>----range为数组---</view>
<picker range ="{{array}}" value ="{{indexl}}" bindchange='arrayChange'>
当前选择:{{array[index1]}}
</picker >
<view>---range为数组对象--</view>
<picker
bindchange ="objArrayChange" value ="{{index2}}" range-key="name" range="iobjArray">
当前选择:{{objArray[index2].name}}</picker>

//picker.js
Page({
  data:{
  array:["java",'Python' ,'c' ,'c#'],
  objArray:[
  {id:0,name:'Java'},
  {id:1,name:'Python'},
  {id:2 ,name:'c'},
  {id:3 ,name:'c#'}
  ],
  index1:0,
  index2:0
  },
  arrayChange:function(e){
    console.log('picker值变为',e.detail.value)
    var index=0;this.setData({indexl:e.detail.value
    })
  },
  objArrayChange:function(e){
  console.log('picker值变为',e.detail.value)
  this.setData({
    index2:e.datail.value
  })
  }
  })

2.多列选择器
多列选择器(mode=multiSelector) 允许用户从不同列中选择不同的选择项，其选项是
二维数组或数组对象。

多列选择器的属性如表所示

例如，简写代码实现如图所示的省、市、县三级联动选择功能。

示例代码如下

<view>多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" 
bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}"
range="{{multiArray}}">
  <view>
    当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
  </view>
  </picker>
 
 
.js
Page({
  data:{
  multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],
  multiIndex:[0,0,0]
  },
  //绑定 Multipicker
  bindMultiPickerChange:function(e){
  console.log('picker发送选择改变,携带值为',e.detail.value)
  this.setData({multiIndex:e.detail.value
  })
  },
  //绑定MultiPickerColumn
  bindMultiPickerColumnChange:function(e){
  console.log('修改的列为',e.detail.column,'','值为',e.detail.value);
  var data ={multiArray:this.data.multiArray,
  multiIndex:this.data.multiIndex
  };
  data.multiIndex[e.detail.column]= e.detail.value;
  switch(e.detail.column){}
  case0 :
  switch(data.multiIndex[0]){
  case 0:
  data.multiArray[1]=['西安市','汉中市','延安市'];
  data.multiArray[2]=['雁塔区','长安区'];
  break;
  casel :
  data.multiArray[1]=['深圳市','珠海市'];
  data.multiArray[2]=['南山区','罗湖区'];
  break;
  data.multiIndex[1]=0;
  data.multiIndex[2]=0;
  break ;
  case1 :
  switch(data.multiIndex0){
  case 0:
  switch(data.multiIndex1){
  case 0:
  data.multiArray[2]=['雁塔区','长安区'];
  break;
  case 1:
  data.multiArray[2]=['汉台区','南郑区'];
  break;
  case 2:
  data.multiArray[2]=['宝塔区','子长县','延川县'];
  break;
  }
  break;
  case 1:
  switch(data.multiIndex[1]){
    case 0:
    data.multiArray[2]=['南山区','罗湖区'];
    case 1:
    data.multiArray[2]=['香洲区','斗门区'];
    break;
  }
  break;
  }
  data.multiIndex[2]=0;
  console.log(data.multiIndex);
  break;
  }
  this.setData(data);
  },
})

3．时间选择器、日期选择器

时间选择器（mode=time）可以用于从提供的时间选项中选择相应的时间，

其属性如表所示。

日期选择器（mode=date）可以用于从提供的日期选项中选择相应的日期，

其属性如表所示。

示例代码如下

//picker-datetime.js
Page({
  data:{
  startdate:2000,
  enddate:2050,
  date:'2018',
  starttime:'00:00',
  endtime:'12 :59',
  time:'8 :00'
  },
  changedate:function(e){
  this.setData({date:e.detail.value});
  console.log(e.detail.value)
  },
  changetime:function(e){
  this.setData({time:e.detail.value})
  console.log(e.detail.value)
  }
  })
 
//.wxml
 
<view>
<picker mode ="date" start = "{{startdate}}" end = "{{enddate}}" value="{{date}}" bindchange="changedate">
选择的日期:{{date}}
</picker>
</view>
<view>
<picker mode ="time" start ="{{starttime}}" 
end ="{{endtime}}" bindchange="changetime">
选择的时间:{{time}}
</picker>
</view>

4．省市选择器

省市选择器（mode=region）是小程序的新版本提供的选择快速地区的组件，

其属性如表所示。

示例代码如下

//.wxml
<picker mode ="region" value ="{{region}}" 
custom-item="{{customitem}}"  bindchange="changeregion">
选择省市区:{{region[0]}},{{region[1]}},{{region[2]}}
</picker>
 
//picker-region.js
Page({
  data:{
  region:['陕西省','西安市','长安区'],
  customitem:'全部'
  },
  changeregion:function(e){
  console.log(e.detail.value)
  this.setData({
  region:e.detail.value})
  }
  })

4.4.7picker-view

picker-view组件为嵌入页面的滚动选择器。相对于picker组件，picker-view组件的列的个数和列的内容由用户通过<picker-view-column/ >自定义设置。

picker -view组件的属性如表所示。

示例代码如下

//.wxml
<view>当前日期:{{year}}年{{month}}月{{day}}日</view >
<picker-view indicator-style="height:50px;" style ="width:100%; height:300px;"
 value ="{{value}}" bindchange ="bindchange">
 <picker-view-column>
<view wx:for="{{years}}"style="line-height:50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style ="line-height:50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height:50px">{{item}}日</view>
</picker-view-column>
</picker-view>
 
//picker-view.js
const date =new Date()
const years=[]
const months=[]
const days=[]
//定义年份
for(let i=1900;i<=2050;i++){
years.push(i)
}
//定义月份
for(let i=1;i<=12;i++){
months.push(i)
}
//定义日期
for(let i=1;i<=31;i++){
days.push(i)
}
Page({
data:{
years:years,
months:months,
days:days,
year:date.getFullYear(),
month:date.getMonth()+1,day:date.getDate(),value:[118,0,0],
},
//定位到2018年1月1日
bindChange:function(e){
const val =e.detail.value 
console.log(val);
this.setData({
year:this.data.years[val[0]],
month:this.data.months[val[1]],
day:this.data.days[val[2]]
})
}
})

4.4.8 input
input组件为输入框，用户可以输入相应的信息

示例代码如下

.wxml
<input placeholder="这是一个可以自动聚焦的 input" auto-focus/>
<input placeholder="这个只有在按钮点击的时候才聚焦" focus ="{{focus}}"/>
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<input maxlength="10" placeholder="最大输入长度为10"/>
<view class="section_title">你输入的是:{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2"/>
<input password type="number"/>
<input password type="text"/>
<input type="digit" placeholder="带小数点的数字键盘"/>
<input type="idcard" placeholder="身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>
 
//input.js
Page({
  data:{
  focus:false,
  inputValue:""
  },
  bindButtonTap:function(){
  this.setData({
  focus:true
    })
  },
  bindKeyInput:function(e){
  this.setData({
  inputValue:e.detail.value
  })
},
  bindReplaceInput:function(e){
  var value =e.detail.value
  var pos =e.detail.cursor
  if(pos!=-1){
  //光标在中间
  var left =e.detail.value.slice(0,pos)
  //计算光标的位置
  pos =left.replace(/11/g,'2').length
  }
  //直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
  return{
value:value.replace(/11/g,'2'),
Cursor:pos
  }
//或者直接返回字符串,光标在最后边
//return value.replace( /11 /g,'2'),
  }
})

4.4.9textarea

textarea组件为多行输入框组件，可以实现多行内容的输入。

textarea组件的属性如表所示。

示例代码如下

.wxml
<textarea bindblur ="bindTextAreaBlur" auto-height placeholder="自动变高"/>
<textarea placeholder="placeholder 颜色是红色"placeholderstyle="color:red;"/>
<textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus/>
<textarea placeholder="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"/>
<button bindtap="bindButtonTap">使得输入框获取焦点</button >
<form bindsubmit="bindFormSubmit">
<textarea placeholder ="form 中的textarea" name ="textarea" />
<button form-type="submit">提交</button></form>

//textarea.js
Page({
  data:{
  height:10,
  focus:false
  },
  bindButtonTap:function(){
  this.setData({
  focus:true
  })
  },
  bindTextAreaBlur:function(e){
    console.log(e.detail.value)
  },
  bindFormSubmit:function(e){
  console.log(e.detail.value.textarea)
  }
  })

4.4.10 label

label组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id,或者将控件放在该标签下，当点击label组件时，就会触发对应的控件。for属性的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前，label组件可以绑定的控件有<button/ >、<checkbox/ >、<radio/>、<swith/>

示例代码如下

.wxml
<!--单击中国不能选择/取消复选框-->
<view><checkbox></checkbox>中国</view>
<!--单击“中国”可以选择/取消复选框-->
<view><label><checkbox> </checkbox >中国</label></view>
<!--使用for找到对应的 id -->
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value ="{{item.value}}" checked = '{{item.checked}}'>
{{item.value}}</checkbox>
</label>
</checkbox-group>
<view>您的选择是:{{city}}</view>

//1abel.js
Page({
  city:"",
  data:{
  citys:[
  {name:'km',value:'昆明'},
  {name:'sy',value:'三亚'},
  {name:'zh',value:'珠海',checked:'true'},
  {name:'dl',value:'大连'}]
  },
  cityChange:function(e){
  console.log(e.detail.value);
  var city =e.detail.value;
  this.setData({city: city})
  }
  })

4.4.11 form

form组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<form/ >表单中formType为submit的<button/ >组件时，会将表单组件中的value值进行提交。

form组件的属性如表所示。

示例代码如下

//.wxml
<form bindsubmit ="formSubmit " bindreset ="formReset ">
  <view>姓名:
    <input type="text"name="xm"/>
  </view>
  <view>性别:
    <radio-group name="xb">
      <label><radio value="男" checked/>男</label>
      <label><radio value="女"/>女</label>
    </radio-group>
  </view>
  <view>爱好:
    <checkbox-group name="hobby">
      <label wx:for="{{hobbies}}">
        <checkbox value="{{item.value}}" checked='{{item.checked}}'>{{item.value}}</checkbox>
      </label>
    </checkbox-group>
  </view>
  <button formType='submit'>提交</button>
  <button formrype='reset'>重置</button>
</form>
 
 
//form. js
Page({
  hobby :"",
  data:{
  hobbies :[
  {name:'jsj',value:'计算机',checked:'true'},
  {name:'music',value:'听音乐'},
  {name:'game',value:'玩电竟'},
  {name:'swim',value:'游泳',checked:'true'}]
  },
  formSubmit:function(e){
  console.log('form发生了submit事件，携带数据为:'.e.detail.value)
  },
  formReset:function(){
  console.log('form发生了reset事件')
  }
  })

4.5 多媒体

多媒体组件包括image（图像）、audio（音频）、video（视频）、camera（相机）组件，使用这些组件，可以让页面更具有吸引力。

4.5.1 image

image组件为图像组件，与HTML中的 <img/ >类似，系统默认image组件的宽度为300 px、高度为2250 px。

image组件的属性如表所示。

image组件中的mode属性有13种模式，其中缩放模式有4种，裁剪模式有9种。

1．缩放模式

■ scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
■ aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以将图片完整地显示出来。
■ aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，在另一个方向将会发生截取。

■ widthFix宽度不变，高度自动变化，保持原图宽高比不变。

示例代码如下：

//image.wxml
<block wx:for ="{{modes}}">
<view>当前图片的模式是:{{item}}</view>
<image mode ="{{item}}" src ="/image/person3.jpg"  style ="width:100%,height:100%"/>
</block>
 
//image.js
Page({
  data:{
  modes:['scaleToFill','aspectFit','aspectFill','widthFrix']
  }
})

2．裁剪模式
■ top不缩放图片，只显示图片的顶部区域。

■ bottom不缩放图片，只显示图片的底部区域。

■ center不缩放图片，只显示图片的中间区域。

■ left不缩放图片，只显示图片的左边区域。

■ right不缩放图片，只显示图片的右边区域。

■ top left不缩放图片，只显示图片的左上边区域。

■ top right不缩放图片，只显示图片的右上边区域

■ bottom left不缩放图片，只显示图片的左下边区域。

■ bottom right不缩放图片，只显示图片的右下边区域。

示例代码如下

.wxml
<block wx:for ="{{modes}}">
<view>当前图片的模式是:{{item}}</view>
<image mode ="{{item}}" src ="/images/person3.jpg"  style ="width:100px;height:100px"/>
</block>
//image.js
Page({
  data:{
  modes:['top','center','left','right','top_left','top_right','bottom_left','bottom_right']
  }
})

4.5.2 audio

audio组件用来实现音乐播放，暂停等。

示例代码如下

//.wxml
<audio src ="{{src}}" action="{{action}}" poster = "{{poster}}" name = "{{name}}" author ="{{author}} " loop controls></audio >
<button type="primary" bindtap='play'>播放</button >
<button type="primary" bindtap="pause">暂停</button >
<button type ="primary" bindtap="playRate">设置速率</button>
<button type="primary" bindtap="currentTime">设置当前时间(秒)</button>
//audio.js
Page( {
  data:{
  poster:'http://.gtimg.cn/usic/hoto new/002R300x300M000003rsKF44Gyask.jpg?max age=2592000',
  name:'天外来物',
  author:'薛之谦',
  src:'http://ws.stream.qqmusic.gg.comM500001VfvsJ21xFab.mp3? guidffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },
  play:function(){
  this.setData({
  action:{
  method: 'play'
  }
  })
  },
  pause:function(){
  this.setData({
  action:{
  method: 'pause'
  }
  })
  },
  playRate:function(){
  this.setData({
  action:{
  method:'setPlaybackRate',
  data:10 //速率
  }
  })
  console.log('当前速率:'+this.data.action.data)
  },
  currentTime:function(e){
  this.setData({
  action:{
  method:'setCurrentTime',
  data:120
  }
  })
  }
  })

4.5.3 video

video组件用来实现视频的播放、暂停等。视频的默认宽度为300 px，高度为225 px,

video组件的属性如表所示。

示例代码如下

//.wxml
<video src ="{{src}}" controls ></video >
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
//video.js
Page({
  data:{
  srC:"../image/person3.mp4",
  },
  bindButtonTap:function(){
  var that =this
  wx.chooseVideo({
  sourceType: [ 'album' ,'camera'],
  maxDuration:60,
  camera:['front','back'],
  success:function(res){
  that.setData({
  src:res.tempFilePath
  })
}
})
}
})

4.5.4 camera

camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个camera组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像；在手机中运行时，使用手机前后摄像头实现拍照或录像。

camera组件的属性如表所示。

示例代码如下

//..wxml
<camera device-position ="back" flash ="off" binderror ="error"
style="width:100%;height:350px;"></camera>
<button type ="primary" bindtap ="takePhoto" >拍照</button ><view>预览</view >
<image mode ="widthFix" src ="{{src}}"></image>
//..js
Page({
  takePhoto(){
    const ctx=wx.createCameraContext()//创建并返回 camera上下文对象/拍照,成功则返回图片
    ctx.takePhoto({
      quality:' high',
      success:(res)=>{
        this.setData({
          src:res.tempImagePath
        })
      }
    })
  },
  error(e){
  console.log(e.detail)
  }
})

4.6其他组件

4.6.1 map

map组件用于在页面中显示地图或路径，常用于LBS（基于位置服务）或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等能力，不能在croll-view、swiper、picker-view、movable-view组件中使用。

map组件的markers属性用于在地图上显示标记的位置，

如表所示

map组件的polyline属性用来指定一系列坐标点，从数组第一项连线到最后一项，形成一条路线，可以指定线的颜色、宽度、线型以及是否带箭头等，

其相关属性如表所示。

示例代码如下

//.js
Page({
  data :{
  markers :[{
  //标记点
  iconPath:"/ages /dw.png",
  id:0,
  longitude:"108.9290",
  latitude:"34.1480",
  width:50,
  height:50
  }],
  polyline:[{
    points:[{
    longitude:"108.9200",
    latitude:"34.1400",
    },
  {
    longitude:"108.9200",//线路点2
    latitude:"34.1500"
    },
  {
  longitude:"108.9200",//线路点3
  latitude:"34.1700",
  }
    ],
  color:"#00ff00",
  width:2,
  dottedLine:true
  }],
  controls:[{
  //控件的相关信息
  id:1,
  iconPath:'ages/w.png',
  position:{
  left:0,
  top:300,
  width:30,
  height:30
  },
  clickable:true
  }]
  },
  regionchange(e){
  console.log(e.type)
  },
  markertap(e){
  console.log(e.markerId)
  },
  controltap(e){
  console.log(e.controlId)
  }
  })

 
//..wxml
<map id ="map"
longitude="108.9200"
latitude="34.1550"
scale="14"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"bindmarkertap="markertap"polyline="{{polyline}}"
bindregionchange="regionchange"
show-location
style="width:100%;height:300px;"></map>

4.6.2 canvas

canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。在默认情况下，canvas组件的默认宽度为300 px，高度为225 px，同一页面中的canvas-id不能重复，否则会出错。

canvas组件的属性如表所示。

示例代码如下

//..wxml
<canvas canvas-id ="myCanvas" style ="border: 1px solid red;"/>
//.js
Page({
  onLoad:function(options){
  var ctx=wx.createCanvasContext('myCanvas')
  ctx.setFillStyle('green')
  ctx.fillRect(10,10,200,100)
  ctx.draw()
  }
  })

第五章即速应用

5.1 即速应用概述

5.1.1 即速应用的优势

即速应用是深圳市咫尺网络科技开发有限公司开发的一款同时兼具微信小程序和支付宝小程序快速开发能力的工具，用户只需简单拖拽可视化组件，就可以实现在线小程序开发。据不完全统计，在微信小程序正式发布的1年内，在即速应用上打包代码并成功上线的微信小程序已经超过5万个。
即速应用的功能特点主要体现在以下几个方面：

1.开发流程简单，零门槛制作

使用即速应用来开发微信小程序的过程非常简单，无须储备相关代码知识，没有开发经验的人也可以轻松上手。

（1）登录即速应用的官方网站（www.jisuapp.cn），进入制作界面，从众多行业模板中选择一个合适的模板。
（2）在模板的基础上进行简单编辑和个性化制作。
（3）制作完成后，将代码一键打包并下载。
（4）将代码上传至微信开发者工具。
（5）上传成功后，等待审核通过即可。

2.行业模块多样，种类齐全。

即速应用为广大开发者提供了非常齐全的行业解决方案。目前，即速应用已经上线60多个小程序行业模板，涉及餐饮（单店版、多店版）、婚庆、旅游、运动、美容、房地产、家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业。
这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道，降低运营成本，提高管理效率。

3.丰富的功能组件和强大的管理后台

即速应用的功能组件和管理后台非常实用，可以根据实际情况解决商家的不同需求。例如，到店体系可以实现电子点餐、排队预约和线上快速结算；社区体系可以实现评论留言和话题管理；多商家系统可以实现分店统一管理、多门店统一运营；营销工具可以实现会员卡、优惠券的设置等营销方式……
目前，即速应用有4个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。

即速应用的应用范围主要包括以下类型：
（1）资讯类：新闻、媒体。
（2）电商类：网购（服装、电器、读书、母婴……）。
（3）外卖类：餐饮及零售。

（4）到店类：餐饮及酒吧。
（5）预约类：酒店、KTV、家教、家政，其他服务行业。

5.1.2 即速应用界面介绍

登录即速应用官网，单击“注册”按钮，在如图的页面填写相应信息，即可完成注册。完成注册后，即可登录账号，使用即速应用。

即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板，如图所示。

1.菜单栏
菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”选项用于进入后台管理页面，“帮助”选项用于提示帮助功能，“客服”选项用于进入客服界面，“历史”选项用来恢复前项操作，“预览”选项用在PC端预览制作效果，“保存”选项用于保存已制作的内容，“生成”选项用于实现小程序打包上线设置。

2.工具栏
工具栏包括“页面管理”“组件库”2个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。“组件库”有9个基础组件、7个布局组件、18个高级组件和2个其他组件。

3.编辑栏
编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右边的“前进”“后退”选项可以进行恢复操作，“模板”选项可以用来选择模板，“元素”选项可以用来显示页面中的组件及其层次关系，“数据”选项可以用来进行页面数据管理，“模块”选项可以用来选择模块。

4.属性面板
属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡。“组件”选项卡用来设置组件内容及点击事件；“组件样式”选项卡用来设置组件的样式，不同组件有不同的样式需要设置。

5.2 即速应用组件

即速应用提供了大量的组件供用户快速布局页面，包括7个布局组件、9个基本组件、18个高级组件和2个其他组件。

5.2.1 布局组件

布局组件用于设计页面布局，主要包括双栏、面板、自由面板、顶部导航、底部导航、分割线和动态分类，如图所示。

1.双栏组件
双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志，便于操作，预览时则不会出现。双栏组件默认设置每个栏占50%总宽，也可以按实际需要调整比例。双栏里面可以添加基本的组件，从而达到整体的布局效果。双栏还可以嵌套双栏，即可以在其中的一个栏里嵌入一个双栏，从而将整体分成3部分（若需要将整体分成4部分，就再嵌套一个双栏，依次类推）。双栏组件的属性面板如图所示。

2.面板组件
面板组件相当于一个大画板，用户可以将很多基本（甚至高级）的组件（如文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件等）放进面板组件里一起管理。面板组件的属性面板如图所示。

3.自由面板组件
自由面板组件是指放置在该面板内的组件可以自由拖动，调节组件大小。用户既可以向自由面板内拖入部分组件（包括文本组件、图片组件和按钮组件），也可以拖入任意相关容器组件，用于不规则布局。自由面板组件的属性面板如图所示。

4.顶部导航组件
顶部导航组件固定于页面顶部，用于编辑顶部的导航。常用的手机应用在顶部有一条导航，上面写有手机应用App的名称或logo，以及返回键等。顶部导航组件的属性面板设置如图所示。

5.底部导航组件
底部导航组件固定于页面底部，用于编辑底部的导航。底部导航组件的属性面板设置如图所示。

通过底部导航组件可以添加标签、删除标签，同时可以分别设置每个标签的名称、原始图片、点击图片及链接至某一页面；通过组件面板可以进行组件背景色、图片及文字的设置。底部导航组件的制作效果如图所示。

6.分割线组件
分割线组件被放置于任意组件之间，用于实现分割。分割线组件的属性面板如图所示。

7.动态分类组件
动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式，可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。动态分类组件的属性面板如图所示。

5.2.2基本组件

基本组件是小程序页面常用的组件，包括文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频，如图所示。

1.文本组件
文本组件用于展示文字、设置点击事件，是小程序页面中最常用的组件。文本组件的属性面板如图所示。

2.图片组件
图片组件用于在页面中展示图片，其属性面板如图所示。

3.按钮组件
按钮组件用于在页面中设置按钮，其属性面板如图所示

4.标题组件
标题组件用于在页面中设置标题，其属性面板如图所示。

5.轮播组件
轮播组件用于实现图片的轮播展示，其属性面板如图所示。

单击“添加轮播分组”按钮进入管理后台，然后单击“轮播管理”→“新建分组”选项可以创建轮播分组，如图所示。

分别填写“分组名称”和“分组描述”，单击“确定”按钮进入图所示的轮播管理界面。

单击“轮播项”按钮，进入图所示的页面。

单击“添加轮播”按钮，在图所示的页面进行轮播项的设置。

根据需要添加相应的轮播后，轮播项界面如图所示。

单击图a中的“编辑”按钮，在图b所示的绑定轮播分组中选定“banner”轮播分组，单击“预览”按钮，将出现预览效果，如图c所示。

6.分类组件

分类组件可以设置不同内容展示在不同类别中，还可以添加、删除分类的个数及进行相应的设置。分类组件的属性面板如图所示

7.图片列表组件
图片列表组件可以将图片以列表的形式展示，还可以设置图片的名称、标题和点击事件。图片列表组件的属性面板如图所示。

例如，添加“女装”分组，在此分组内添加“全部”“羽绒服”“毛衣”“半身裙”4个页面，并在每个页面内添加分类和图片列表组件。添加页面如图所示。

8.图文集组件
图文集组件用于展示图片、标题和简介，其属性面板如图所示。

9.视频组件
视频组件用于展示视频，其属性面板如图所示。

视频组件提供网页应用、小程序和云服务3种视频来源。网页应用使用视频通用代码来确定视频来源。例如，打开优酷网站，找到需要的视频，进入“分享给朋友”页面，通用代码就显示出来，如图所示。

单击“复制通用代码”按钮，把复制好的通用代码粘贴到图所示的文本框中，保存后即可在小程序项目中添加该视频。

5.2.3 高级组件

高级组件通常需要后台数据，通过设置后台数据来实现数据后台化，让小程序的数据随时更新，及时修改，如图所示。下面介绍其中的几种常用组件。

1. 动态列表组件
动态列表组件是容纳基础组件来展示后台数据的容器，通过添加基础组件来展示对应的后台数据，其属性面板如图所示。

要使用动态列表组件，必须在后台进行数据管理，单击“管理对象”按钮，进入管理后台，如图所示。

单击“新增数据对象”按钮，进入“数据对象列表”页面，如图所示。

单击“添加字段”按钮，添加相应字段，如图所示。

单击“保存”按钮并返回，进入“对象管理”页面，如图所示。

单击“数据管理”按钮，进入“数据管理”页面，如图所示

单击“+ 添加数据”按钮新建数据，进入“添加数据”页面，如图所示。

添加相应数据并保存，继续添加所需数据，“数据管理”页面如图所示。

退回到编辑页面，为了方便布局，拖拽“自由面板”组件到动态列表中，然后拖拽一个图片和两个文本组件到自由面板组件，如图所示。

在动态列表属性面板的绑定数据对象中选择“羽绒服”数据对象，同时图片组件绑定数据对象样式字段，文本组件分别绑定数据对象的名称和价格字段，如图所示。

2.个人中心组件
个人中心组件显示个人相关信息的组件，包括图像、昵称、我的订单、收货地址、购物车等，如图所示。

3.动态列表组件
动态表单组件相当于HTML中的<form>标签，是一个容器组件，可以添加子表单组件和基本组件，用来收集用户提交的相关信息给后台数据对象。动态表单组件的属性面板如图所示。

在编辑页面，添加相应的动态表单子组件（如“评分”）

单击图所示属性面板中的“管理对象”按钮，添加数据对象列表

4.评论组件
评论组件提供信息发布或回复信息的组件，评论组件的属性面板如图所示。

5.计数组件
计数组件可以用于点赞、统计浏览量等类似的计数功能。计数组件的属性面板如图所示。

6.地图组件
地图组件用于显示指定地址的地图，常用于实现定位及导航功能，地图组件的属性面板如图所示。

7.城市定位组件
城市定位组件通常与列表类组件搭配使用，常见搭配有动态列表和商品列表。例如，城市定位组件与商品列表搭配，可以实现通过城市定位来搜索出某具体位置信息下的商品列表。城市定位组件的属性面板如图所示。

8.悬浮窗组件
悬浮窗组件的固定搭配有：客服、我的订单、购物车、回到顶部悬浮窗组件通常出现在个人中心或商品列表页面，其属性面板如图所示。

5.2.4 其他组件

组件包括音频组件和动态容器组件。

1.音频组件
音频组件用于播放音乐（每个页面有一个音频组件即可），手动点击播放按钮后即可实现播放。音频文件可以选择音频库中的音乐，也可以上传本地音频进行更换，音频组件的属性面板如图所示

2.动态容器组件
动态容器组件用于动态页面，即所在页面绑定了数据对象。动态容器组件中可以添加多种组件——文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件。其中，文本组件和图片组件可以绑定相应的数据对象字段（填充相应动态数据），若有计数组件，则会自动与动态容器关联。动态容器组件的属性面板如图所示。

5.3 即速应用后台管理

1.数据总览
数据管理包括数据总览、访客分析和传播数据功能数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及浏览量曲线播数据主要是用于提供新老访客的比例，以及访客用哪些主要平台打开应用的水数及占比。

2.分享设置
分享设置主要提供可以分享应用的方式

3.用户管理
用户管理主要用于实现对用户进行添加、分组、群发消息、储值金充值、赠送会员功能

4.应用数据
应用数据是后台管理的主要内容，前端组件(动态列表、动态表单)的数据都是通过在应用数据中的数据对象来管理的，类似通过数据库存放和管理数据

5.轮播管理
轮播管理是前端软播组件的后台数据管理器，通过软播管理来设置前端软播组件展示的图片内容。

6.分类管理
分类管理适用于电商、到店、应用数据。分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。动态分类的二级有图模式只适用于电商。

7.商品管理
商品管理是后台管理的主要内容，前端商品列表组件的数据来源于后台商品管理。商品管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单统计、账单明细、运费管理和评价管理功能。

8.经营管理
经营管理主要包括子账号管理、手机端客户关系管理和短信接收管理，便于管理者管理小程序的运营。

9.营销管理
营销工具是小程序营销推广的有力工具，主要有会员卡、优惠券、积分、值、推广秒杀、集集乐、拼团活动、大转盘、砸金蛋、刮刮乐等。这些营销工具都需要事前在后台合理设置后，才能在活动中发挥更大的作用。

10.多商家管理
多商家管理是即速应用为有众多商家的商城(如“华东商城”“义乌商城”等)开设的管理功能，方便管理者统计每家店铺的订单及进行收益分析。

5.4 打包上传

即速应用可以将小程序的代码打包，该代码包可以通过微信开发者工具来对接微信小程序。

5.4.1 打包

进入即速应用后台管理，选择左边选项“分享设置”按钮，单击“微信小程序”选项，进入如图所示的页面。

选择“代码包下载”选项，单击“确定”按钮，进入如图所示的页面。

通过“微信公众平台→小程序→设置→开发设置”获取AppID和AppSecret，在“服务器配置”中填写相关信息，选择相应分类，单击“打包”按钮，即可成功打包，如图所示。

单击“下载”按钮，即可下载该小程序代码包。

5.4.2 上传

打开微信Web开发者工具，新建项目，并填写相关内容。其中，项目目录为下载包解压后的目录，如图所示。

单击“确定”按钮，打开小程序代码，编译无误后，填写该项目的版本号，单击“上传”按钮即可实现该小程序代码上传

上传成功后，打开微信公众平台的“开发管理”界面，就可以看到该小程序的版本信息，待审核通过后，即可在“微信”→“发现”→“小程序”中搜索到该小程序。

第六章 API应用

6.1 API网络

微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生API接口或第三方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关闭。

在本节，我们将介绍常用的3个网络API。

6.1.1 发起网络请求

wx. request（Object）实现向服务器发送请求、获取数据等各种网络交互操作，其相关参数如表所示。一个微信小程序同时只能有5个网络请求连接，并且是HTTPS请求。

例如，通过wx. request（Object）获取百度（https://www.baidu.com）首页的数据。（需要在微信公众平台小程序服务器配置中的request合法域名中添加“https://www.baidu.com”。）

示例代码如下：

//baidu.wxml
<buttontype="primary"bindtap="getbaidutap">获取HTML数据</button >
<textareavalue='{{html}}'auto-heightmaxlength='0'> </textarea>
 
//.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方法获取邮政编码对应的地址信息。
示例代码如下：

//postcode.wxml
<view>邮政编码:</view>
<inputtype="text"bindinput="input"placeholder='6位邮政编码'/>
<buttontype="primary"bindtap="find">查询</button>
<blockwx:for="{{address}}">
<blockwx:for="{{item}}">
<text> {{item}} </text>
</block>
</block >
 
//.js
//postcode.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.reason || res.data.reason,//错误原因分析
      error_code:res.data.error_code})
      }}})}}})

例如，通过wx. request（Object）的POST方法获取邮政编码对应的地址信息。

//postcode.wxml
<view>邮政编码:</view>
< inputtype = "text "bindinput = "input "placeholder ='6位邮政编码'/>< buttontype = "primary "bindtap ="find">查询</button ><blockwx:for="{{address}}" >
<blockwx:for="{{item}}" >
<text > {{item}} < /text >< /block >< /block >
 
//postcode.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/x-www-form -urlencoded'},
method:'posT'，//方法为 POST 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.reason llres.data.reason,//错误原
因分析
error_code:res.data.error_code})
})

6.1.2 上传文件

wx. uploadFile（Object）接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求，其相关参数如表所示。

通过wx. uploadFile（Object），可以将图片上传到服务器并显示。

示例代码如下：

//upload.wxml
<buttontype="primary"bindtap="uploadimage">上传图片</button>
<imagesrc="{{img}}"mode="widthFix"/>
 
//upload.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.statusCode ! = 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）接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTP GET请求，返回文件的本地临时路径。其相关参数如表所示。

例如，通过wx. downloadFile（Object）实现从服务器中下载图片，后台服务采用WAMP软件在本机搭建。
示例代码如下：

//downloadFile.wxml
<buttontype = "primary "bindtap ='downloadimage'>下载图像</button ><imagesrc ="{{img}}"mode = 'widthFix'style =" width:90%;height:500px"> </image>
//downloadFile.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
})
})
})

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保存图片到本地。其相关参数如表所示。

若调用成功，则返回tempFilePaths和tempFiles, tempFilePaths表示图片在本地临时文件路径列表。tempFiles表示图片的本地文件列表，包括path和size。

示例代码如下

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）接口主要用于预览图片，其相关参数

示例代码如下

wx.previewImage({//定义显示第二张
current:" http://bmob - cdn - 16488.b0.upaiyun.com/2018/02 /057
2.png"，
urls:["http://bmob-cdn -16488.b0.upaiyun.com/2018/02 /05 /1 . png",
"http://bmob-cdn-16488.b0.upaiyun.com/2018/02 /05 /2 . png"，
"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05 /3 . jpg"]})

3．获取图片信息

wx. getImageInfo（Object）接口用于获取图片信息，其相关参数如表所示。

示例代码如下

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。其相关参数如表所示。

示例代码如下

wx.chooseImage({
success:function(res){
wx. saveImageToPhotosAlbum({
filePath:res.tempFilePaths[0]， success:function(e){
console.log(e)
 
})

6.2.2 录音API

录音API提供了语音录制的功能，主要包括以下两个API接口

wx.startRecord（Object）接口用于实现开始录音。
wx.stopRecord（Object）接口用于实现主动调用停止录音。

1．开始录音
wx. startRecord（Object）接口用于实现开始录音。当主动调用wx.stopRecord（Object）接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx. saveFile（）接口。其相关参数如表所示。

2.停止录音
wx. stopRecord（Object）接口用于实现主动调用停止录音。

示例代码如下

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）接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。其相关参数如表所示。

示例代码如下

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）。

wx.startRecord({
success: function(res){
var tempFilePath = res.tempFilePath
wx.playVoice({ filePath:tempFilePath
})
 
setTimeout(function(){
//暂停播放
wx.pauseVoice()},5000)
 
)

3．结束播放
wx. stopVoice（Object）用于结束播放语音。

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）用于播放音乐，同一时间只能有一首音乐处于播放状态，其相关参数如表所示。

2．获取音乐播放状态

wx. getBackgroundAudioPlayerState（Object）接口用于获取音乐播放状态，其相关参数如表所示

接口调用成功后返回的参数如表所示。

3．控制音乐播放进度

wx. seekBackgroundAudio（Object）接口用于控制音乐播放进度，其相关参数如表所示。

4．暂停播放音乐

wx. pauseBackgroundAudio（）接口用于暂停播放音乐。

示例代码如下

5.停止播放音乐

wx. stopBackgroundAudio（）接口用于停止播放音乐。
示例代码如下：

6．监听音乐播放
wx. onBackgroundAudioPlay（CallBack）接口用于实现监听音乐播放，通常被wx. playBack-groundAudio（Object）方法触发，在CallBack中可改变播放图标。

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。实际效果如图所示。

music. wxml的代码如下：
<viewclass="container">
< imageclass = " bgaudio"src = "{{changedImg? music.coverImg:'/im- age/background.png'}}"/>
<viewclass ="control -view">
<!--使用data-how定义一个0表示快退10秒-->
<imagesrc ="/image/pre.png "bindtap="onPositionTap"data -how= "0 "/>< imagesrc = "/image/{{isPlaying?'pause':'play'}} .png " bindtap = " onAudioTap"/>
<imagesrc ="/image/stop.png"bindtap = "onStopTap"/><!--使用data-how定义一个1表示快进10秒-->
<imagesrc ="/image/next.png "bindtap ="onPositionTap"data -how = "1"/>< /view >< /view >
music. wxss代码如下：
.bgaudio{
height:350rpx; width:350rpx;
margin -bottom:100rpx;
 
.control -viewimage{ height:64rpx; width:64rpx; margin:30rpx;


music.json
{}
Page({
data:{
 //记录播放状态
 isPlaying:false，
 /记录coverImg,仅当音乐初始时和播放停止时,使用默认的图片。播放中和暂停时，都使用当前音乐的图片
 coverImg
    changedImg:false，    
 /音乐内容
 music: {
"url":
 "http://bmob-cdn-16488.b0 .upaiyun.com/2018/02 /09/117e4a1b405195b18061299e2de89597.mp3"，
 "title":"盛晓玫-有一天"，
"coverImg":
"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg"
    }，    
    },    
    onLoad;function(){    
    //页面加载时,注册监听事件    
    this.onAudioState();    
    }，    
 //点击播放或者暂停按钮时触发
    onAudioTap:function(event){    
 if(this.data.isPlaying){
 //如果在正常播放状态,就暂停,并修改播放的状态
    wx.pauseBackgroundAudio();    
    }else{    
 //如果在暂停状态,就开始播放,并修改播放的状态
 let music = this.data.music;
    wx.playBackgroundAudio({    
    dataUrl: music.url,    
    title: music.title,    
    coverImgUrl:music.coverImg    
    })    
 
    //点击即可停止播放音乐    
    onStopTap:function(){    
 let that = this;
    wx.stopBackgroundAudio({    
    success:function(){    
    //改变coverImg和播放状态    
    that.setData({ isPlaying:false,changedImg:false});
 
    })        }，    
 //点击“快进10秒”或者“快退10秒”时,触发
    onPositionTap:function(event){    
 let how = event.target.dataset.how;
 /获取音乐的播放状态
    wx.getBackgroundAudioPlayerState({    
    success:function(res){    
    //仅在音乐播放中,快进和快退才生效    
//音乐的播放状态,1表示播放中
 let status = res.status;
 if(status === 1){
//音乐的总时长
 let duration = res.duration;58/音乐播放的当前位置
 let currentPosition = res.currentPosition;
 if(how ==="0"){
//注意:快退时,当前播放位置快退10秒小于0时,直接设置position为1;否则,直接减去10秒
 //快退到达的位置
. let position = currentPosition - 10;
 if(position <0){
    position =1;    
 
    //执行快退    
    wx.seekBackgroundAudio({    
    position: position    
    });    
 /给出一个友情提示,在实际应用中,请删除!!!
    wx. showToast({title:"快退10s",duration:500});    
 
if(how === "1"){
 /注意:快进时,当前播放位置快进10秒后大于总时长时,直接设置position 为总时长减1
/快进到达的位置
 let position =currentPosition +10;
 if(position >duration){
    position =duration -1;    
 
    //执行快进    
    wx.seekBackgroundAudio({    
    position: position    
    });    
//给出一个友情提示,在实际应用中,请删除!!!
    wx.showToast({ title:"快进10s",duration:500});    
    }else {    
//给出一个友情提示,在实际应用中,请删除!!!
    wx.showToast({title:"音乐未播放",duration:800});    
    }    
 
    })    
 
    //音乐播放状态    
    onAudioState:function(){    
 let that =this;
    wx.onBackgroundAudioPlay(function(){    
//当wx.playBackgroundAudio()执行时触发101 //改变coverImg和播放状态
    that.setData({ isPlaying:true,changedImg:true});    
console.log("on play");    
    });    
    wx.onBackgroundAudioPause(function(){    
//当wx.pauseBackgroundAudio()执行时触发107 //仅改变播放状态
    that.setData({isPlaying:false});
    console.log("on pause");    
    });    
    wx.onBackgroundAudioStop(function(){    
//当音乐自行播放结束时触发113/改变coverImg和播放状态
    that.setData({isPlaying:false,changedImg:false});    
    console.log("on stop");    
    });    
 
}
    })

效果如图

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）用于保存文件到本地，其相关参数如表所示。

代码如下

saveImg:function(){
  wx.chooseImage({
    count:1,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
      var tempFilePaths=res.tempFilePaths[0]
      wx.saveFile({
        tempFilePath:tempFilePaths,
        success:function(res){
          var saveFilePath=res.savedFilePath;
          console.log(saveFilePath)
        }
      })
    }
  })
}

2．获取本地文件列表
wx. getSavedFileList（Object）接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳（从1970/01/01 08: 00: 00到当前时间的秒数）文件列表。其相关参数如表所示。

代码如下

wx.getSavedFileList({
  success:function(res){
    that.setData({
      fileList:res.fileList
    })
  }
})

3．获取本地文件的文件信息
wx. getSaveFileInfo（Object）接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx. getFileInfo（Object）接口。

其相关参数如表

示例代码如下

wx.chooseImage({
    count:1,//默认值为9
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
      var tempFilePaths=res.tempFilePaths[0]
    wx.saveFile({
     tempFilePath:tempFilePaths,
          filePath:saveFilePath,
          success:function(res){
            var saveFilePath=res.saveFilePath;
            wx.getSavedFileInfo({
              filePath:saveFilePath,
              success:function(res){
            console.log(res.size)
          }
        })
      }
    })
  }
  })

4．删除本地文件
wx. removeSaveFile（Object）接口用于删除本地存储的文件，

其相关参数如表所示。

wx.getSavedFileList({
      success:function(res){
        if(res.fileList.length>0){
          wx.removeSavedFile({
            filePath:res.fileList[0].filePath,
            complete:function(res){
              console.log(res)
            }
          })
        }
      }
    })

5．打开文档
wx. openDocument（Object）接口用于新开页面打开文档，支持格式有doc、xls、ppt、pdf、docx、xlsx、pptx，其相关参数如表所示。

wx.downloadFile({
  url:"../images/tu2.png",
  success:function(res){
    var tempFilePath=res.tempFilePath;
    wx.openDocument({
      filePath: tempFilePath,
      success:function(res){
        console.log("打开成功")
      }
    })
  }
  })

6.4 本地数据缓存API

小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10 MB，其目的是提高加载速度。数据缓存的接口主要有4个：

■ wx.setStorage（Object）或wx.setStorageSync（key, data）接口用于设置缓存数据。 ■ wx.clearStorage（）或wx.clearStorageSync（）接口用于清除缓存数据。
■ wx.getStorage（Object）或wx.getStorageSync（key）接口用于获取缓存数据。
■ wx.removeStorage（Object）或wx.removeStorageSync（key）接口用于删除指定缓存数据。

其中，带Sync后缀的为同步接口，不带Sync后缀的为异步接口。

6.4.1 保存数据

1. wx. setStorage（Object）
wx. setStorage（Object）接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来key对应的内容。其参数如表所示。

wx.setStorage({
Key:'name',
data:'sdy',
success:function(res){
console.log(res)
}
})

2. wx. setStorageSync（key, data）
wx. setStorageSync（key, data）是同步接口，其参数只有key和data。
示例代码如下

wx.getStorageSync('age','25')

6.4.2 获取数据

1. wx. getStorage（Object）
wx. getStorage（Object）接口是从本地缓存中异步获取指定key对应的内容。

2. wx. getStorageSync（key）
wx. getStorageSync（key）从本地缓存中同步获取指定key对应的内容。其参数只有key。
示例代码如下：

try{
var value = wx.getstorageSync('age')
 if(value){
console.log("获取成功"+value)
} 
catch(e){
console.log("获取失败")
}

6.4.3 删除数据

1. wx. removeStorage（Object）
wx. removeStorage（Object）接口用于从本地缓存中异步移除指定key。

wx.removeStorage({
 key:'name',
success:function(res){ console.log("删除成功")
},
fail:function(){
console.log("删除失败")
}
 
})

2. wx. removeStorageSync（key）
wx. removeStorageSync（key）接口用于从本地缓存中同步删除指定key对应的内容。其参数只有key。
示例代码如下：

try {
wx.removeStorageSync('name')
} catch(e){
//Do something when catch error
}

6.4.4 清空数据

1. wx. clearStorage（）
wx. clearStorage（）接口用于异步清理本地数据缓存，没有参数。

示例代码如下：

wx.getStorage({
key:'name',
success:function(res){
wx.clearStorage()
},
})

2.wx.clearStroageSync()

wx.clearStroageSync()接口用于同步清理本地数据缓存。

示例代码如下：

try{
wx.clearStorageSync()
}catch(e){
}

6.5 位置信息API

小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和GCj02标准，WGS84标准为地球坐标系，是国际上通用的坐标系；GCj02标准是中国国家测绘局制定的地理信息系统的坐标系统，是由WGS84坐标系经加密后的坐标系，又称为火星坐标系。默认为WGS84标准，若要查看位置需要使用GCj02标准。主要包括以下3个API接口：
■ wx.getLocation（Object）接口用于获取位置信息。
■ wx.chooseLocation（Object）接口用于选择位置信息。
■ wx.openLocation（Object）接口用于通过地图显示位置。

6.5.1 获取位置信息

wx. getLocation（Object）接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息，其相关参数如表所示。

wx. getLocation（Object）调试成功后，返回的参数如表所示。

示例代码如下

wx.getLocation({ 
  type:'wgs84',
success:function(res){
console.log("经度:"+res.longitude); console.log("纬度:"+res.latitude); console.log("速度:"+res.longitude);
console.log("位置的精确度:"+res.accuracy);
console.log("水平精确度:"+res.horizontalAccuracy); console.log("垂直精确度:"+res.verticalAccuracy);},
})

6.5.2 获取位置信息

wx. chooseLocation（Object）接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如表所示。

wx. chooseLocation（Object）调用成功后，返回的参数如表所示。

6.5.3 显示位置信息

wx.openLocation(Object)接口用于在微信内置地图中显示位置信息。

示例代码如下

wx.getLocation({
  type:'gcj02',//返回可以用于wx.openLocation的经纬度
  success:function(res){
  var latitude = res.latitude 
  var longitude= res.longitude
  wx.openLocation({
  latitude: latitude, 
  longitude:longitude, 
  scale:10,
  name:'智慧国际酒店',
  address:'西安市长安区西长安区300号'})
}
})

6.6 设备相关API

设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口API：
■ wx.getSystemInfo（Object）接口、wx.getSystemInfoSync（）接口用于获取系统信息。
■ wx.getNetworkType（Object）接口用于获取网络类型。
■ wx.onNetworkStatusChange（CallBack）接口用于监测网络状态改变。
■ wx.makePhoneCall（Object）接口用于拨打电话。 ■ wx.scanCode（Object）接口用于扫描二维码。

6.6.1 获取系统信息

wx. getSystemInfo（Object）接口、wx. getSystemInfoSync（）接口分别用于异步和同步获取系统信息。其相关参数如表所示。

wx. getSystemInfo（）接口或wx.getSystemInfoSync（）接口调用成功后，返回系统相关信息，如表所示。

示例代码如下

wx.getSystemInfo({
  success:function(res){
  console.log("手机型号:"+res.model)
  console.log("设备像素比:"+res.pixelRatio)
   console.log("窗口的宽度:"+ res.windowWidth) 
  console.log("窗口的高度:"+res.windowHeight) 
  console.log("微信的版本号:"+res.version) 
  console.log("操作系统版本:"+ res.system) 
  console.log("客户端平台:"+res.platform)},})

6.6.2 网络状态

1．获取网络状态
wx. getNetworkType（Object）用于获取网络类型，其相关参数如表所示。

如果wx. getNetworkType（）接口被成功调用，则返回网络类型包，有wifi、2G、3G、4G、unknown（Android下不常见的网络类型）、none（无网络）。
示例代码如下：

wx.getNetworkType({
success:function(res){
console.log(res.networkType)},})
2．监听网络状态变化

wx. onNetworkStatusChange（CallBack）接口用于监听网络状态变化，当网络状态变化时，返回当前网络状态类型及是否有网络连接。
示例代码如下：

wx.onNetworkStatusChange(function(res){
console.log("网络是否连接:"+res.isConnected)
console.log("变化后的网络类型"+res.networkType)})

6.6.3 拨打电话

wx. makePhoneCall（Object）接口用于实现调用手机拨打电话，其相关参数如表所示。

示例代码如下

wx.makePhoneCall({
phoneNumber:'18092585093'//需要拨打的电话号码
})

6.6.4 扫描二维码

wx. scanCode（Object）接口用于调起客户端扫码界面，扫码成功后返回相应的内容，其相关参数如表所示。

扫码成功后，返回的数据如表所示。

示例代码如下

//允许从相机和相册扫码
 wx.scanCode({
  success:(res) =>{
  console.log(res.result) 
  console.log(res.scanType) 
  console.log(res.charSet) 
  console.log(res.path)
  }
  })
  
  //只允许从相机扫码
   wx.scanCode({
  onlyFromCamera:true,
   success:(res) =>{ 
     console.log(res)
   }
  })