小程序第二章课堂总结

基本结构

在微信小程序的基本目录结构中，项目主目录下有2个目录(pages和 utils)

和4个文件(app.js、app.json、app. wxss和project.config. json)。

在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。
这3个文件不属于任何页面。

project.configjson 文件是项目配置文件，包含项目名称AppID等相关信息，如图，是开发工具项目详情的可视文件目其目的和功能与project.config.ison 文件的目的和功能是一样的

1.主体文件

app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.is 文件会
和其他页面的逻辑文件打包成一个 JavaScript 文件。该文件在项目中不可缺少

app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少

app.wxss 小程序主样式表文件，类似 HTML 的css 文件。在主式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.页面文件

.js文件页面逻辑文件，在该文件中编写 JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。s
.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
.wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖 app.wxss 中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。

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

开发框架

小程序 MINA 框架将整个系统划分为视图层和逻辑层。视图层 ( View) 由框架设计的标签语言 WXML ( WeiXin Markup Language) 和用于描述 WXML 组件样式的WXSS (WeiXinStyle Sheets)组成，它们的关系就像HTML和CSS 的关系

1.逻辑层

(1)增加 app()和 Page()方法，进行程序和页面的注册
(2) 提供丰富的 API，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。

2.数据层

1.页面临时数据或缓存
在 Page()中，使用 setData 函数将数据从逻层发送到this.data 的值
setData()函数的参数接收一个对象，以 (key,vale) 的形对应的值改变成 value
2.文件存储 (本地存储)
使用数据 API 接口，如下
获取本地数据缓存wx. getStorage
设置本地数据缓存wx. setStorage
清理本地数据缓存wx. clearStorage
3.网络存储与调用
上传或下载文件 API 接口，如下:
wx.request发起网络请求
wx.uploadFile 上传文件。
wx.downloadFile下载文件
调用URL的 API接口，如下:
wx.navigateTo 新窗口打开页面
wx. redirectTo原窗口打开页面

如何创建新的小程序页面

点击黄色箭头的加号创建一个 文件zhangjiu

在点击一个红色箭头的加号，创建四个文件，分别是

zhangjiu.js

zhangjiu.json

zhangjiu.wxml

zhangjiu.wxss

在zhangjiu.wxml输入”欢迎学习小程序开发“

在zhangjiu.js输入page（{      }）

在zhangjiu.json输入{  }

在app.json加入你的文件

然后”保存 ”“编译“

配置文件

1.全局配置项

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

2.window配置项

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

3.tabBar配置项

4.tabBar中list选项

5.pages配置项

pages 配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项

设置 pages 配置项时应注意以下3 点:

(1)数组的第一项用于设定小程序的初始页面
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.jsjson.wxml和.wxss 文件进行整合数据绑定。

6.nrtworkTimeout配置项

7.debug配置项

debug配置项用于开发者工具的调试模式，默认为false。开启后，页面的注册，路由，数据更新，事件触发等调试信息将info的形式输出到Console（控制台）面板上。

逻辑层文件

1.项目逻辑层文件

2.页面逻辑层文件

​页面逻辑文件的主要功能有:设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM改变页面，只能采用数据绑定和事件响应来实现。
在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表2-8所示。

1.设置初始数据
设置初始数据是对页面的第一次数据绑定。对象data 将会以JSON (Javascript Object No- tation,JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过WXML对数据进行绑定。
2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和 wx.redirectTo及<navigator/>中的query。
onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，
调用该函数。
事件
onUnload页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时，调田该函妆
3.定义事件处理函数
开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加人事件定，当达到触发事件时，小程序就会执行Page()中定义的事件处理函数。
4.使用setData跟新数据
小程序在Page对象中封装了一个名为setData()的函数，用来更新data中的数据。函
数参数为Object，以“key:value”对的形式表示将this.data 中的key对应的值修改为value。。 

页面结构

数据绑定

1.简单绑定是指使用双大括号()将变量包起来，在页面中直接作为字符串输出简单绑定可以作用于内容、组件属性、控制属性等的输出

2.运算

在内可以做一些简单的运算 (主要有算术运算、逻辑运算、三元运算、字符运算等)，这些运算均应符合 JavaScript运算规则。

条件数据绑定

1.wx:if 条件数据绑定
wx:if条件数据绑定是指使用 wx:if 这个属性来判断是否数据绑定当前组件。

<view wx:if="!lconditonl!“>内容</view>

2.block wx:if 条件数据绑定
当需要通过一个表达式去控制多个组件时，可以通过<block >将多个组件包起来，然后在<block>中添加wx:if属性即可。

<block wx;if="/true!!>
<Niew><view>viewl
<view>view2 </view>
</block>

列表数据绑定

1. wx;for
在组件上，可以使用 wx:for 控制属性绑定一个数组，将数据中的各项数据循环进行数绑定到该组件，格式如下:

<view wx:for=”litems!!”>
lindexl!:flitem
<Wiew>

2. block wx;for
与 block wx;if 类似，在 wxml 中也可以使用<block>包装多个组件进行列表数据绑定例如，上面的代码可以被修改为以下形式，效果不变:

<block wx:for="/student!!"><view >
<text >flindexl! </text >
<text >llitem.namel!</text >
<text >llitem.agel| < /text >
<text >ffitem.hobby|| < /text >
< /view >
</block >

冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个

WXSS文件与 CSS文件有大部分属性名及属性值相同，WXSS 的常用属性及属性值如表