第一到六章复习总结

第一章

认识小程序

小程序简介：

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

小程序特征：

无需安装、触手可及、用完即走、无需卸载

小程序应用场景特点：

简单的业务逻辑、低频度的使用场景

微信小程序开发流程

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

第二步：下载开发者工具进行编码；

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

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

微信小程序开发者工具界面分为五大区域：工具栏、模拟区、目录文件区、编辑区、调试区。

工具栏：实现多种功能

模拟区：显示小程序的运行结果

目录文件区：显示当前项目的目录结构

编辑区：用来实现对代码的编辑操作

调试区：帮助开发者进行代码调试及排查有问题的区域

第二章

小程序的基本目录结构

pages 目录用来存放页面文件

utils 目录用来存放工具包

app.js 逻辑文件

app.json 配置文件

app.wxss 主样式文件

.js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。

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

.wxml文件 页面结构文件，用于设计页面的布局、数据绑定等。

.wxss文件 页面样式表文件，用于定义本页面中用到的各类样式表。

小程序的开发框架

视图层：由wxml与wxss编写，由组件来进行展示。

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

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

配置文件

全局配置文件（app.json）

页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。

逻辑层文件

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

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义处理函数等。

页面结构文件（wxml）是框架设计的一套类似html的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。

页面样式文件

页面样式文件（wxss）是基于CSS扩展的样式语言，用于描述wxml的组成样式，决定wxml的组件如何显示。

示例代码

.js

Page({
  data:{
    name:'爱丽丝',
    birthday:[{month:12},{date:24}],
    object:{hobby:'骑士'},
    bh1:100,
    bh2:1776,
    students:[
      {names:'klitor',height:173,weight:130},
      {names:'asina',height:169,weight:100}
    ]
  }
})

.wxml

<view>姓名：{{name}}</view>
<view>
生日：
{{birthday[0].month}}月
{{birthday[1].date}}日
</view>
<view>爱好：{{object.hobby}}</view>
<view>编号：{{bh1+bh2}}</view>
<view>编号比较：{{bh1<=bh2}}</view>
<view>编号判断：{{bh1>=bh2?bh1:bh2}}</view>
<view wx:if="{{bh1<1}}">初级</view>
<view wx:elif="{{bh1==1000}}">中级</view>
<view wx:else>高级</view>
<template name="stu">
  <view wx:for="{{students}}">
<text>昵称：{{item.names}}--</text>
<text>身高：{{item.height}}--</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>

第三章

盒子模型

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

块级元素与行内元素

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

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

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

浮动与定位

元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。

基本格式：float:none | left | right;

clear属性用于清除浮动元素对其他元素的影响

基本格式：clear:left | right | both | none

元素定位

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

基本格式：position:static | relative | absolute | fixed

flex布局

flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器，flex布局的所有直接子元素自动成为容器的成员，称为flex项目。

flex容器支持的属性有7种

容器内的项目支持6个属性

示例代码

.wxml

块级元素：
<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: #ccc;">父级元素高度随内容决定，内容为文本</view>
行内元素：
<view style="padding: 20px;">
  <text style="border: 1px solid #f00;">文本1</text>
  <text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本2</text>
  <view style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</view>
  一行显示不全，自动换行显示
</view>
行内块元素：
<view>
元素显示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素、行内元素和行内块元素</view>三种类型
</view>

第四章

组件的定义及属性

组件是页面视图层（wxml）的基本组成单元，组件组合可以构建功能强大的页面结构。

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

<标签名 属性名="属性值">内容···</标签名>

容器视图组件

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

view

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

scroll-view

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

swiper

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

基础内容组件

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

icon

icon组件即图标组件，通常用于表示一种状态。

text

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

progress

progress组件用于显示进度状态，如资源加载、媒体资源播放进度等。

表单组件

表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。

button

button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。

radio

单选框用来从一组选项中选取一个选项。

checkbox

复选框用于从一组选项中选取多个选项。

switch

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

slider

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

picker

picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。

1、普通选择器

普通选择器（mode=selector）的属性如表。

2、多列选择器

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

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

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

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

4、省市选择器

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

picker-view

picker-view组件为嵌入页面的滚动选择器。

input

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

textarea

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

label

label组件为标签组件，用于提升表单组件的可用性。

form

form组件为表单组件，用来实现将组件内的用户输入信息进行提交。

多媒体组件

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

image

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

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

audio

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

video

video组件用来实现视频的播放、暂停等。

camera

camera组件为系统相机组件，可以实现拍照或录像功能。

其他组件

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

map

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

canvas

canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。

示例代码

