微信小程序学习笔记一 小程序介绍 & 前置知识

微信小程序学习笔记一

1. 什么是小程序?

1. 2017年度百度百科十大热词之一
2. 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用
   
   ( 张小龙对其的定义是无需安装, 用完即走, 实际上是需要安装的, 只不过小程序的体积特别小, 下载速度很快, 用户感觉不到下载的过程)
3. 小程序刚发布的时候要求压缩包的体积不能大于1M, 否则无法通过, 在2017年4月做了改进, 由原来的1M提升到2M
4. 2017年 1月9日0点, 万众瞩目的微信第一批小程序正式低调上线

---

2. 小程序可以干什么?

1. 同App进行互补, 提供同app类型的功能, 比app使用方便简介
2. 通过扫一扫活着微信搜索即可下载
3. 用户使用频率不高, 但又不得不用的功能软件, 目前看来小程序是首选
4. 连接线上线下
5. 开发门槛低, 成本低

---

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 物理像素

1. 屏幕的分辨率
2. 设备能控制显示的最小单位, 可以把物理像素看成是对应的像素点

3.2.2 设备独立像素 & css像素

设备独立像素(也叫密度无关像素), 可以认为是计算机坐标系统中的一个点, 这个点代表一个可以由程序使用并控制的虚拟像素(比如: css像素, 知识android机中css 像素就不叫 "css像素"了, 而是叫 "设备独立像素"), 然后由相关系统转换为物理像素

3.2.3 dpr比 & DPI & PPI

1. dpr: 设备像素比, 物理像素/设备独立像素 = dpr, 一般以iphone6 的dpr 为准 dpr = 2
2. PPI: 一英寸显示屏上的像素点个数
3. DPI: 最早指的是打印机在单位面积上打印的墨点数, 墨点越多越清晰
   
   
   
   
   
   

---

3.3 移动端适配方案

3.3.1 viewport 适配

1. 为什么做 viewport适配?
   
   手机厂商在生产手机的时候大部分手机默认页面宽度为980px
   
   手机实际视口宽度都要小于980px , 如: iphone6 为 375px
   
   开发需求: 需要将 980px 的页面完全显示在手机屏幕上且没有滚动条
2. 实现:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

3.3.2 rem 适配

1. 为什么做 rem适配?
   
   机型太多, 不同的机型屏幕大小不一样
   
   需求: 一套设计稿的内容在不同的机型上呈现的效果一致, 根据屏幕大小不同的变化, 页面中的内容也相映变化

2. 实现:

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)
})

1. 第三方库实现:
   
   lib-flexible + px2rem-loader