微信小程序复习总结

最新推荐文章于 2024-05-18 14:53:16 发布

聿奚攵殳

最新推荐文章于 2024-05-18 14:53:16 发布

阅读量777

点赞数 11

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/2302_81909561/article/details/138088415

版权

第一章总结

认识微信小程序

简介

微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。

微信开发者工具界面功能介绍

工具栏：

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

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

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

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

组合键功能组合键   功能
Ctrl+S 保存文件 Ctrl+Home   移动到文件开头
Ctrl+[, Ctrl+] 代码行缩进 Ctrl+End   移动到文件结尾
Ctrl+shift+[ , Ctrl+shift+] 折叠打开代码块   Shift+Home   选择从行首到光标处
Ctrl+Shift+Enter 在当前行上方插入一行   Shift+End   选择从光标处到结尾
Ctrl+Shift+F 全局搜索    Ctrl+I   选中当前行
Shift+Alt+F 代码格式化 Ctrl+D   选中匹配
Alt+Up,Alt+Down 上下移动一行 Ctrl+Shift+L   选择所有匹配
Shift+Alt+Up(Down)   向上（下）复制一行 Ctrl+U   光标回退

调试区：

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

1）Console面板：

Console面板是控制台，是调试小程序的控制面板，当代码执行错误时，错误信息将显示在控制Console面板中，便于开发者排查错误。另外，在小程序中，开发者可以通过console.log语句将信息输出到Console面板中。此时，开发者可以在Console面板直接输入代码并调试。

2）Sources面板：

Sources 面板是源文件调试信息页，用于显示当前项目的脚本文件，调试区左侧显示的是源文件的目录结构，中间显示的是选中文件的源代码，右侧显示的是调试相关按钮。

3）Network面板：

Network面板是网络调试信息页，用于观察和显示网络请求request和socket等网络相关的详细信息。

4）Securit面板：

Security面板是安全人证信息页，开发者可以通过该面板调试当前的网页的安全和认证等问题。如果安全设置安全论证，则会显示“The security of this page is unknown.”

5）Storage面板：

Storage 面板是数据存储信息页，开发者可以使用 wx.setStorage 或者 wx.setStorageSync将数据存储到本地存储，存储在本地存储中的变量及值可以在 Storage 面板中显示。

6）AppDate面板：

AppData面板是实时数据信息页，用于显示被激活的所有页面的数据情况。开发者在这里不仅可以查看数据的使用情况，还可以更改数据。编辑器会实时地将数据的变更情况反映到前端界面。

7) Wxml面板:

Wxml 面板是布局信息页，主要用于调试 Wxml 组件和相关CSS 样式，显示 Wxml 转化后的界面。Wxml面板调试区的左侧部分是Wxml代码，右侧部分是该选择器的CSS样式。

8）Sensor面板：

Sensor 面板是重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟移动设备表现，用于调试重力感应 API。

9）Trace面板：

Trace面板是路由跟踪信息页，开发者在这里可以追踪连接到电脑中的安卓设备的路由信息。

第二章总结

微信小程序开发基础

小程序的基本目录结构

项目主目录（pages ，utils）

pages：Pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同扩展名(.wxml、.wxss、.js和.json)的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，同一个页面的4个文件必须具有相同的路径与文件名。

utils：utils 目录用来存放一些公共的.js文件，当某个页面需要用到utls.js函数时，可以将其引人后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。

主体文件

微信小程序的主体部分由3 个文件组成，这3 个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。

app.js 小程序逻辑文件，主要用来注册小序全局实例。在编译时，app. 文件会程序的整体配置，它们的名称是固定的。和其他页面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。

app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少

app.wxss 小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4 个文件必具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定

.js文件页面逻辑文件，在该文件中编写 JavaScript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。

.wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖 app.wxss 中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少

.json 文件页面配置文件。该文件在页面中不可缺少

微信小程序的开发框架

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

小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标
签语言 WXML(WeiXin Markup Language)和用于描述 WXML,组件样式的 WXss(weixinsnle sheets)组成，它们的关系就像 HTML和CSS的关系。逻辑层(App Serice)是 MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。MINA框架中的逻辑层使用JavaScript来编写交互逻辑网络请求、数据处理，但不能使用JavaSeript中的DOM操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。
MINA 框架为页面组件提供了bindtap、bindtouchstart 等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能(如page切换、tab切换、多媒体、网络连接等)上使用接近于系统层(Native)的组件承载。所以小程序MINA框架有着接近原生 App的运行速度，对 Android 端和 i0S 端能呈现得高度一致,并为开发者准备了完备的开发和调试工具。

