微信小程序学习笔记一
1. 什么是小程序?
- 2017年度百度百科十大热词之一
- 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用
(
张小龙对其的定义是无需安装, 用完即走, 实际上是需要安装的, 只不过小程序的体积特别小, 下载速度很快, 用户感觉不到下载的过程) - 小程序刚发布的时候要求压缩包的体积不能大于
1M, 否则无法通过, 在2017年4月做了改进, 由原来的1M提升到2M - 2017年 1月9日0点, 万众瞩目的微信第一批小程序正式低调上线
2. 小程序可以干什么?
- 同App进行互补, 提供同app类型的功能, 比app使用方便简介
- 通过扫一扫活着微信搜索即可下载
- 用户使用频率不高, 但又不得不用的功能软件, 目前看来小程序是首选
- 连接线上线下
- 开发门槛低, 成本低
3. 开发小程序储备知识
3.1 Flex布局简介
3.1.1 什么是flex布局?
Flex是Flexible Box的缩写, 意为”弹性布局”, 用来为盒状模型提供最大的灵活性- 任何一个容器都可以指定Flex布局
display:'flex'
3.1.2 flex 属性
flex-direction: 属性决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row(默认值): 主轴为水平方向, 起点在左端
row-reverse: 主轴为水平方向, 起点在右端
column: 主轴为垂直方向, 起点在上沿
colum-reverse: 主轴在垂直方向, 起点在下沿
flex-wrap:定义如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(默认): 不换行
wrap: 换行, 第一行在上方
wrap-revers: 换行, 第一行在下方
flex-flow: flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content: 定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start(默认值): 左对齐
flex-end: 右对齐
center: 居中
space-between: 两端对齐, 项目之间的间隔都相等
space-around: 每个项目两侧的间隔相等, 所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items: 定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content: 定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
3.2 移动端相关知识
3.2.1 物理像素
- 屏幕的分辨率
- 设备能控制显示的最小单位, 可以把物理像素看成是对应的像素点
3.2.2 设备独立像素 & css像素
设备独立像素(也叫密度无关像素), 可以认为是计算机坐标系统中的一个点, 这个点代表一个可以由程序使用并控制的虚拟像素(比如: css像素, 知识android机中css 像素就不叫 “css像素”了, 而是叫 “设备独立像素”), 然后由相关系统转换为物理像素
3.2.3 dpr比 & DPI & PPI
dpr: 设备像素比,物理像素/设备独立像素 = dpr, 一般以iphone6 的dpr 为准dpr = 2- PPI: 一英寸显示屏上的像素点个数
- DPI: 最早指的是打印机在单位面积上打印的墨点数, 墨点越多越清晰
3.3 移动端适配方案
3.3.1 viewport 适配
- 为什么做
viewport适配?手机厂商在生产手机的时候大部分手机默认页面宽度为980px
手机实际视口宽度都要小于980px , 如: iphone6 为 375px
开发需求: 需要将 980px 的页面完全显示在手机屏幕上且没有滚动条
- 实现:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3.3.2 rem 适配
-
为什么做
rem适配?机型太多, 不同的机型屏幕大小不一样
需求: 一套设计稿的内容在不同的机型上呈现的效果一致, 根据屏幕大小不同的变化, 页面中的内容也相映变化
-
实现:
function remRefresh() {
let clientWidth = document.documentElement.clientWidth;
// 将屏幕等分 10 份
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px';
}
window.addEventListener('pageshow', () => {
remRefresh()
})
// 函数防抖
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})
- 第三方库实现:
lib-flexible + px2rem-loader
