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

微信小程序学习笔记一

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布局?

  • FlexFlexible 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
上一篇:利用jQuery极简代码完成选中部分高亮显示效果


下一篇:flex实现元素从右上角开始依次往下布局【如果超出父元素高度,则往左边补齐】