视图层

MINA框架的视图层由WXML与WXSS 编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构:wxss 文件用于描述页面的样式。

微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。组件是视图的基本组成单元。

逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaSeript 的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括:
(1)增加app()和Page()方法，进行程序和页面的注册
(2)提供丰富的 API，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。逻辑层就是通过各个页面的.is脚本文件来实现的。由于小程序并非运行在浏览器中所以 JavaScript 在 Web中的一些功能在小程序中无法使用，如 document、window 等。开发者开发编写的所有代码最终会被打包成独立的JavaScript文件，并在小程序启动的时候运行，直到小程序被销毁。

数据层

数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。

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 原窗口打开页面

创建小程序页面

创建第一个页面文件

继续在项目主日录下新建一个pages目录，在pages 目录下新建一个 index 目录，并在 index 目录下新建 index.js、index.json、index.wxml和 index. wxss 空文件。

配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(appjson)和页面配置文件(.j)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

全局配置文件

小程序的全局配置保存在全局配置文件(app,jon)中，使用全局配置文件来配置页面支件(pp)的路径，设置窗日(window)表现、设定网络请求A的超时时间值(mdmmktimeom)以及配置多个切换页(mhBa)等。表2-2列出了各全局配置项的相关描述。

pages配置项

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

window配置项

tabBar配置项

networkTimeout配置项

debug 配置项

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

页面配置文件

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

逻辑层文件

项目逻辑文件

项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法, 已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

App()函数用于注册一个小程序，参数为Object，用于指定小程序的生命周期函数，用户自定义属性和方法，其参数如下表所示：

页面逻辑文件

页面逻辑文件的主要功能有: 设置初始数据; 定义当前页面的生命周期函数; 定义事件处理函数等。每个页面文件都有一个相应的逻辑文件, 逻辑文件是运行在纯javaScrict引擎中。因此, 在逻辑文件中不能使用浏览器提供的特有对象(document、window) 及通过操作DOM改变页面, 只能采用数据绑定和事件响应来实现。

在逻辑层，Page（）方法用来注册一个页面，并且每个页面有且仅有一个，其参数如下表：

（1）设置初始数据

设置初始数据是对页面的第一次数据绑定。对象data将会以JS0N(Javascript 0bject Notaton，Js对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。

视图层可以通过WXML对数据进行绑定。

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

在Page() 函数的参数中, 可以定义当前页面的生命周期函数。在Page() 函数的参数中, 可以定义当前页面的生命周期函数。页面的生命周期函数主要有onload、onShow、onReady、onHide、onUnload。

onload 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次, 代表页面已经准备就绪, 可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo 或小程序底部进行tab 切换时,调用该函数。
onUnload页面卸载函数。当页面卸载、进行navigateBack 或redirectTo 操作时, 调用该函数。

（3)定义事件处理函数

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

(4)使用setData 更新数据

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

页面结构文件

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

WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

数据绑定

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

简单绑定

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

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

<view>{{name}}</view>
<imagesrc="{{img}}"></image>
<view wx:if="{{sex}}">男</view>
Page({
data:{
name:'/wk',
img:'/images/vgf.png',
sex:true
},
})

运算

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

条件数据绑定

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

（1）wx.if条件数据绑定

wx:if条件数据绑定是指使用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>

列表数据绑定

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

wx:for

在组件上，可以使用 wx:for 控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件，格式如下:

<view wx:for="{{items}}">
     {{index}}:{{item}}
</view>

block wx:for

与 block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定。

模版

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

定义模板

模板代码由 wxml组成，因此其定义也是在 wxml 文件中，定义模板的格式为:

<template name="模版名"></template>

调用模板

将模板定义后，就可以对其进行调用了。

引用页面文件

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

import方式

如果在要引用的文件中定义了模板代码，则需要用import方式引用。

例如，在list.wxml 文件中定义一个item 模板。代码如下:

<templaté name ="item">
<text>{{item,name}}</text>
<text>{{item.age}}</text>
</template>

