微信小程序小二云音乐

基础知识

前提：需要注册一个微信小程序

1.Flex布局简介

1.1 什么是flex布局

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

（2）：任何一个容器可以指定为Flex布局。

（3）：display：‘flex’

1.2Flex属性

(1):flex-direction:

row(默认值):主轴为水平方向，起点在左端。

row-reverse：主轴在水平方向，起点在右端。

column： 主轴在垂直方向，起点在上沿。

column-reverse: 主轴在垂直方向，起点在下沿。

1.3学习地址

菜鸡教程：Flex 布局语法教程 | 菜鸟教程 (runoob.com)

2.移动端相关知识

2.1 物理像素

（1）：屏幕的分辨率。

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

2.2设备独立像素&CSS像素

(1):设备独立像素（也叫密度无关像素），也可以认为是计算机坐标系统的一个点，这个点代表一个可以由程序使用并控制的虚拟像素，然后由相关系统转换为物理像素。

2.3 dpr比 &DPI&PPI

（1）：dpr：设备像素比，物理像素/设备独立像素=dpr，一般以iphone6的dpr为准 dpr=2

（2）：PPI：一英寸显示屏的像素点个数

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

3.移动端适配方案

3.1 viewport适配方案（原因）

（1）：手机厂商在生产手机的时候大部分手机默认页面宽度都是980px

（2）：手机实际视口宽度都要小于980px

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

（4）：实现：

<meat name="viewport" content="width=device-width,inital-scale=1.0">

3.2rem适配

(1):为什么做rem适配

（a）：机型太多，不同屏幕的手机大小不一样。

（b）：需求：一套设计稿的内容炸不同的机型上呈现的效果一样，根据屏幕的大小不同的变化，页面中的内容也相应变化。

3.3 实现

lib-flexible + px2rem-loader

4.小程序特点

4.1 概述

（1）：没有DOM

（2）：组件化开发，具备特定功能效果的代码集合

（3）：体积小，单个压缩包不能大于2M，否则无法上线

（4）：小程序的4个重要的文件 (a)*.js

(b)*.wxss-->view 结构 -->html

(c)*.json-->view 数据 -->json文件

(d)*.wxss-->view 样式 -->css

（5）：小程序的适配方案：rpx（响应式像素单位）

 (a): 小程序适配单位： rpx
 
 (b):规定任何屏幕下宽度为750rpx
 
 (c):小程序会根据屏幕的宽度不同自动计算rpx值得大小
 
 (d):1rpx=1物理像素=0.5px

5.2小程序配置

(1):全局配置： app.json （a）：作用：用于为整个应用进行选项设置（b）：配图：

微信小程序 day1

微信小程序 小二云音乐