微信小程序开发入门与实践 雷磊 53个笔记 ◆ 前 言 小程序中没有DOM,请放弃“首先获取DOM,
再操作DOM”的思维 替代DOM操作的方法是“数据绑定
微信小程序开发入门与实践 雷磊 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上注册事件是无效的