include方式

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

页面事件

小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。

要实现这种机制，需要定义事件函数和调用事件。

定义事件函数：在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件:调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind 或 catch 开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind 开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。
在小程序中、事件分为冒泡事件和非冒泡事件两大类型。

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

页面样式文件

页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决
定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。

尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx(respnesive pixel)。WXSS规定屏幕宽度为750px，在系统数据绑定过程中rpx会按比例转化为px。例如，iPhone6的屏幕宽度为375px，即750rpx需按比例转化为375px,所以，在iPhone6中，1rpx=0.5px.

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

//list.WXSS
.cont{border:1px solid #F00;}
//index. wxss
@ import"list.WXSS;"
.cont{padding:5rpx;margin:5px;}

选择器

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

WXSS常用属性

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

第三章总结

第3章，页面布局

3.1 盒子模型

微信小程序的视图层由WXML和WXSS组成。其中，WXSS(WeiXinStyle Sheets)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有)CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。

在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。

盒子模型就是我们在页面设计中经常用到的种思维模型。在CSS中，一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成。

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

第3章页面布局

块级元素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: 1px solid #00f;width: 200px;height: 80px;">块级元素3</view>
<view style="border: 1px solid #ccc;"><view style="height: 60px;">块级元素4</view></view>
<view style="border: 1px solid #f00;width: 100px;background-color: aliceblue;">kkk</view>

