笔记二：小程序框架分析

第一节：目录结构介绍

微信小程序框架 = 逻辑层 + 视图层 + json配置文件

逻辑层：用来处理业务逻辑。JavaScript。
视图层：用来渲染页面。视图层描述语言WXML。视图样式WXSS。

微信小程序目录结构主要包含两部分：框架全局文件、框架页面文件

框架全局文件：
app.js
该文件用来定义全局数据和函数的使用。
它可以指定微信小程序的生命周期函数。
生命周期函数可以理解为微信小程序自己定义的函数，如：onLaunch 监听小程序初始化
onShow 监听小程序显示
onHide 监听小程序隐藏

app.json
实现功能：配置页面路径、配置窗口表现、配置标签导航、配置网络超时、配置 Debug 模式

app.wxss
该文件对 CSS 样式进行了扩展。
该文件是对所有页面定义的一个全局样式。
如果页面重新定义的样式与全局样式冲突，则全局样式会被覆盖。

project.config.json
小程序项目个性化配置文件。
开发者针对各自喜好做一些个性化配置，如界面颜色、编译配置等。
换机器重新安装开发工具需重新配置。
每个项目根目录下均会生成此文件。

框架页面文件：

第二节：注册程序应用

小程序注册
app.js 文件不仅可以定义全局函数和数据，还可以注册小程序。
在 App() 函数里可以完成小程序的注册，并指定其生命周期函数。

onLaunch 函数：
监听小程序初始化；一旦初始化完成，就会触发；该函数在生命周期中只会触发一次。

onShow 函数：
用来监听小程序显示；只要程序启动或者从后台进入都会触发该函数。

onHide 函数：
监听小程序隐藏；一旦小程序从前台进入后台，就会触发该函数。
该函数与 onShow 函数相对。

onError 函数：
监听小程序脚本或者 API 是否发生错误；发生错误时返回错误信息。

onPageNotFound 函数：
当要打开的页面不存在时，会调用该函数。

注意：
（1）App() 必须在 app.js 中注册，且不能注册多个。
（2）不要在定义于 app() 内的函数中调用 getApp() ，使用this 就可以获取 App 实例。
（3）不要在 onLoad 的时候调用 getCurrentPage() ，此时 page 还没有生成。
（4）通过 getApp() 获取实例之后，不要私自调用生命周期函数。

第三节：注册页面的使用

每个页面文件夹里，都有一个页面对应的 js 文件。
这个文件里的 Page() 函数用来注册页面。
接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等页面的所有业务逻辑处理都放在这个文件里。

1.页面初始化数据
data 为页面初始化数据。
初始化数据将作为页面的第一次渲染。
data 会以 json 的形式由逻辑层传到渲染层。
所以，其数据必须是可以转成 json 的格式，比如：字符串、数字、布尔值、对象或数组。
渲染界面可以通过 WXML 对数据进行绑定。

2.生命周期函数

3.页面相关事件处理函数


4.页面路由管理
微信小程序的页面路由都是由微信小程序框架来管理的。
框架以栈的形式维护了所有页面。
栈：一种数据结构（只能在一端进行插入和删除操作；按“后进先出”的原则存储数据）

小程序页面交互也是通过栈来完成
小程序初始化时，新页面入栈
打开新页面时，新页面入栈
页面重定向时，当前页面出栈
页面返回时，页面不断出栈，直到新页面入栈
tab 切换时，页面全部出栈，只留下新的 tab 页面
重新加载时，页面全部出栈，只留下新的页面

页面路由管理注意事项：
（1）navigateTo ，redirectTo 只能打开非 tabBar 页面。
（2）switchTab 只能打开 tabBar 页面。
（3）reLaunch 可以打开任意页面。
（4）页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
（5）调用页面路由带的参数可以在目标页面的 onLoad 中获取。

5.自定义函数
除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。
在渲染层的组件中可以加入事件绑定。
当达到触发事件时，就会执行 Page 中定义的事件处理函数。

6.setData 设值函数
Page.prototype. setData() 设值函数用于将数据从逻辑层发送到视图层。
同时改变对应的 this.data 的值。
setData() 参数格式：接受一个对象，以 key，value 的形式表示将 this. data 中的 key对应的值改变成 value。
其中 key 非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d
并且不需要在 this.data 中预先定义。

注意事项：
（1）直接修改 this.data 无效。
（2）无法改变页面的状态。
（3）还会造成数据不一致。
（4）单次设置的数据不能超过 1024 KB，尽量避免一次性设置过多的数据。

第四节：数据绑定

前期准备：

1.组件属性绑定：

2.控制属性绑定：

3.关键字绑定：

4.运算：
可以在 {{ }} 内进行简单的运算。
小程序支持以下几种运算：三元运算、数学运算、逻辑判断、字符串运算、数据路径运算。

第五节：条件渲染

1.wx:if 判断单个组件

2.block wx:if 判断多个组件

注意：

第六节：列表渲染

1.wx:for 列表渲染单个组件
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
数组当前项的下标变量名默认为 index。
数组当前项的变量名默认为 item。

使用 wx:for-item 可以指定数组当前元素的变量名。
使用 wx:for-index 可以指定数组当前下标的变量名。
2.block wx:for 列表渲染多个组件
wx:for 应用在某一个组件上，如果想渲染一个包含多节点的结构块，这时 wx:for 需要应用在 < block/> 标签上

3.wx:key 指定唯一标识符
如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，
如< input/> 中的输入内容
< switch/> 的选中状态

需要使用 wx:key 来指定列表中项目的唯一标识符。

第七节：定义模板

关于模板
WXML 提供模板（template）功能。
可以把一些共用的、复用的代码，在模板中定义代码片段。
在不同的地方调用，以达到一次编写，多次直接使用的效果。

定义模板
在 < template/> 内定义代码片段，使用 name 属性，作为模板的名字。

使用模板
在 WXML 文件里，使用 is 属性，声明需要使用的模板。
然后将模板所需要的 data 传入。

第八节：引用功能

第九节：WXS小程序脚本语言

后面的话：

这么久了，草稿箱里竟然还躺着一篇文章！！！看了看笔记一的时间，这应该还是上一年疫情在家准备写的微信小程序，但是因为自己想体验一下兼职生活，写博客就搁置了。现在看到了它，就给发表了吧，虽然没写完，但也是自己的脚印。