微信小程序學習筆記一 小程序介紹 & 前置知識

微信小程序學習筆記一

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

3. 第三方庫實現:
   lib-flexible + px2rem-loader