.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({plain:!this.data.plain})
  },
  buttonLoading:function(){
    this.setData({loading:!this.data.loading})
  }
})

.wxml

<button type="default">type:defaulf</button>
<button type="primary">type:primary</button>
<button type="warn">type: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>

第五章

即速应用概述

【即速应用】是国内领先的企业微信小程序制作开发工具,免代码生成企业微信小程序平台,拥有海量企业微信小程序模板案例,为小程序企业公司,H5网站提供小程序定制推广,私域流量营销一站式服务。

功能特点：

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

行业模版多样，种类齐全

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

即速应用组件

即速应用提供了大量的组件供用户快速布局页面

文本组件
既可做普通的文本展示，也可设置点击事件。进入文本编辑页面，编辑文字，可以自定义文本的字体大小、位置、粗细、斜体、下划线、颜色等
图片组件
图片组件可以单独放置，可以置入双栏、自由面板、面板、弹窗、侧边栏、滑动面板、动态列表、动态容器、动态表单、动态分类等组件中

按钮组件
按钮组件可以单独放置，可以置入双栏、自由面板、面板、弹窗、侧边栏、滑动面板、动态列表、动态容器、动态表单、动态分类等组件中

标题组件
标题组件是商家可以自定义标题的一个组件工具

视频组件
即速应用视频分为视频组件以及视频列表组件两种，可实现后台上传视频

【视频组件】：前端直接点击播放视频功能，不会进入到视频详情页

【视频列表组件】：可设置付费或免费播放视频，点击播放进入视频详情页有收藏视频、开启弹幕及评论等基础功能，实现用户边观看边互动的效果

【抖音视频列表】：可以展示从该小程序跳转进入拍摄页面所拍摄成功的抖音视频

轮播组件
在页面某个模块内，自动滑动/手指滑动后，可以查看图片/视频，并对当前项进行设置点击事件，就叫做轮播。

双栏组件
用来整体的布局，相当于一个一分为二的板块，它分为两部分，操作的时候显示一个分隔的标志，便于操作，预览则不会出现。双栏默认每个栏占50%，当然，百分比是可以调整的。双栏里面可以添加基本的组件（包括文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件），从而达到一个整体的布局效果。双栏也可以嵌套双栏，也就是一个双栏里嵌入再嵌一个双栏就可以分成三部分了，四部分就接着再嵌套一个，如此下去。

分割线组件
小程序分割线组件放置于任意组件之间，实现分割功能

面板组件
面板为容器，可在其中置放文本、图片、按钮、分割线等组件；面板不支持拖拽改变大小，只能在组件样式设置中去设置

自由面板组件
自由面板为容器，可在其中置放文本、图片、按钮、分割线、自由面板等组件；组件置放到自由面板中，支持自由拖动、拖拉调节组件大小

滑动面板组件
定义：在滑动面板上添加图片、文本、按钮等基本组件，在小程序中可通过手指滑动屛幕就可以切换面板，称为滑动面板。

动态分类组件
“动态分类”组件可以展示电商、到店、应用数据等信息，与其他组件不同的是，它有多种展示样式可供选择

侧边栏组件
侧边栏属于一种方便功能操作的形式，通常用来整合部分资源或者放置一些快捷入口，对用户起到提醒或者导航的作用，提升用户的交互体验。

悬浮窗组件
在小程序界面悬挂在右侧，可以快速直接进入到软件功能的快捷键，称为悬浮窗。对悬浮窗可以设置相关点击事件。

即速应用后台管理

即速应用后台提供了非常强大的后台管理，开发者在后台进行修改操作就可以让数据即时更新。

总览

浏览大致的后台数据。

数据统计

数据统计包括数据总览、用户分析、商品分析、交易分析和营销分析功能。

用户管理

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

除了以上功能外，还有菜品管理、订单管理、营销推广、客服管理等管理系统。

第六章

网络API

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

发起网络请求

wx.request(Object)实现向服务器发送请求、获取数据等各种网络交互操作。

上传文件

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

下载文件

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

多媒体API

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

图片API

图片API实现对相机拍照图片或本地相册图片进行处理。

1.选择图片或拍照

wx.chooseImage(Object)接口用于从本地相册选择图片或使用相机拍照。

2.预览图片

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

3.获取图片信息

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

4.保存图片到系统相册

wx.saveImageToPhotosAlbum(Object)接口用于保存图片到系统相册, 需要得到用户授权scope.writePhotosAlbum。

录音API

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

1.开始录音

wx.startRecord(Object)接口用于实现开始录音。

2.停止录音

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

音频播放控件API