3.2.2 行内元素

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中.它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的display属性设置为imnline后，该元素即被设置为行内元素。行内元素的特点如下:
(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定。

(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素。
(3)同一块内，行内元素和其他行内元素显示在同一行。

<view style="padding: 20px;">
<text style="border: 1px solid #f00;">块级元素1</text>
<text style="border: 1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</text>
<view style="border: 1px solid #00f;display:inline">块级元素3</view>kkk
</view>

行内块元素

当元素的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下：

<view>
元素显示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">kuasdfghjklsdhfjkhk</view>sdgfhfjfjfjf
</view>

元素浮动与清除

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

其属性值解析如下：

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

<view>box1,box2,box3 没浮动</view>
<view style="border: 1px solid #f00;padding:5px">
  <view style="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 左浮动</view>
<view style="border: 1px solid #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 属性用于清除浮动元素对其他元素的影响，其基本格式如下:

其属性值解析如下：

left--清除左边浮动的影响，也就是不允许左侧有浮动元素；
right--清除右边浮动的影响，也就是不允许右侧有浮动元素;
both--同时清除左右两侧浮动的影响;
none--不清除浮动。
示例代码如下：

<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="clear:left;border: 1px solid #0f0;">box3</view>
</view>
<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding:5px" class="clearfloat">
  <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>

元素定位

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

{position:static|relative|absolute|fixed}
具体属性值如下:

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

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

flex布局

flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器(flex container)，flex布局的所有直接子元素自动成为容器的成员，称为flex项目(flex item)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。flex布局模型如图所示：

设置 display属性可以将一个元素指定为flex布局，设置 flex-direction 属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向。

容器属性

flex容器支持的属性有7种，如下表所示：

（1）.display

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

{display:flex|inline-flex;}
其属性值解析如下：

flex--块级flex布局，该元素变为弹性盒子;
inline-flex---行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex 布局规范。
注意：设置了 flex 布局之后，子元素的float、clear和 vertical-align 属性将失效。

(2).flex-direction

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

{flex-direction:row|row-reverse|column|column-reverse;}
其属性值解析如下：

row--主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row;
row-reverse--主轴为水平方向，起点在右端;
column--主轴为垂直方向，起点在顶端;
column-reverse--主轴为垂直方向，起点在底端。
如下图所示为元素在不同主轴方向下的显示效果。

(3).flex-wrap

flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下:

{flex-wrap:nowrap|wrap|wrap-reverse;}
其属性值解析如下：

nowrap--不换行，默认值；
wrap--换行，第一行在上分；
wrap-reverse--换行，第一行在下方。
注意：当设置换行时，还需要设置 align-item属性来配合自动换行，但align-item的值不能为“ stretch”。

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

(4).flex-flow
flex-flow是flex-direction 和flex-wrap 的简写形式, 默认值为row nowrap。语法格式如下:

{flex-flow:<flex-direction>||<flex-wrap>;}
(5).justify-content
justify-content 用于定义项目在主轴上的对齐方式。语法格式如下:

{justify-content:flex-start|flex-end|center|space-between|space-around;}
其属性值解析如下：

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

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

(6).align-items
align-items用于指定项目在交叉轴上的对齐方式, 语法格式如下:

{align-items:flex-start|flex-end|center|baseline|stretch;}
其属性值解析如下：

align-items———与交叉轴方向有关, 默认交叉由上到下;
flex-start———交叉轴起点对齐;
flex-end———交叉轴终点对齐;
center———交叉轴中线对齐;
baseline———项目根据它们第一行文字的基线对齐;
stretch———如果项目未设置高度或设置为auto, 项目将在交叉轴方向拉伸填充容器, 此为默认值。
(7).align-content
align-content 用来定义项目有多根轴线(出现换行后) 在交叉轴上的对齐方式, 如果只有一根轴线, 该属性不起作用。语法格式如下:

{align-content;flex-start|flex-end|center|space-between|space-around|stretch}
其属性值解析如下：

apace-between——与交叉轴两端对齐, 轴线之间的间隔平均分布;
space-around——每根轴线两侧的间隔都相等, 轴线之间的间隔比轴线与边框间隔大一倍。其余各属性值的含义与align-items属性的含义相同。
其余个属性值的含义与align-items属性的含义相同。

如下图所示为align-content不同值的显示效果。

<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: #cccccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: flex-end;
}
.item4{
height: 120px;
}

项目属性

容器内的项目支持6个属性，其名称和功能如下图所示。

1）.order

order属性定义项目的排列顺序, 数值越小, 排列越靠前, 默认值为０。语法格式如下:

<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: 2;">2</view>
<view class="item" style="order: 3;">3</view>
<view class="item">4</view>
</view>

2）.flex-grow

flex-grow 定义项目的放大比例, 默认值为０, 即不放大。语法格式如下:

.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）.flex-shrink

flex-shrink用来定义项目的缩小比例, 默认值为１, 如果空间不足, 该项目将被缩小。语法格式如下:

<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-shrink: 2;">2</view>
<view class="item" style="flex-shrink: 1;">3</view>
<view class="item" style="flex-shrink: 4;">4</view>
</view>

（4）.flex-basis

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

<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-basis 的简写, 其默认值分别为０、１、auto。语法格式如下:

{<flex-grow>|<flex-shrink>|<flex-basis>;}

（6） align-self
align-self属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下:

{aligin-self:auto|flex-start|flex-end|center|baseline|stretch;}
注意：在该属性值中, 除了auto以外, 其余属性值和容器align-items的属性值完全一致。 auto表示继承容器align-items的属性, 如果没有父元素, 则等于stretch (默认值)。

第四章总结

组件的定义及属性

组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。
每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：

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

id组件的唯一表示，保持整个页面唯一，不常用。
class组件的样式类，对应WXSS中定义的样式。
style组件的内联样式，可以动态设置内联样式。
hidden组件是否显示，所有组件默认显示。
data-∗ 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget. dataset方式来获取自定义属性的值。
bind∗/catch∗ 组件的事件，绑定逻辑层相关事件处理函数。
容器视图组件
容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper组件。

（1）view

view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面（User Interface, UI）组件，通过设置view的CSS属性可以实现各种复杂的布局。view组件的特有属性如下表。

<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: 1px solid #f00;">1</view>
  <view style="display: flex;">
    <view style="border: 1px solid #f00;flex-grow: 1;">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: 1px solid #f00;flex-grow: 2;">3</view>
  </view>
  </view>

（2）scroll-view

通过设置scroll-view组件的相关属性可以实现滚动视图的功能，其属性如下表所示。

【注意】

在使用竖向滚动时，如果需要给scroll -view组件设置一个固定高度，可以通过WXSS设置height来完成。
请勿在scroll-view组件中使用textarea、map、canvas、video组件。
scroll-into-view属性的优先级高于scroll-top。
由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。
如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。
通过scroll-view组件可以实现下拉刷新和上拉加载更多，代码如下：

//index.wxml
<view class="container" style="padding: 0rpx;">
<!--垂直滚动，这里必须设置高度-->
<view class="container" style="padding: 0rpx;">
  <scroll-view scroll-top="{{scrollTop}}"scroll-y="true" style="height: {{scrollHeight}}px;"class="list"bind-scrolltolower="bindDownLoad"
  bindscrolltoupper="topLoad"bindscroll="scroll">
    <view class="item"wx:for="{{list}}">
    <image class="img"src="{{item.pic_url}}"></image>
    <view class="text">
      <text class="title">{{item.name}}</text>
      <text class="description">{{item.short_description}}</text>
    </view>
    </view>
  </scroll-view>
  <view class="body-view">
    <loading hidden="{{hidden}}"bindchange="loadingChange">
    加载中...
    </loading>
  </view>
</view>
 
//index.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){
  that.setDate({
    hidden:false
  });
  wx.request({
    url: 'url',
    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){
      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(){
//这里要注意，微信的scroll-view必须设置高度才能监听滚动事件，所以需要在页面的onLoad事件中为scroll-view的高度赋值
    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){
//该方法绑定了页面滚动时的事件，这里记录了当前的position.y的值，为了在请求数据后把页面定位到这里
    this.setData({
      scrollTop:event.detail.scrollTop
    });
  },
  topLoad:function(event){
//该方法绑定了页面滑动到顶部的事件，然后做页面上拉刷新
    page=0;
    this.setData({
      list:[],
      scrollTop:0
    });
    loadMore(this);
    console.log("lower");
  }
})
//index.wxss
.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname{
  colro:#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;
}

（3）swiper

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

<swiper-item/ >组件为滑块项组件，仅可以被放置在<swiper/ >组件中，宽高尺寸默认按100%显示。
设置swiper组件，可以实现轮播图效果，代码如下：

<swiper indicator-dots='true' autoplay='true' interval='5000' duration='1000'>
<swiper-item>
<image src="/pages/image/vgh3.png" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="/pages/image/vgh4.png" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="/pages/image/vgh5.png" style="width: 100%;"></image>
</swiper-item>
</swiper>

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

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

//index.wxml
<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>
 
//index.js
Page({
  data:{
    iconType:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"],
    iconSize:[10,20,30,40],
    iconColor:['#f00','#0f0','#00f']
  }
})

（2）text

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

//index.wxml
<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="{{19+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>
 
//inedx.js
Page({
  data:{
    x:[1,2,3,4,5],
    y:[1,2,3,4,5,6,7,8,9]
  }
})

（3）progress

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

//index.wxml
<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>

表单组件

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

（1）button

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

//index.wxml
<button type="default">default</button>
<button type="primary">primary</button>
<button type="warn">warn</button>
<button type="default" bindtap='buttonSize' size="{{size}}">改变size</button>
<button type="default" bindtap='buttonPlain' plain="{{plain}}">改变plain</button>
<button type="default" bindtap='buttonLoading' loading="{{loading}}">改变loading</button>
 
//index.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:function(){
    this.setData({palin:!this.data.plain})
  },
