微信小程序学习笔记一

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

微信小程序学习笔记一 + 小程序介绍前置知识相关推荐

微信小程序学习笔记（小程序框架）
必看这个只是我的学习过程算是日记形式吧,过程是按微信的官方文档的循序来,从指南中的小程序框架开始,指南中这一节之前还有页面配置,目录结构,还有很多介绍,没有写但是是非常重要的,一定要看,像指南后 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
小程序学习笔记（1）
小程序学习笔记(1) 以下是学习期间记录的笔记: 10-18号晚上学习笔记: 小程序实际上是需要下载安装的,只是很小,用户基本上觉察不到组件是具有一定的功能的代码的集合移动端适配: 物理像素:是图 ...
微信小程序学习5：小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
微信小程序学习4：小程序语法 - 事件绑定
微信小程序学习4:小程序语法 - 事件绑定事件绑定最简单的例子是,你设置一个按钮为可触发的,触发条件可以是点击,按压,长按等等.当然,如果你仅仅是设置了触发事件,而没有创建回调函数,是不会产生什么效 ...
微信小程序学习3：小程序语法-数据绑定
微信小程序学习3:小程序语法-数据绑定文章目录微信小程序学习3:小程序语法-数据绑定例子可以认为是声明变量,只不过小程序的变量要在规定位置声明. 官方文档https://developers. ...

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

微信小程序学习笔记一

1. 什么是小程序?

2. 小程序可以干什么?

3. 开发小程序储备知识

3.1 Flex布局简介

3.1.1 什么是flex布局?

3.1.2 flex 属性

3.2 移动端相关知识

3.2.1 物理像素

3.2.2 设备独立像素 & css像素

3.2.3 dpr比 & DPI & PPI

3.3 移动端适配方案

3.3.1 viewport 适配

3.3.2 rem 适配

微信小程序学习笔记一 + 小程序介绍前置知识相关推荐

最新文章

热门文章

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

微信小程序学习笔记一

1. 什么是小程序?

2. 小程序可以干什么?

3. 开发小程序储备知识

3.1 Flex布局简介

3.1.1 什么是flex布局?

3.1.2 flex 属性

3.2 移动端相关知识

3.2.1 物理像素

3.2.2 设备独立像素 & css像素

3.2.3 dpr比 & DPI & PPI

3.3 移动端适配方案

3.3.1 viewport 适配

3.3.2 rem 适配

微信小程序学习笔记一 + 小程序介绍 前置知识相关推荐

最新文章

热门文章

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

微信小程序学习笔记一 + 小程序介绍前置知识相关推荐