《微信小程序开发入门与实践》笔记 总结

小程序快捷键

1. 格式调整

Ctrl+S: 保存文件
Ctrl+[, Ctrl+]: 代码行缩进
Ctrl+Shift+[, Ctrl+Shift+]: 折叠打开代码块
Ctrl+C Ctrl+V: 复制粘贴， 如果没有选中任何文字则复制粘贴Shift+Alt+F: 代码格式化
Alt+Up, Alt+Down: 上下移动一行
Shift+Alt+Up, Shift+Alt+Down: 向上向下复制一行
一行Ctrl+Shift+Enter: 在当前行上方插入
Ctrl+Shift+F: 全局搜索

1. 光标相关

Ctrl+End: 移动到文件结尾
Ctrl+Home: 移动到文件开头
Ctrl+i: 选中当前行
Shift+End: 选择从光标到行尾
Shift+Home: 选择从行首到光标处
Ctrl+Shift+L: 选中所有匹配

1. 界面相关

Ctrl + \: 隐藏侧边栏
Ctrl + m: 打开或者隐藏模拟器

相对路径与绝对路径

在小程序中同样有相对路径和绝对路径的区别。上面我们在设置image组件的src属性时，使用的是绝对路径，它以"/“开头，”/"代表根目录。我们也可以使用相对路径来为image指定图片路径，比如，将代码中image组件的src属性改写为相对路径：

<image src=" . ./ . ./images/avatar/avatar-1.png"></image>

路径中的"… "表示向上一级。这里由于使用绝对路径更加简洁，所以我们使用绝对路径。

提示

真实项目中，图片资源尽量不要存储在小程序的目录中，因为小程序的大小不能超过1MB, 超过则无法真机运行和发布项目。应该将图片都存放在服务器上，让小程序通过网络来加载图片资源。

支持的CSS选择器

提示

如果我们足够细心，可以看到小程序的模拟器选择项下，给出了每种机型的分辨率。要强调的是，这里的分辨率指的是逻辑分辨率pt,而非物理分辨率。以iPhone 6为例，模拟器里给出的分辨率是：375 x 667; Dpr: 2它的意思是：iPhone 6的水平方向有375个逻辑像素点，而竖直方向有667个逻辑像素点，每个逻辑像素点包含2个物理像素点。开发者一定要注意逻辑像素和物理像素的区别。我们通常在PS里做的设计图，它的像素可以简单理解为物理像素。
再次提醒开发者，1物理像素不等于1px。假设有一张图片在操作系统下显示宽度为750个像素，我们现在想让这个图片水平方向充满整个页面。如果你直接在页面里(iPhone6模拟机型下）将图片宽度设置为750px,这是不对的。正确的设置方法为750rpx或者375px,才能让图片水平填满小程序。因为，iPhone6下：1物理像素=1rpx=0.5px

生命周期函数

MINA 框架分别提供了 5 个生命周期函数来监听这 5 个特定的生命周期，以方便开发者可以在这些特定的时刻执行一些自己的代码逻辑，它们分别是：

• onLoad 监听页面加载，一个页面只会调用一次。
• onShow 监听页面显示， 每次打开页面都会调用。
• onReady 监听页面初次渲染完成， 一个页面只会调用一次， 代表页面已经准备妥当，可以和视图层进行交互。
• onHide 监听页面隐藏。
• onUnload 监听页面卸载。

下图说明了页面 Page 实例的生命周期

数据绑定

不同千AngularJS的双向数据绑定，小程序仅实现了单向数据绑定，即只支持从逻辑层传递到渲染层的数据绑定，反之则不可以。
小程序使用Page方法参数里的data变量作为数据绑定的桥梁。如代码清单4-13所示，data里已经被我们放置了一些数据，这些直接写在data里的数据，被称为数据绑定的初始化数据。

注意， 数据绑定有以下两种：

• 一种是初始化数据的数据绑定， 通常将这些数据直接写在Page方法参数的data对象 ,下面。
• 另外一种是使用setData方法来做数据绑定，这种方式也可以理解为数据更新。这样的数据更新将引起页面的Rerender (重新渲染）， 参考图4-18中的Rerender。

冒泡事件与非冒泡事件

• 什么是冒泡事件？
  冒泡事件指某个组件上的时间被触发后， 事件还会向父级元素传递； 父级元素还会继续向父级的父级传递， 一直到页面的顶级元素。 而非冒泡事件则不会向父级元素传递事件。
  tap 是一个常见的冒泡事件，冒泡事件类型还有下面几种： touchstart 手指触摸动作开始。
• touchmove 手指触摸后移动。
• touchcancel 手指触摸动作被打断， 如来电提醒、 弹窗。
• touchend 手指触摸动作结束。
• tap 手指触摸后马上离开。
• longtap手指触摸后，超过350ms再离开。
  相对于PC上的Web浏览器，小程序的事件并不多。需要注意的是，在wxml组件里注册事件时，不可以直接使用tap="function"或 touchmove=“function”, 需要在事件名之前添加catch或者bind前缀。

使用require引用JS模块时，要特别注意以下几点：

• 被引用的文件一定要带有扩展名js,这一点是不同于页面路径的。
• path路径不可以使用绝对路径，否则会报错。应该使用相对路径。
• 在JavaScript文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响。

消除template对于外部变量名的依赖

• 使用扩展运算符"…"展开传入对象变量来消除这个问题。
• 例如：

<template is="postitemTpl" data=" { { ... item}}" />

• {{…item}} 可以将 item 这个对象展开。展开之后再传入到 template 里，就可以保证 template不再依赖 item 这个变量名。

include与import 引用模板的区别

• import 需要先引入template, 然后再使用template; 但include 不需要预先引入， 直接
  在需要的地方引入模板即可。
• include 模式非常简单，就是简单的代码替换， 不存在作用域，也不能像import 一样使
  用data 传递变量。
• import 有作用域的概念，即只会 import 目标文件中定义的 template, 而不会 import 目标文件 import 的 template。

wx:if与hidden控制元素显示和隐藏

• wx:if 的切换和渲染机制较为复杂。当 wx:if 进行切换时，MINA 框架有一个局部渲染的过程，它会确保条件块在切换时销毁或重新渲染。
• 同时 wx:if 也是惰性的，如果初始渲染条件为 false，那么框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
• 相比之下，hidden 就简单得多了，组件始终会被渲染，只是简单地控制显示与隐藏。
• 一般来说，wx:if 有更高的切换消耗，而 hidden 有更高的初始渲染消耗。因此，在需要频繁切换的情景下用 hidden 更好，在运行时条件不大可能改变时用 wx:if 较好。

在冒泡事件中，target指的是事件最开始被触发的元素，而currentTarget指的是捕获事件的元素。

• 点赞 1
• 收藏
• 分享
• 文章举报