前端之微信小程序的开发之旅(1)

一、小程序的认识
微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用
小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在 2017 年 4 月做
了改进，由原来的 1M 提升到 2M；
二、小程序可以干什么？
1.同 App进行互补，提供同 app类型的功能，比 app使用方便简洁
2.通过扫一扫或者在微信搜索即可下载
3.用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
4.连接线上线下
5.开发门槛低，成本低
三、首先注册一个小程序账号
四、开发小程序储备知识
4.1、官网：https://mp.weixin.qq.com/
Flex布局简介
什么是 flex布局？
1)Flex是 Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
2)任何一个容器都可以指定为 Flex布局。
3)display: ‘flex’
flex属性:
flex-direction:
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
4.2、移动端相关知识
物理像素
1)屏幕的分辨率
2)设备能控制显示的最小单元，可以把物理像素看成是对应的像素点
4.2.2 设备独立像素 & css像素
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS像素,只是在 android机中 CSS像素就不叫”CSS像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。
4.2.3 dpr比 & DPI & PPI
1)dpr:设备像素比，物理像素/设备独立像素 = dpr，一般以 Iphon6的 dpr为准 dpr =2
2)PPI:一英寸显示屏上的像素点个数
3)DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰
移动端适配方案
4.3viewport适配
为什么做 viewport适配
1）手机厂商在生产手机的时候大部分手机默认页面宽度为 980px
2）手机实际视口宽度都要小于 980px，如: iphone6为 375px
3）开发需求：需要将 980的页面完全显示在手机屏幕上且没有滚动条
实现：

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

4.3.2 rem适配
为什么做 rem适配
1）机型太多，不同的机型屏幕大小不一样
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

五、小程序的特点
1）没有 DOM
2）组件化开发：具备特定功能效果的代码集合
3）体积小，单个压缩包体积不能大于 2M，否则无法上线
小程序的四个重要的文件
1）.js
2）.wxml —> view结构 ----> html
3）.wxss —> view样式 -----> css
4）. json ----> view数据 -----> json文件
小程序适配方案: rpx (responsive pixel响应式像素单位)
1）小程序适配单位： rpx
2）规定任何屏幕下宽度为 750rpx
3）小程序会根据屏幕的宽度不同自动计算 rpx值的大小
4）Iphone6下： 1rpx = 1物理像素 = 0.5px
六、全局配置： app.json
作用：用于为整个应用进行选项设置
链接:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.
html

页面配置: 页面名称.json
作用:用于为指定的页面进行配置
链接:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.
html

注意事项:页面配置的优先级高于全局配置
sitemap配置: sitemap.json
作用：用于被微信搜索爬取页面
链接:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.
html

例如：

七、小程序框架接口
App
1)全局 app.js中执行 App()
2)生成当前应用的实例对象
3)getApp()获取全局应用实例
2）Page
1）页面.js中执行 Page()
2）生成当前页面的实例
3）通过 getCurrentPages获取页面实例