第一~六章总结

L.0719

已于 2024-05-11 09:52:27 修改

阅读量1k

点赞数 19

文章标签：开发语言

于 2024-04-25 15:22:03 首次发布

本文链接：https://blog.csdn.net/m0_74726584/article/details/138130646

版权

第一章

认识微信小程序

优势（特征）：1.无需安装 2.触手可及 3.用完即走 4.无需卸载

应用场景的特点：1.简单的业务逻辑 2.低频度的使用场景

在小程序调试运行过程中，可以设置断点、单步运行的调试面板是Sources。

第二章

基本目录结构

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

utils目录用来存放一些公用的.js.文件，当某个页面需要用到utils.js函数时，可以将其引入后直接使用。

小程序开发框架

视图层

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。

逻辑层

逻辑层用于处理事务逻辑。

数据层

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

页面临时数据或缓存

在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

setData()函数的参数接收一个对象，以（key,value）的形式表示将key在this.data中对应的值改变成value。

文件存储（本地存储）

使用数据API接口，如下：

wx.getStorage 获取本地数据缓存

wx.setStorage 设置本地数据缓存

wx.clearStorage 清理本地数据缓存

网络存储与调用

上传或下载文件API接口，如下：

wx.request 发起网络请求

wx.uploadFile 上传文件

wx.downloadFile 下载文件

调用URL的API接口，如下：

wx.navigateTo 新窗口打开页面

wx.redirectTo 原窗口打开页面

全局配置文件

小程序的全局配置保存在全局配置文件（app.json）中，使用全局配置文件来配置页面文件（pages）的路径，设置窗口（window）表现、设定网络请求API的超时时间值（networkTimeout）以及配置多个切换页（tabBar）等。

数据绑定

简单绑定

.wxml

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好：{{objiect.hobby}}</view>

.js

Page({
  //页面的初始数据
  data:{
    name:'lwk',//字符串
    age:30,
    birthday:[{year:1988},{month:11},{date:18}],//数组
    object:{hobby:'computer'},//对象
   }
})

运算

.wxml

<view>算数运算{{age+num}}</view>
<view>逻辑运算{{age==40}}</view>
<view>三元运算:{{age==40 ? 'true' :'falst' }}</view>

.js

Page({
  //页面的初始数据
  data:{
    num:100,//数字
  }
})

条件数据绑定

.wxml

<view wx:if="age>40">1</view>
<view wx:elif="age==40">0</view>
<view wx:else>-1</view>

列表数据绑定

.wxml

<view wx:for="{{students}}">
  <text>姓名：{{item.nickname}}</text>
  <text>体重：{{item.height}}</text>
</view>

.js

Page({
  //页面的初始数据
  data:{
    students:[
      {
        nickname:'Tom',height:180
      },
      {
        nickname:'Anne',height:165
      }
    ]
  }
})

页面配置文件

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

页面中的window配置只需书写配置项，不必书写window。

页面样式文件

第三章

盒子模型

盒子模型就是我们在页面设计中经常用到的一种思维模式。在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 上外边距、右外边距、底外边距和左外边距。

浮动与定位

元素浮动与清除

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

{float:none|left|right}

none——默认值，表示元素不浮动；

left——元素向左浮动；

right——元素向右浮动；

通过案例我们发现，当box3左浮动后，父元素的边框未能包裹box3元素。这时，可以通过清除浮动来解决。

由于浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生影响。在CSS中，clear属性用于清除浮动元素对其他元素的影响，其基本格式如下：

{clear：left|right|both|none}

left——清除左浮动的影响，也就是不允许左侧有浮动元素。

right——清除右浮动的影响，也就是不允许右侧有浮动元素。

both——同时清除左右两侧浮动的影响。

none——不清除浮动。

元素定位

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

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

flex布局

