本文 首发于 🌱 煎茶转载 请注明 来源

微信小程序开发入门与实践 雷磊 53个笔记

◆ 前 言

小程序中没有DOM,请放弃“首先获取DOM,再操作DOM”的思维

替代DOM操作的方法是“数据绑定”。控制组件显示隐藏、切换CSS样式、控制滚动条,这些很容易用DOM思维思考常见功能在小程序中都是通过“数据绑定”实现的

小程序运行在一个JSCore中,它本身不支持Web中的window及DOM对象

一本书是永远不可能替代官方API文档的。

◆ 第1章 微信小程序简介

除了游戏和直播,微信官方并没有明确限制你不能做什么类型的小程序

MINA是官方小程序的内部开发代号,也是小程序运行框架的别名

◆ 第3章 从第一个简单的“Welcome”页面开始小程序之旅

根目录下面有3个文件:app.js、app.json和app.wxss。一个小程序项目必须有这3个描述App的文件,它们必须放在应用程序的根目录下

pages文件夹下就有2个页面,分别是index页面和logs页面

每个页面可以由4个文件构成,分别是:.js、.wxml、.wxss和.json文件

不同的是wxml文件里的标签元素不可以使用HTML标签,只能使用小程序自己封装的一些组件

实际上小程序的样式编写语言就是CSS,只是把.css文件换成了.wxss文件

小程序的4种页面级别文件同3个应用程序级别文件相比,多出了一个wxml页面标签文件

要显示welcome这个页面,必须让小程序的MINA框架知道这个页面的“存在”以及这个页面的具体位置(文件路径)

MINA框架将会自动去寻找页面路径,并将页面的.json、.js、.wxml和.wxss这4个文件进行整合

即使我们的welcome页面中没有任何JavaScript代码,依然需要在welcome.js中主动调用一下Page()方法

welcome.json文件同样不可以为空,即使你目前不想在.json文件中配置任何属性,也需要加入一个空的{}

小程序官方推荐的布局方式:Flex布局

小程序的大小不能超过1MB,超过则无法真机运行和发布项目

[插图]

本地资源在wxss中是无法使用的

早期时候,主流的浏览器对Flex布局的支持并不完善,造成了很多开发者不知道有这种布局的存在或者使用非常少,我们还是习惯使用传统的position和float属性来布局

Flex也称为“弹性布局”,主要作用在容器上

使用display:flex将这个view变成了一个弹性盒子

使用flex-direction这个属性指定view内元素的排列方向

首先要了解一个Flex布局非常重要的概念:轴。

.container样式中的属性align-items: center,可以让三元素水平居中

在小程序里,长度单位既可以使用rpx,也可以使用px

rpx可以使组件自适应屏幕的高度和宽度

建议以iPhone 6的宽度750个物理像素作为标准,来做设计图

保持页面元素之间的分布可以保持“一定的比例关系”,这种情况下应该使用rpx。

如果border动态变化,那么它会在屏幕尺寸较大的手机上变得很粗,这并不是我们想要的效果

小程序的模拟器选择项下,给出了每种机型的分辨率。要强调的是,这里的分辨率指的是逻辑分辨率pt,而非物理分辨率

在container view的外边,小程序还有一个默认的容器元素:page。

window配置可项用来设置小程序的状态栏、导航栏、标题和窗口的背景色

书籍绝大多数是用来引导入门和分享思想的,它不应该替代官方的API文档

◆ 第4章 文章列表页面

数据绑定是小程序中最重要的概念,它是和传统的Web网页编程相比最大的不同

小程序的image组件提供了4种缩放模式和9种裁剪模式

小程序里强制规定,只允许有最多五层父子页面

建议页面最多不要超过3层。

redirectTo不存在这个问题,因为当跳转到另一个页面后,上一个页面被强制卸载掉了。

◆ 第5章 模块、模板与缓存

还需要使用module.exports向外部暴露一个接口。

小程序也提供了一个称作模板的技术来支持对wxml组件的封装,但是这种封装仅仅只是wxml的代码片段

就必须消除template对于外部变量名的依赖,可以使用扩展运算符“…”展开传入对象变量来消除这个问题

import需要先引入template,然后再使用template;但include不需要预先引入,直接在需要的地方引入模板即可。

include模式非常简单,就是简单的代码替换,不存在作用域,也不能像import一样使用data传递变量

如果模板仅仅是静态wxml,不涉及数据的传递,可以使用include。但如果模板涉及数据绑定,还是建议使用import

引用样式文件的语法是@import “src”。

页面的JS文件中,我们使用Page(object)来注册页面,并在object中指定页面的生命周期函数等。同样,可以在app.js文件中使用App(object)来注册小程序,并在object中指定小程序的生命周期函数等

最好的初始化数据库的时机是在应用程序启动时

小程序的本地缓存有容量上限,最大不允许超过10MB

在处理缓存相关问题时,开发者要保持头脑清醒,否则有时候一个小小的缓存没更新的问题,将浪费开发者大量的时间

JavaScript里并不是没有面向对象,只不过它是用原型链的方式来实现对象的继承机制

◆ 第6章 文章详情页面

在template上注册事件是无效的