//是否显示loading图案
  buttonLoading:function(){
    this.setData({loading:!this.data.loading})
  }
})

（2）radio

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

//index.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>
 
//index.js
Page({
  data:{
    radios:[
      {name:'java',value:'JAVA'},
      {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.deatail.value)
  }
})

（3）checkbox

复选框用于从一组选项中选取多个选项，小程序中复选框由 <checkbox -group/ >（多项选择器）和<checkbox/ >（多选项目）两个组件组合而成。一个<checkbox-group/ >表示一组选项，可以在一组选项中选中多个选项。它们的属性如下表所示。

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

（4）switch

switch组件的作用类似开关选择器，其属性如下表所示。

//index.wxml
<view>
  <switch bindchange="swl">{{var1}}</switch>
</view>
<view>
  <switch checked bindchange="sw2">{{var2}}</switch>
</view>
<view>
  <switch type="checkbox" bindchange="sw3">{{var3}}</switch>
</view>
 
//index.js
Page({
  data:{
    var1:'关',
    var2:'开',
    var3:'未选'
  },
  sw1: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?'已选':'未选'})
  }
})

（5）slider

slider组件为滑动选择器，可以通过滑动来设置相应的值，其属性如下表所示。

//index.wxml
<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 min='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>
 
//index.js
Page({
  data:{
    size:'20'
  },
  slidechange:function(e){
    this.setData({size:e.detail.value})
  }
})

