微信小程序 01

1.1 什么是小程序？

---

小程序 是目前 最火热的 手机应用。而这个 所谓的 小程序，泛指的 是 微信小程序。

• 什么意思呢？

就是 附加在 微信 这个 APP 上面的 程序！（张小龙 对其的定义是：无需安装，用完即走。其实实现这个无需安装的原理在于 小程序本身的体积太小，现在的网速又这么快，所以用户根本体验不到下载和安装的过程！）

小程序 在最开始 被研发出来后，要求 项目程序的 压缩包 体积不能大于 1MB，否则无法审核通过！而在 2017 年 4月份做了更改，由原来的 1MB 提升到了 2MB。

也因为 这样，所以 我们 与 后端服务器 进行联合的时候，采用的是接口的方式。也就是说 我们要让 后端 暴露一些接口，让我们可以通过 联网访问的方式 去 进行数据的交互！这样我们占用的 体积大小就会 少很多很多。

---

1.2 小程序可以干什么？

1. 可以 与 传统的 APP 进行互补，可以实现 大多数 APP 都能实现的功能。然而 它却 比 APP 方便简洁，体积极小！（比如买票的小程序、健康码的小程序 等等）
2. 小程序 解决了 当下 APP 市场很大的一个问题！就是 该 APP 用户使用的频率不是很高，但还 不得不去使用，那么 小程序 就绝对是 首选了。
3. 开发门槛低，成本低。发布 线上线下极其简单。开发后 可能 就能 让大家 都去使用了。不需要 联系什么 某些手机的商城应用，然后 要求上架 等等这些子事。

---

1.3.1 开发环境部署

1. 注册微信小程序

微信小程序官网

2. 安装 IDE 开发工具

微信开发者工具

提取码：8zbl

3. Flex 布局 方式 的了解
   
   Flex 布局的学习

4. 移动端相关的知识

• 物理像素

答：屏幕的分辨率、设备能控制显示的最小单元，可以把物理像素看成是对应的像素点。

• 设备独立像素 和 css 像素 （这两个 是 虚拟的像素）

答：设备独立像素（也叫密度无关像素），可以认为是 计算机坐标 系统 中 的一个点，这个点代表了一个 可以由程序使用并控制的虚拟像素（比如：CSS 像素，当然 在 android 机 中 它也被 叫做 “设备独立像素”），然后 由 相关系统 转换为 物理像素，进而 实现 操控。

• DPR、DPI、PPI

5. 移动端适配方案

• viewport 适配

为什么 做 viewport 适配

答：手机厂商在生产收集的时候 大部分手机默认 页面 宽度 为 980 px，但 手机 实际的 视口 宽度 都要小于 980 px，比如 iphone6 的 是 375 px。特别是 我们 在开发的时候，有一个基本需求是必须要做到的，那就是 将 980 的页面 完全显示到 手机屏幕上 且 没有滚动条。

实现

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

意思是 将视觉视口的宽度 赋值给 页面宽度，然后 按照 1:1 比例 缩放。

• rem 适配

为什么 做 rem 适配

答： 机型太多呀，不同手机的机型 屏幕大小都不一样。而且 在开发APP 或者小程序的时候，有一个基本需求，那就是 你的一套设计稿的内同 必须 能在 不同的机型上 呈现的效果 大差不差呀。那 肯定 就要 根据 屏幕大小 来 进行 不同的 变化了，内容 也要 相应进行变化。

实现

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

上述两个 第三方的 库，也是可以 实现的。