1-6章总结

第一章  微信小程序概述

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

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

3.目录文件区
目录文件区用来显示当前项目的目录结构

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

5.调试区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域

1.Console面板：
Comsole面板是调试小程序的控制而板

2.Sources面板：
Sourees面板是源文件调试信息页，用于显示当前项目的脚本文件

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

4.Security面板：
Security面板是安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问题

5.Storage面板：
Storage 面板是数据存储信息页

6.AppData面板：
AppDala面板是实时数据信息页，用于显示项目中被激活的所有页面的数据情况

7.wxml面板：
Wxml面板是布局信息页，主要用于调试Wxm组件和相关CSS样式，显示Wxm转化后的界面。

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

9.Trace面板：
Trace面板是路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓(Android)设备的路由信息

10.扩展菜单项：
最右边的扩展菜单项“:”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息

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

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

app.js：小程序逻辑文件

app.json：小程序公共设置文件

app. wxss ：小程序主样式表文件

2.小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个具有相同的路径与文件名。

■.js文件 页面逻辑文件

■.wxml文件页面结构文件

■.wxss 文件页面样式表文件

■.json文件页面配置文件

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

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

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

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

7.pages 配置项接受一个数组，用来指定小程序由哪些页面组成

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

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

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

11.debug 配置项用于开启开发者工具的调试模式，默认为false

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

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

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

15.页面样式文件分：尺寸单位、样式导入、选择器等

第三章  页面布局

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

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

3.行内元素特点如下：
（1）行内元素不能被设置高度和宽度，其高度和宽度由内容决定。                                              （2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素。
（3）同一块内，行内元素和其他行内元素显示在同一行。

4.当元素的display 属性被设置为inline-block时，元素被设置为行内块元素。

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

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

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

8.(1)display 用来指定元素是否为 flex布局

   (2)flex -direction 用于设置主轴的方向，即项目排列的方向

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

   (4)flex-flow 是flex-direction 和fex-wrap 的简写形式，默认值为row nowrap

   (5)justify -content 用于定义项目在主轴上的对齐方式

   (6)align —items 用于指定项目在交叉轴上的对齐方式

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

9.容器内的项目支持6个属性，其名称和功能如表所示：

属性名	功能
order	定义项目的排列顺序
flex -grow	定义项目的放大比例（当有多余空间时）
flex -shrink	定义项目的缩小比例（当空间不足时）
flex -basis	定义在分配多余空间之前，项目占据的主轴空间
flex	flex-grow、flex-shrink、flex-basis的简写
align - self	用来设置单独的伸缩项目在交叉轴上的对齐方式

第四章  页面组件

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

2.view 组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面（User Interface，UI）组件

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

4.progress用于显示进度状态

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

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

7.复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox-group/>（多项选择器)和<checkbox/>（多选项目）两个组件组合而成

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

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

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

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

12.时间选择器可以用于从提供的时间选项中选择相应的时间

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

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

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

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

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

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

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

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

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

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

23.map 组件用于在页面中显示地图或路径，常用于LBS（基于位置服务）或路径指引

24.canvas 组件用来绘制图形，相当于一块无色透明的普通图布

第五章  即速应用

1.即速应用页面分为：

1.菜单栏

2.工具栏

3.编辑区

4.属性面板

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

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

4.数据管理包括数据总览、访客分析和传播数据功能数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及浏览量曲线图

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

第六章  API应用

1.网络API可以帮助开发者实现网络URL.访问调用、文件的上传和下载、网络套接字的使用等功能处理

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

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

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

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

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

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

8.wx.getImageInfo(Objcct)接口用于获取图片信息

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

10.wx startRecord(Objct)接口用于实现开始录音

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

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

13.wx.pauseVoice(Object)用于暂停正在播放的语音

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

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

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

17.wx. seek BackgroundAudio( Object)接口用于控制音乐播放进度

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

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

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

21.wx. onBackground.AudioPause(CallBack)接口用于实现监听音乐暂停，通常被 wx. pal
ArlgpoundAudio()方法触发

22.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止，通常被音乐自然播放停上或 wx. seek ackgroundAudio(Object)方法导致播放位置等于音乐总时长时触发

23.wx. saveFile（Object）用于保存文件到本地

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

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

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

27.wxsetstorag (0bject)口将数据存诸到本地缓存接口指定的key中，接口执行后会覆盖key对应的内容

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

29.wx. getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容。其相关参数如表所示

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

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

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

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

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

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

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

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

38.wx.getsystemlnf(0bject)接口、wx. getSystemlnfoSync()接口分别用于异步和同步获取系
统信息

39.wx.getinetorktryp( 0bject)用于获取网络类型

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

41.wx.makePhoneCal( Objecet)接口用于实现调用手机拨打电话

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