（6）picker

picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是：selector（普通选择器）、multiSelector（多列选择器）、time（时间选择器）、date（日期选择器）、region（省市选择器）。
普通选择器
普通选择器（mode=selector）的属性如下表所示。

//index.wxml
<view>---range为数组---</view>
<picker range="{{array}}" value="{{index1}}" bindchange='arrayChange'>
  当前选择：{{array[index1]}}
</picker>
 
<view>----range为数组对象---</view>
<picker bindchange="objArrayChange" value="{{index2}}" range-key="name" range="{{objArray}}">当前选择：{{objArray[index2].name}}</picker>
 
//index.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({
      index1:e.detail.value
    })
  },
  objArrayChange:function(e){
    console.log('picker值变为',e.detail.value)
    this.setData({
      index2:e.detail.value
    })
  }
})

多列选择器

多列选择器（mode=multiSelector）允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。多列选择器的属性如下表所示。

//index.wxml
<view>多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerChange" value="{{multiIndex}}"
range="{{multiArray}}">
  <view>
    当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
  </view>
</picker>
 
//index.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.multiArryay,
      multiIndex:this.data.multiIndex
    };
    data.multiIndex[e.detail.column]=e.detail.value;
    switch(e.detail.column){
      case 0:
        switch(data.multiIndex[0]){
        case 0:
          data.multiArray[1]=['西安市','汉中市','延安市'];
          data.multiArray[2]=['雁塔区','长安区'];
          break;
        case 1:
          data.multiArray[1]=['深圳市','珠海市'];
          data.multiArray[2]=['南山区','罗湖区'];
          break;
      }
      data.multiIndex[1]=0;
      data.multiIndex[2]=0;
      break;
      case 1:
      switch(data.multiIndex[0]){
        case 0:
        switch(data.multiIndex[1]){
          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]=['南山区','罗湖区'];
          break;
          case 1:
          data.multiArray[2]=['香洲区','斗门区'];
          break;
      }
      break;
    }
    data.multiIndex[2]=0;
    console.log(data.multiIndex);
    break;
  }
  this.setData(data);
},
})

时间选择器、日期选择器

时间选择器（mode=time）可以用于从提供的时间选项中选择相应的时间，其属性如下表所示。

日期选择器（mode=date）可以用于从提供的日期选项中选择相应的日期，其属性如下表所示。

//index.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>
 
//index.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)
  }
})

省市选择器

省市选择器（mode=region）是小程序的新版本提供的选择快速地区的组件，其属性如下表所示。

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

（7）picker-view

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

//index.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>
 
//index.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]]
    })
  }
})

（8）input

input组件为输入框,用户可以输入相应的信息，其属性如下表所示。

//index.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="占位符字体是红色的"/>
 
//index.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'),
  }
})

（9）textarea

textarea组件为多行输入框文件，可以实现多行内容的输入。textarea组件的属性如下表所示。

//index.wxml
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高"/>
<textarea placeholder="placeholder颜色是红色的" placeholder-style="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>
 
//index.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)
  }
})

（10）label

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

//index.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>
 
//index.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})
  }
})

（11）form

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

//index.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="女" checked/>女
    </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 formType='reset'>重置</button>
</form>
 
//index.js
Page({
  hobby:"",
  data:{
    hobbies:[
      {name:'jsj',value:'计算机',checked:'true'},
      {name:'music',value:'听音乐'},
      {name:'game',value:'玩电竞'},
      {name:'sulm',value:'游泳',checked:'true'}
    ]
  },
  formSubmit:function(e){
    console.log('form发生了submit事件,携带数据为:'.e.detail.value)
  },
  formReset:function(){
    console.log('form发生了reset事件')
  }
})

多媒体组件

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

image组件为图像组件，与HTML中的 <img/ >类似，系统默认image组件的宽度为300 px、高度为2250 px, image组件的属性如下表所示。

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

裁剪模式