flex布局是万维网联盟(World Wide Web Consortium， W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。flex 是flexible box的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。

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布局，语法格式为：

.box{display:flex|inline-flex;}

flex——块级flex布局，该元素变为弹性盒子；

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

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

2. flex -direction

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

.box{flex-direction:row|row-reverse|column|column-reverse;}

row—主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row；

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

4.flex-flow

flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap。语法格式如下：

.box{flex-flow:<flex-direction>||<flex-wrap>;}

5.justify-content

justify-content用于定义项目在主轴上的对齐方式。语法格式如下：

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

justify-content——与主轴方向有关，默认主轴水平对齐，方向从左到右；

flex-start——左对齐，默认值；

flex-end——右对齐；

center——居中；

space-between——两端对齐，项目之间的间隔都相等；

space-around——每个项目两侧的间隔相等。

6.align-items

align-items用于指定项目在交叉轴上的对齐方式，语法格式如下：

.box{align-items:flex-start|flex-end|center|baseline|stretch;}

align-items——与交叉轴方向有关，默认交叉由上到下；

flex-start——交叉轴起点对齐；

flex-end——交叉轴终点对齐；

center——交叉轴中线对齐；

baseline——项目根据它们第一行文字的基线对齐；

stretch——如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

7.align-content

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

.box{align - content: flex-start |flex – end | center |space – between |space-around |stretch}

space-between——与交叉轴两端对齐，轴线之间的间隔平均分布；

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

其余各属性值的含义与align-items属性的含义相同。

项目属性

1.order

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

.item{order:<number>;}

2.flex-grow

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

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

3.flex-shrink

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

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

假定容器宽度为800 px，4个元素的宽度分别为240px，元素宽度比容器多160px(即240×4-800)。当flex-shrink属性值为1时，由于空间不足，4个项目将被等比例缩小，每个元素变为200 px；当4个元素的缩小比例为1:2:1:4时，它们的宽度分别减少20 px、40 px、20 px、80 px，它们的实际宽度变为220 px、200 px、220 px、160 px。

4. flex -basis

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

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

5.flex

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

.item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}

6.align-self

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

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

在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致。

auto表示继承容器align-items的属性，如果没有父元素，则等于stretch(默认值)。

第四章

组件的定义及属性

组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-*、bind*/catch*等。

id 组件的唯一表示，保持整个页面唯一，不常用。

class 组件的样式类，对应WXSS中定义的样式。

style 组件的内联样式，可以动态设置内联样式。

hidden 组件是否显示，所有组件默认显示。

data-* 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值。

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

容器视图组件

view

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

scroll-view

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

【注意】

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

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

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

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

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

swiper

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

基础内容组件

icon

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

text

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

progress

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

表单组件

button

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

radio

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

checkbox

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

switch

switch的作用类似开关选择器。

slider

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

picker

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

普通选择器

多列选择器

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

时间选择器、日期选择器

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

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

省市选择器

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

picker-view

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

input

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

textarea

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

label

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

目前，label组件可以绑定的控件有<button/>、<checkbox/>、<radio/>、<switch/>。

form

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

多媒体组件

image

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

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

1. 缩放模式

scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。

aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以将图片完整地显示出来。

aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，在另一个方向将会发生截取。

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

2. 裁剪模式

top 不缩放图片，只显示图片的顶部区域。

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

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

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

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

top_left 不缩放图片，只显示图片的左上边区域。top_right 不缩放图片，只显示图片的右上边区域。

bottom_left 不缩放图片，只显示图片的左下边区域。bottom_right 不缩放图片，只显示图片的右下边区域。

audio

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

video

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

camera

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

其他组件

在小程序中，除了前面介绍的组件外，map组件和canvas组件比较常用。

map

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

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

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

canvas

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

第五章

即速应用概述

即速应用的优势

即速应用是深圳市题尺网络科技开发有限公司开发的一数同时兼具微信小程序和支付宝小程序快速开发能力的工具，用户只需简单指接可视化组件，就可以实现在线小程序开发。
即速应用的功能特点主要体现在以下几个方面：

1. 开发流程简单，零门槛制作
(1)登录即速应用的官方网站，即速应用-微信小程序|微信小程序制作|视频号开店|微信小程序开发工具平台【即速应用】是国内领先的企业微信小程序制作开发工具,免代码生成企业微信小程序平台,拥有海量企业微信小程序模板案例,为小程序企业公司,H5网站提供小程序定制推广,私域流量营销一站式服务。https://www.jisuapp.cn/https://www.jisuapp.cn/进入制作界面，从众多行业模板中选择一个合适的模板。
(2)在模板的基础上进行简单编辑和个性化制作
(3)制作完成后，将代码一键打包并下载
(4)将代码上传至微信开发者工具
(5)上传成功后，等待审核通过即可

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

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

