【学习笔记】微信小程序
像素和DPR
当设备尺寸相同，但像素变得更密集时，屏幕能显示的画面过渡更细致，图像看起来就更清晰明快。由此定义了「屏幕像素密度PPI（pixel per inch）」，用于代表屏幕上每英寸可以显示的像素点的数量。
像素实际上分为两种： 1． 物理像素：又称设备像素(device pixels)，指设备屏幕的物理像素，一个屏幕里的物理像素数量是固定的。 2． 逻辑像素：又称CSS像素(CSS pixels)，是为web开发而创造的抽象概念，用于在CSS和JavaScript中以「px」描述位置、大小和间距的单位尺寸。
设备像素比DPR(devicePixelRatio)，是指默认屏幕内容无缩放时，物理像素和逻辑像素的比值：
DPR = 物理像素 / 逻辑像素
在JavaScript里可以通过window.devicePixelRatio获取到用户设备的DPR值。
对应到web开发中，就是需要根据不同的DPR缩放网页内容，计算公式为：
图片缩放尺寸 = 图片逻辑像素 x DPR
console JavaScript设置断点
通过左边的内容源，打开对应的 JavaScript 文件，鼠标点击文件的行号就可以设置和删除断点。
F8：中断，F10：单句调试，F11：单步调试。
Source Map
「Source Map」的本质是一个独立的索引文件，与JavaScript源代码并存于同目录中。这个文件储存着源代码和执行代码之间位置的对应关系。有了这些索引数据，调试器就可以把运行时的代码位置转换成源代码对应的位置，使开发者最终看到的是源代码的对应信息而不用关心运行代码的情况。
part1：[练习]自定义编译模式
题目要求：
练习提示：
想要在页面里取得传入参数，需要在onLoad事件函数中加上options，通过options，所有参数都可以通过键值获取到：
个人练习：
part1：[项目]使用源码创建并运行demo项目
项目要求
- 1.将组件tab里的项目，点击态的灰色字体改为红色，透明度改为0.8：
- 2.通过调试器断点，当点击「视图容器」时，触发「基础内容」的事件展开其子菜单：
个人练习1：
个人练习2：
断点打在index.js第41行中，点击左侧【视图容器】，在控制台输入e.currentTarget.id="content"（content即基础内容的id），然后快捷键F8继续执行代码，即可得到结果。
老师提示：
除了项目的要求之外，不知道你是否尝试使用开发工具的工具栏上的「远程调试」按钮呢?如果你还没使用过，可以尝试在kindToggle 事件方法里写.上断点语句debugger; , 然后点击「远程调试」按钮,再用手机扫描I具里生成的二维码进行远程调试，当在手机里点选菜单时，看看开发工具的调试面板是不是命中了断点?使用这种方式，可以调试很多在手机里触发的交互行为,也是一一个很有用的技巧。
小程序沙盒模型
小程序在设计上，也需要为开发者提供许多微信独有的API，比如获取用户微信昵称，调用微信支付接口等等。如果这些API与现有的前端能力相结合，开发者的能力将被极大扩展，更可能超过微信保护用户的可控范围。为了在“保护用户数据”和“对开发者开放能力”之间找到平衡，自然有必要把这两者放在自己力所能及的「沙盒模型」中实现。而这个沙盒，也就是小程序框架，使用WXML+WXSS+JavaScript构建的小程序，都是运行在这个沙盒模型中。
part2：[练习] 条件判断输出习题
题目要求：
个人练习：
遇到的bug：当时分秒遇到个位数时，显示没有补0，需要js另外判断个位数补0情况。
part2：[练习] 循环列表输出习题
题目要求：
个人练习：
不绑定wx:情况：在页面输出的过程中，勾选 星期日，间隔5秒后追加数据时， 勾选变成正在生成的第一个checkbox。
绑定wx:key="*this"情况：在页面输出的过程中，勾选状态不变。
[练习] 事件绑定和处理
题目要求：
个人练习：
逻辑层设定onBindTap事件，在视图层绑定事件onBindTap。
练习改进：
看了练习提示之后，才知道题目不单只是要求会使用 target.dataset.value调用事件值，还要会使用this.setData给data中result属性赋值，输出到视图层。
part2： [练习]多个事件绑定和执行
题目要求：
个人练习：
1、点击文字【最内层】，最内层使用capture-bind，中间层使用capture-catch。
2、点击文字【最内层】，最内层使用capture-bind，最外层使用capture-bind，中间层使用bind。
3、
这个例子中为什么是先执行handleTap2？
part2： [练习]模板复用
题目要求：
个人练习：
part2： [练习] WXS脚本处理数据
题目要求：
个人练习：
wxml模板：
wxs文件：
思路是使用getDay()获取当前日期为本周第几天，再计算本周各天与今天的天数差值，输出本周所有日期。
需要注意的是星期天getDay()值返回0；wxs不支持new Date()，而是通过getDate() 生成date对象；转义符\n只能用在<text></text>标签中，否则报错。
