微信小程序复习总结

第一章总结

认识微信小程序

简介

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

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

工具栏：

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

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

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

编辑区：
                编辑区用来实现对代码的编辑操作，编辑区中支持对.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;&