目前，即速应用有4个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。

即速应用的应用范围主要包括以下类型：

(1)资讯类：新闻、媒体。

(2)电商类：网购（服装、电器、读书、母婴......)

(3)外卖类：餐饮及零售。

(4)到店类：餐饮及酒吧。

(5)预约类：酒店、KTV、家教、家政、其他服务行业。

即速应用界面介绍

登录即速应用官网，单击“注册”按钮，在所示的页面填写相应信息，即可完成注册后，即可登录账号，使用即速应用。
即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板。
1. 菜单栏
菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”选项用于进入后台管理页面，“帮助”选项用于提示帮助功能，“客服”选项用于进入客服界面，“历史”选项用来恢复前项操作，“预览”选项用在PC端预览制作效果，“保存”选项用于保存已制作的内容，“生成”选项用于实现小程序打包上线设置。
2. 工具栏
工具栏包括“页面管理”“组件库”2个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。 “组件库”有9个基础组件、7 个布局组件、18 个高级组件和2 个其他组件。

3. 编辑区
编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右边的一“前进”“后退”选项可以进行恢复操作，“模板”选项可以用来选择模板，“元素”选填可以用来显示页面中的组件及其层次关系，“数据”选项可以用来进行页面数据管理，“模块”选项可以用来选择模块。
4.属性面板
属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡。“组件”选项卡用来设置组件内容及点击事件；“组件样式”选项卡用来设置组件的样式，不同组件有不同的样式需要设置。

即速应用组件

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

布局组件

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

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

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

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

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

5. 底部导航组件
底部导航组件固定于页面底部，用于编辑底部的导航。通过底部导航组件可以添加标签、删除标签，同时可以分别设置每个标签的名称、原始图片、点击图片及链接至某一页面；通过组件面板可以进行组件背景色，图片及文字的设置。

6.分割线组件
分制线组件被放置于任意组件之间，用于实现分割。

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

基本组件

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

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

2.图片组件

图片组件用于在页面中展示图片。

3. 按钮组件

按钮组件用于在页面中设置按钮。

4. 标题组件
标题组件用于在页面中设置标题。

5.轮播组件
轮播组件用于实现图片的轮播展示。

单击“添加轮播分组”按钮进入管理后台，然后单击“轮播管理”→“新建分组”选项可以创建轮播分组。
分别填写“分组名称”和“分组描述”，单击“确定”按钮进入轮播管理界面。

6.分类组件

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

7.图片列表组件

图片列表组件可以将图片及列表的形式展示，还可以设置图片的名称、标题和点击事件。

8.图文集组件

图文集组件用于展示图片、标题和简介。

9.视频组件
视频组件用于展示视频。

视频组件提供网页应用、小程序和云服务3种视频来源。网页应用使用视频通用代码来确定视频来源。例如，打开优酷网站，找到需要的视频，进入“分享给朋友”页面，通用代码就显示出来。
单击“复制通用代码”按钮，把复制好的通用代码粘贴到文本框中，保存后即可在小程序项目中添加该视频。

高级组件

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

1.动态列表组件

动态列表组件是容纳基础组件来展示后台数据的容器，通过添加基础组件来展示对应的后台数据。

要使用动态列表组件，必须在后台进行数据管理，单击”管理对象“按钮，进入管理后台。单击”新增数据对象“按钮，进入”数据对象列表“页面。

单击”添加字段“按钮，添加相应字段。

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

单击”数据管理“按钮，进入”数据管理”页面。

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

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

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

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

2. 个人中心组件

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

3. 动态表单组件

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

即速应用后台管理

1.数据管理
数据管理包括数据总览访客分析和传播数据功能。

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

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

4.应用数据
应用数据是后台管理的主要内容承担组件的数据都是通过在应用数据中的数据对象来管理的类似通过数据库存放和管理数据。

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

6.分类管理
分类管理适用于电商、到店、应用数据。

7.商品管理
商品管理是后台管理的主要内容前端商品列表组件的数据来源于后台商品管理。

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