音频播放控制API主要用于对语音媒体文件的控制, 包括播放、暂停、停止及audio组件的控制。

1.播放语音

wx.playVoice(Object)接口用于开始播放语音, 同时只允许一个语音文件播放, 如果前一个语音文件还未播放完, 则中断前一个语音文件的播放。

2.暂停播放

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

3.结束播放

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

音乐播放控件API

音乐播放控制API主要用于实现对背景音乐的控制, 音乐文件只能是网络流媒体, 不能是本地音乐文件。

1.播放音乐

wx.playBackgroundAudio(Object)用于播放音乐, 同一时间只能有一首音乐处于播放状态。

2.获取音乐播放状态

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

3.控制音乐播放进度 

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

4.暂停播放音乐

wx.pauseBackgroundAudio()接口用于暂停播放音乐。

5.停止播放音乐

wx.stopBackgroundAudio()接口用于停止播放音乐。

6.监听音乐播放

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

7.监听音乐暂停

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

8.监听音乐停止

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

文件API

从网络上下载或录音的文件都是临时保存的, 若要持久保存, 需要用到文件ＡＰＩ。

1.保存文件

wx.saveFile(Object)用于保存文件到本地。

2.获取本地文件列表

wx.getSavedFileList(Object)接口用于获取本地已保存的文件列表, 如果调用成功, 则返回文件的本地路径、文件大小和文件保存时的时间戳(从１９７０/０１/０１ ０８: ００: ００ 到当前时间的秒数) 文件列表。

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

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

4.删除本地文件

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

5.打开文档

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

本地数据缓存API

小程序提供了以键值对的形式进行本地数据缓存功能, 并且是永久存储的, 但最大不超过10ＭＢ, 其目的是提高加载速度。

保存数据

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

获取数据

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

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

删除数据

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

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

清空数据

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

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

位置信息API

小程序可以通过位置信息API 来获取或显示本地位置信息, 小程序支持WGS84 和GCj02标准, WGS84 标准为地球坐标系, 是国际上通用的坐标系； GCj02 标准是中国国家测绘局制定的地理信息系统的坐标系统, 是由WGS84 坐标系经加密后的坐标系, 又称为火星坐标系。

获取位置信息

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

选择位置信息

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

显示位置信息

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

设备相关API

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

获取系统信息

wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。

网络状态

获取网络状态

wx.getNetworkType(Object)用于获取网络类型。

监听网络状态变化

wx.onNetworkStatusChange(CallBack)接口用于监听网络状态变化, 当网络状态变化时,返回当前网络状态类型及是否有网络连接。

拨打电话

wx.makePhoneCall(Object)接口用于实现调用手机拨打电话。

扫描二维码

wx.scanCode(Object)接口用于调起客户端扫码界面, 扫码成功后返回相应的内容。

示例代码

.wxml

<view class="container">
  <image class="bgaudio" src="{{changedImg?music.coverImg:'/images/分类.png'}}"></image>
  <view class="control-view">
    <image src="/images/导出.png" bind:tap="onPositionTap" data-how="0"></image>
    <image src="/images/{{isPlaying?'pause':'play'}}.png" bind:tap="onAudioTap"></image>
    <image src="/images/导出.png" bind:tap="onStopTap"></image>
    <image src="/images/导出.png" bind:tap="onPositionTap" data-how="1"></image>
  </view>
</view>

.wxss

.bgaudio{
  height: 350px;
  width: 350px;
  margin-bottom: 100px;
}
.control-view image{
  height: 64px;
  width: 64px;
  margin: 30px;
}

.js

Page({
  data:{
    isPlaying:false,
    coverImg: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(){
        that.setData({isPlaying:false,changedImg:false})
      }
    })
  },
  onPositionTap:function(event){
    let how=event.target.dataset.how
    wx.getBackgroundAudioPlayerState({
      success:function(res){
        let status=res.status
        if (status===1) {
          let duration=res.duration
          let currentPosition=res.currentPosition
          if (how==="0") {
            let position=currentPosition-10
            if (position<0) {
              position=1
            }
            wx.seekBackgroundAudio({
              position: position,
            });
            wx.showToast({
              title: '快退10s',
              duration:500
            })
          }
          if (how==="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(){
      that.setData({
        isPlaying:true,
        changedImg:true
      })
      console.log("on play")
    })
    wx.onBackgroundAudioPause(function(){
      that.setData({
        isPlaying:false
      })
      console.log("on pause")
    })
    wx.onBackgroundAudioStop(function(){
      that.setData({
        isPlaying:false,
        changedImg:false
      })
      console.log("on stop")
    })
  }
})