【微信小程序丨第三篇】小程序的基础知识储备

前言

微信小程序在无论在功能、文档及相关支持方面，都是优于前面几种微信账号类型，它提供了很多原生程序才有的接口，使得我们的小程序在很多方面突破H5页面应用的限制，更加接近原生程序的功能，因此微信小程序具有很大的前景想象力。

1、Flex 布局

Ⅰ-基本知识点概念

1. Flex基本概念

   1） Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

   2. 任何一个容器都可以指定为 Flex 布局。

   3. display: ‘flex’

4） 这部分是一阶段基础知识,可看文档学习

2. 在小程序中,通常使用代替
   作为容器来做布局–>代码示例在第一章的第三小节第三点

2、移动端相关知识点

Ⅰ-物理像素

1. 屏幕的分辨率

2. 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

Ⅱ-设备独立像素、 css 像素

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

Ⅲ-dpr比、DPI 、PPI

1. 概念

   1. dpr: 设备像素比，物理像素/设备独立像素 = dpr， 一般以 Iphon6 的 dpr 为准 dpr = 2

   2. PPI: 一英寸显示屏上的像素点个数

   3. DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

2. 不同机型对比表

3. 部分机型图示

3、移动端适配方案

这是个面试考点

Ⅰ-viewport 适配

1. 为什么做 viewport 适配 ?

   a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px

   b) 手机实际视口宽度都要小于 980px，如: iphone6 为 750px

   c) 开发需求需要将 980 的页面完全显示在手机屏幕上且没有滚动条

2. 代码实现

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

Ⅱ- rem 适配

1. 为什么做 rem 适配?

   a) 机型太多,不同的机型屏幕大小不一样

   b) 需求：一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不同的变化,页面中的内容也相应变化

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

---