9.营销工具
营销工具是小程序营销推广的有力工具主要有会员卡优惠券积分储值技巧秒杀吉吉乐拼团活动大转盘砸金蛋刮刮乐等。

10.多商家管理
多商家管理是即速应用有众多商家的商城开设的管理功能方便管理者统计每家店铺的订单及进行收益分析。

第六章

网络API

微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生API接口或第三方API提供了各类接口实现前后端交互。

网络 API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的
使用等功能处理。微信开发团队提供了10个网络API接口。
wx.request(0bject)接口用于发起 HTTPS 请求。

wx.uploadFile(Object)接口，用于将本地资源上传到后台服务器

wx.downloadFile(Object)接口，用于下载文件资源到本地

wx.connectSocket(0bject)接口，用于创建一个 WebSocket 连接

wx.sendSocketMessage(0bject)接口，用于实现通过 WebSocket 连接发送数据

wx.closeSocket(0bject)接口，用于关闭 WebSocket 连接

wx.onSocketOpen(CallBack)接口，用于监听 WebSocket 连接打开事件

wx.onSocketError(CallBack)接口，用于监听 WebSocket 错误

wx.onSocketMessage(CallBack)接口，用于实现监听WebSocket 接收到服务器的消息事件

wx.onSocketClose(CallBack)接口，用于实现监听WebSocket 关闭

发起网络请求

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

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

上传文件

wx. uploadFile(0bjeet)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求。

通过 wx.uploadFile(0bject)，可以将图片上传到服务器并显示。

下载文件

wx. downloadFie(0bject)接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

例如，通过 wx.downloadFile(0bject)实现从服务器中下载图片，后台服务采用 WAMP软件在本机搭建。

多媒体API

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

图片API

图片 API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口:

wx.chooselmage(0bject)接口，用于从本地相册选择图片或使用相机拍照

wx.previewlmage(0bject)接口，用于预览图片

wx.getlmageInfo(0bject)接口，用于获取图片信息

wx. savelmageToPhotosAlbum(0bject)接口，用于保存图片到系统相册

1.选择图片或拍照

wx.chooselmage(Object)接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wx.saveFile 保存图片到本地。

2.预览图片

wx.previewlmage(Object)接口主要用于预览图片。

3.获取图片信息

wx. getlmagelnfo(Object)接口用于获取图片信息。

4.保存图片到系统相册

savehemeeToPhokasAlbam(0bject)接口用于保存图片到系统相册，需要得到用户授权soegemriePbatas4lbm。

录音API

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

wx.startRecord(0bject)接口，用于实现开始录音

wx.stopRecord(0bject)接口，用于实现主动调用停止录音

1. 开始录音

wx. slartRecord(0bject)接口用于实现开始录音。当主动调用wx.stopRecord(0bject)接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx.saveFile()接口。

2.停止录音

wx.stopRecord(Object)接口用于实现主动调用停止录音示

音频播放控制API

音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及d盘件的控制，主要包括以下3个API:

wx.playVoice(Object)接口，用于实现开始播放语音
wx.pauseVoice(Object)接口，用于实现暂停正在播放的语音
wx.stopVoice(Object)接口，用于结束播放语音

1.播放语音

wx playVoice(Object)接口用于开始播放语音，同时只允许一个语音文件播放，如果薛个语音文件还未播放完，则中断前一个语音文件的播放。其相关参数如表所示

2.暂停播放

wx.pauseVoice(0bjeet)用于暂停正在播放的语音。再次调用wx.playVoice(0bject)播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，则需要先调用wxstopVoice(0bject)

3.结束播放

wx.stopVoice(Object)用于结束播放语音

音乐播放控制API

音乐播放控制API主要用于实现对背景音乐的控制，音乐文件只能是网络流媒体,不能是本地音乐文件。音乐播放控制API主要包括以下8个AP:

wx.playBackgrundAudio(0bject)接口，用于播放音乐
wx.getBackgrundAudioPlayerState(0bject)接口，用于获取音乐播放状态
wx.seekBackgrundAudio(0bject)接口，用于定位音乐播放进度
wx.pauseBackgroundAudio()接口，用于实现暂停播放音乐
wx.stopBackgmundAudio()接口，用于实现停止播放音乐
wx.onBackgrundAudioPlay(CallBack)接口，用于实现监听音乐播放
wx.onBackgrundAudioPause(CallBack)接口，用于实现监听音乐暂停wx.onBackgroundAudioStop(CallBack)接口，用于实现监听音乐停止

