前六章总结

第一章总结

1.1认识微信小程序

1.1.1小程序简介

1.1.2小程序的特征

1无需安装

2触手可及

3用完急走

4无需截载

1.1.3小程序应用场景的特点

1.2微信小程序开发流程

1.2.1注册小程序账号

1.2.2开发环境准备

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

1.2.4创建第一个小程序项目

1.2.5运行及发布小程序

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

第二章总结

2.1小程序基本目录结构

2.1.1主体文件

在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，其中

1、app.js为小程序文件，主要用于注册小程序全局实例

2、app.json为小程序公共设置文件，配置小程序全局设置

3、app.wxss为小程序样式表文件，类似于HTML的.css文件

2.1.2页面文件

1，.js文件，页面逻辑文件

2，.wxss文件，页面样式表文件

3，.json文件，页面配置文件

4，.wxml文件，页面结构文件

2.2小程序的开发框架

2.2.1视图层

视图层由WXSS与WXML编写，有组件来进行展示

2.2.2逻辑层

逻辑层用于处理事务逻辑

2.2.3数据层

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

（如图所示）

2.3创建小程序页面

2.3.1创建第一个页面文件

2.3.2创建另一个页面文件

2.4配置文件

2.4.1全文配置文件

1，全局配置文件分为五个配置项，分别为：

2.4.2页面配置文件

2.5逻辑层文件

2.5.1项目逻辑文件

2.5.2页面逻辑文件

2.6页面结构文件

2.6.1数据绑定

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

2.6.2条件数据绑定

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

2.6.3列表数据绑定

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

2.6.4模版

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

2.6.5引用页面文件

代码如示：

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view>算术运算:{{age + num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==40 ?'happy' :'nohappy'}}</view>
<view wx:if="age>40">1</view>
<view wx:elif="age=40">0</view>
<view wx:else>-1</view>
<template name="stu">
<block wx:for="{{students}}">
<view>
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
</block>
</template>
<template is="stu" data="{{students}}" />

效果如下： 

2.6.6页面事件

2.7 页面样式文件

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

1,、尺寸单位:

2、样式导入

3、选择器：目前，wxss仅支持css中常用的选择器，如.css、#id、elemeent等

4、wxss常用属性

第三章总结

3.1盒子模型

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

3.2块级元素与行内元素

3.2.1块级元素

 块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下:
(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度。
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。
(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素。
<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代
码如下:

<!--pages/ketan/ketan.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>

效果如图：

3.2.2行内元素

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

(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元索
(3)同一块内，行内元素和其他行内元素显示在同一行。
<text>组件默认为行内元素，使用<view/>及<text>组件演示盒子模型及行内元案的示例代码如下:

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

  运行结果如下：

3.2.3行内块元素

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

<view>
<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素，行内元素和行内块元素</view></view>

 

3.3浮动与定位

3.3.1元素浮动与清除

元索浮动就是拍设置了浮动属性的元案公股高标准文档流的控制，移到其父元家中福定位置的过程。在CSS中，通过自m照性来定义浮动，其基本整式如下:

{float:none|left|right;}

3.3.2元素定位

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

{position:static |relative |absolute|fixed}

3.4flex布局

flex布局模型

3.4.1容器属性

3.4.2项目属性

第四章总结

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.1view

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

4.2.2scroll-view

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

4.2.3swiper

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

4.3基础内容组件

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

4.3.1icon

icon组件即图标组件，通常用于表示一种状态，如sueces、imo、wam、waing、amd等。其属性如表所示

4.3.2text

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

4.3.3progress

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

4.4表单组件

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

4.4.1button

4.4.2radio

4.4.3checkbox

4.4.4switch

4.4.5slider

4.4.6picker

4.4.7picker-view

4.4.8input

4.4.9textarea

4.4.10label

4.4.11form

4.5多媒体组件

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

4.5.1image

4.5.2audio

4.5.3video

4.5.4camera

4.6其他组件

4.6.1map

4.6.2canvas

第五章总结

5.1急速应用概述

5.1.1急速应用的优势

1、并发流程简单，掌门槛制作

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

5.1.2急速应用界面介绍

5.2急速应用组件

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

5.2.1布局组件

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

5.2.2基本组件

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

5.2.3高级组件

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

5.2.4其他组件

1.音频组件

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

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

5.3急速应用后台管理

5.4打包上传

5.4.1打包

5.4.2长传

第六章总结

6.1网络APL

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

6.1.1发起网络请求

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

6.1.2上传文件

wx. uploadF;le(0bjeet)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求，其相关参数如表所示

6.1.3下载文件

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

6.2多媒体APL

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

6.2.1图片APL

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

■wx.chooselmage(0bject)接口 用于从本地相册选择图片或使用相机拍照。
■wx.previewlmage(0bject)接口 用于预览图片。
■wx.getlmageInfo(0bject)接口 用于获取图片信息。
■wx. savelmageToPhotosAlbum(0bject)接口 用于保存图片到系统相册

6.2.2录音APL

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

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

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

6.2.3音频播放控制APL

音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及d盘件的控制，主要包括以下3个API:
wx.playVoice(Object)接口 用于实现开始播放语音
wx.pauseVoice(Object)接口 用于实现暂停正在播放的语音
wx.stopVoice(Object)接口 用于结束播放语音。

6.2.4音乐播放控制APL

音乐播放控制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)接口 用于实现监听音乐停止

6.3文件APL

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

■wxsaveFile(0bject)接口 用于保存文件到本地。
■wx getSavedFileLisl(0bject)接口 用于获取本地已保存的文件列表
■w-geiSaveFilelnío(0bject)接口 用于获取本地文件的文件信息。
■wx.removeSaveFile(0bject)接口 用于删除本地存储的文件。
■w.openDocumen(0bjeet)接口 用于新开页面打开文档，支持格式:doc、ppt、 pdf, doex . xlsx 、 ppts.

6.4本地数据及缓存APL

小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10MB，其目的是提高加载速度。数据缓存的接口主要有4个:
wx.setStorage(Object)或wx.selSlorageSync(key,data)接口用于设置缓存数据wx.getStorage(Object)或wx.getStorageSync(key)接口 用于获取缓存数据。wx.removeStorage(Object)或wx.removeStorageSync(key)接口用于删除指定缓存
数据。
wx.clearStorage()或wx.clearStorageSync()接口 用于清除缓存数据。
其中，带 Sync 后缀的为同步接口，不带Sync 后缀的为异步接口。

6.4.1保存数据

6.4.2获取数据

6.4.3删除数据

6.4.4清空数据

1. wx.clearStorage()
wx.clearStorage()接口用于异步清理本地数据缓存，没有参数
示例代码如下:

2.wx.clearStroageSync()
wx.clearStroageSync()接口用于同步清理本地数据缓存
示例代码如下: 

6.5位置信息APL

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

■wx.getLocation(0bject)接口 用于获取位置信息。
■wx.chooseLocation(0bject)接口 用于选择位置信息。
■wx.openLocation(0bject)接口 用于通过地图显示位置

6.5.1获取位置信息

6.5.2选择位置信息

6.5.3显示位置信息

6.6设备相关APL

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

6.6.1获取系统信息

6.6.2网络状态

6.6.3拨打电话

6.6.4扫描二维码