top 不缩放图片，只显示图片的顶部区域。
bottom 不缩放图片，只显示图片的底部区域。
center 不缩放图片，只显示图片的中间区域。
left 不缩放图片，只显示图片的左边区域。
right 不缩放图片，只显示图片的右边区域。
top_left 不缩放图片，只显示图片的左上边区域。
top_right 不缩放图片，只显示图片的右上边区域。
bottom_left 不缩放图片，只显示图片的左下边区域。
bottom_right 不缩放图片，只显示图片的右下边区域。

 
<block wx:for="{{modes}}">
  <view>当前图片的模式是：{{item}}</view>
  <image mode="{{item}}" src="/pages/image/vgh5.png" style="width: 100%;height: 100%;"/>
</block>
 
 
 
Page({
  data:{
    modes:['top','center','bottom','left','right','top_left','top_right','bottom_left','bottom_right']
  }
})

（2）audio

audio组件用来实现音乐播放、暂停等，其属性如下表所示。

//index.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>
 
//index.js
Page({
  data:{
    poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg? max_age=2592000',
    name:'此时此刻',
    autor:'许巍',
    src:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?  guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&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
 
      }
    })
  }
})

（3）video

video组件用来实现视频的播放、暂停等。视频的默认宽度为300飘向，高度为225px，video组件的属性如下表所示。

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

第五章总结

即速应用概述

即速应用的优势

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

即速应用的功能特点主要体现在以下几个方面：

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

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

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

2．行业模板多样，种类齐全

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

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

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

资讯类：新闻、媒体。
电商类：网购（服装、电器、读书、母婴……）。
外卖类：餐饮及零售。
到店类：餐饮及酒吧。
预约类：酒店、KTV、家教、家政，其他服务行业。

即速应用界面介绍

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

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

1.菜单栏

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

2.工具栏

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

3.编辑栏

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

4.属性面板

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

即速应用组件

即速应用提供了大量的组件供用户快速布局页面，9个基础组件和11个应用组件。

布局组件

布局组件用于设计页面布局，主要包括双栏、分割线、弹窗、面板、自由面板、滑动面板、动态分类、分类导航、侧边栏、悬浮窗和动态分类，如下图所示。

1.双栏组件

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

2.分割线组件

分割线组件被放置于任意组件之间，用于实现分割。分割线组件的属性面板。

3.弹窗组件

4.面板组件

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

5.自由面板组件

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

6.滑动面板

7.动态分类

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

8.分类导航组件

9.侧边栏

10.悬浮窗

11.分类横滑

基本组件

基本组件是小程序页面常用的组件，包括文本、图片、按钮、标题、轮播、公告、商品列表、添加组合和视频

1.文本组件

文本组件是用来编辑文字信息，可以设置字体的大小，字体的样式和位置等。

2.图片组件

图片组件主要是用来插入图片，或者进行图片模板，设置图片的样式等。

3.按钮组件

按钮组件是用来拉一个按钮框，可以编辑按钮的文字，也可以设置按钮的类型和样式等。

4.标题组件

标题组件是用来编辑标题的组件，可以编辑标题的文字，样式等。

5.商品列表组件

6.视频组件

视频组件是用来插入视频或者更改其样式，可以选择视频组件的样式等。

7.轮播组件

轮播组件用于实现图片的轮播展示，可以更改组件样式添加轮播图，以及数据的绑定等。

8.公告

9.添加组合

第六章总结

网络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关闭。

发起网络请求

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

上传文件

wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求，其属性值如下表所示。

下载文件

wx. downloadFile（Object）接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTPGET请求，返回文件的本地临时路径。其相关属性如下表所示。

多媒体API

多媒体API主要包括图片API、录音API、音频播放控制API、音乐播放控制API等，其目的是丰富小程序的页面功能。

图片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。

2.预览图片

wx. previewImage（Object）接口主要用于预览图片，其相关属性如下表所示。

3.获取图片信息

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

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

设备相关API

设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口API：

wx.getSystemInfo（Object）接口、wx.getSystemInfoSync（）接口用于获取系统信息。
wx.getNetworkType（Object）接口用于获取网络类型。
wx.onNetworkStatusChange（CallBack）接口用于监测网络状态改变。
wx.makePhoneCall（Object）接口用于拨打电话。
wx.scanCode（Object）接口用于扫描二维码

获取系统信息

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

聿奚攵殳

关注

11
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
微信小程序复习总结

微信小程序简介微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。工具栏：在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。模拟区：在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
复制链接

扫一扫