1.播放音乐

wxplayBackgroundAudio(0bject)用于播放音乐，同一时间只能有一首音乐处于播放状态。

2. 获取音乐播放状态

wx. getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态。

3. 控制音乐播放进度

wx.seekBackgroundAudio(Object)接口用于控制音乐播放进度。

4.暂停播放音乐

wx,peuseB3ackgrondAui()接目用手贸传播放音乐

5.停止播放音乐

wx. stopBackysedAudio()接目期于外止播放音乐

6.监听音乐播放

wx. onBackgroundAudioPlay(CallBack)接口用于实现监听音乐播放，通常被 wx.playBack.goundAudio(0bject)方法触发，在CallBack 中可改变播放图标。

7.暂停音乐暂停

wx.onBackgroundAudioPause(CalBack)接口用于实现监听音乐暂停，通常被 wx. pauseBackgroundAudio()方法触发。在CalBack中可以改变播放图标。

8.监听音乐暂停

wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止，通常被音乐自然播放停止或wxseekBackgrundAudio(0bject)方法导致播放位置等于音乐总时长时触发。在CaBack中可以改变播放图标

9.案例展示

在此，以小程序 music 为案例来展示音乐API的使用。该小程序的4个页面文件分别为music.wxml、music. wxss、music. json图6-5 音乐播放示例和musie.cojs。

文件API

从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件AP。文件API提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个APL接口:

wx.saveFile(0bject)接口，用于保存文件到本地

wx.getSavedFileLisl(0bject)接口，用于获取本地已保存的文件列表

wx.geiSaveFilelnío(0bject)接口，用于获取本地文件的文件信息

wx.removeSaveFile(0bject)接口，用于删除本地存储的文件

wx.openDocumen(0bjeet)接口，用于新开页面打开文档，支持格式:doc、xls、ppt、 pdf, docx . xlsx 、ppts

1. 保存文件

w. saveFie(0bjecl)用于保存文件到本地。

2.获取本地文件列表

wx. getSavedFilelisl(Obiect)接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间截(从1970/01/0108:00:00到当前时间的秒数)文件列表。

3. 获取本地文件的文件信息

wx.getSaveFileInfo(0bject)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx.getFilelnfo(0bject)接口。

4.删除本地文件

wx.removeSaveFile(Object)接口用于删除本地存储文件。

5.打开文档

wx.openDocument(Object)接口用于新开页面打开文档，支持格式有doc,xls,ppt,pdf,docx,xlsx,pptx

本地数据及缓存API

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

wx.setStorage(Object)或者wx.setStorageSync(key,data)接口，用于设置缓存数据

wx.getStorage(Object)或者wx.getStorageSync(key)接口，用于获取缓存数据

wx.removeStorage(Object)或者wx.removeStorageSync(key)接口，用于删除指定缓存数据

wx.clearStorage()或者wx.clearStorageSync()接口，用于清除缓存数据

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

保存数据

1. wx.setStorage(Object)

wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来key

对应的内容。

2. wx.setStorageSync(key,data)

wx.setStorageSync(key,data)是同步接口，其参数只有key和data。

获取数据

1. wx.getStorage(Object)

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

2. wx.getStorageSync(key)

wx.getStorageSync(key)从本地缓存中同步获取指定的key对应的内容。其参数只有key。

删除数据

1. wx.removeStorage(Object)

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

2. wx.removeStorageSync(key)

wx.removeStorageSync(key)接口用于从本地缓存中同步删除指定key对应的内容。其参数只有key。

清空数据

1. wx.clearStorage()

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

2. wx.clearStorage()

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

位置信息API

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

wx. getLocation(Object)接口，用于获取位置信息

wx. chooseLocation(Object)接口，用于选择位置信息

wx. openLocation(Object)接口，用于通过地图显示位置

获取位置信息

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

wx.getLocation(Object)调试成功后，返回的参数

选择位置信息

wx. chooseLocation(Object)接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。

wx. chooseLocation(Object)调试成功后，返回的参数

显示位置信息

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

设备相关API

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

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