Day222.微信小程序入门 -微信小程序

微信小程序

第 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 相关资料

1. 官网：https://mp.weixin.qq.com/
2. 微信开发工具

开发工具 IDE 文件夹中获取
3) 下载地址
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315

3.2 注册小程序账号

1. 有账号

2. 无账号

第 4 章 开发小程序储备知识

4.1 Flex 布局简介

4.1.1 什么是 flex 布局？

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

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

3. display: ‘flex’

4.1.2 flex 属性

1) flex-direction:

row（默认值）：主轴为水平方向，起点在左端。

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

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

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

4.1.3 学习地址：

http://www.runoob.com/w3cnote/flex-grammar.html

4.2移动端相关知识

4.2.1 物理像素

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

4.2.2 设备独立像素 & css 像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代

表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在 android 机中 CSS 像素就

不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

4.2.3 dpr 比 & DPI & PPI

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

使用iphone6的真实物理像素为2*独立像素

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

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

---

4.3移动端 适配方案

4.3.1 viewport 适配

1. 为什么做 viewport 适配
2. a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px
3. b) 手机实际视口宽度都要小于 980px，如: iphone6 为 375px
4. c) 开发需求： 需要将 980 的页面完全显示在手机屏幕上且没有滚动条
5. 实现：

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

width：视觉视控

device-width：布局视控

initial-scale：缩放比列

上面的代码：将视觉视控=布局视控，并且缩放比为1

视觉视控：看到手机屏幕窗口的大小

布局视控：针对网页

完美视控：视觉视控=布局视控

---

4.3.2 rem 适配

一套设计方案，在各种设备屏幕上等比例，通用

rem=root erm，根据节点大小

1. 为什么做 rem 适配
   a) 机型太多，不同的机型屏幕大小不一样
   b) 需求： 一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不
   同的变化，页面中的内容也相应变化
2. 实现：

function remRefresh () {
    
     
    //获取屏幕的宽度
    let clientWidth = = document.documentElement.clientWidth; ;
    // 将屏幕等分10 份
    let rem = = clientWidth / 10; 
    //等分10份后，对应根节点对应的大小，也就是rem的值
    document.documentElement.style.fontSize = = rem + 'px'; 
    document.body.style.fontSize = '12px'; 
}
//pageshow页面显示事件
window.addEventListener( ('pageshow', () => {
    
     {
    
    
    remRefresh ()
})
// 函数防抖
let timeoutId; ;
window.addEventListener ('resize', () => {
    
    
    timeoutId && clearTimeout(timeoutId);
    timeoutId = setTimeout (() =>{
    
    
        remRefresh ()
    }, 300) 
})

---

3. 第三方库实现
   lib-flexible + px2rem-loader

第 5 章 小程序 特点

5.1 小程序特点概述

1. 没有 DOM
2. 组件化开发： 具备特定功能效果的代码集合
3. 体积小，单个压缩包体积不能大于 2M，否则无法上线
4. 小程序的四个重要的文件
   a) *.js
   b) *.wxml —> view 结构 ----> html
   c) *.wxss —> view 样式 -----> css
   d) *. json ----> view 数据 -----> json 文件
5. 小程序适配方案: rpx (responsive pixel 响应式像素单位)
   a) 小程序适配单位： rpx
   b) 规定任何屏幕下宽度为 750rpx
   c) 小程序会根据屏幕的宽度不同自动计算 rpx 值的大小
   d) Iphone6 下： 1rpx = 1 物理像素 = 0.5px

---

5.2 小程序 配置

5.2.1 全局配置 ： app.json

一些jsAPI方法

1. 作用： 用于为整个应用进行选项设置

2. 链接:

   a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

3. 配图:

5.2.2 页面配置: 页面名称.json

1. 作用: 用于为指定的页面进行配置
2. 链接:
   a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
3. 注意事项: 页面配置的优先级高于全局配置
4. 配图:

5.2.3 sitemap 配置: sitemap.json

1. 作用：用于被微信搜索爬取页面
2. 链接:
   a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
3. 配图:

5.3 小程序框架接口

5.3.1 App

1. 全局 app.js 中执行 App()
2. 生成当前应用的实例对象
3. getApp()获取全局应用实例

5.3.2 Page

4. 页面.js 中执行 Page()
5. 生成当前页面的实例
6. 通过 getCurrentPages 获取页面实例

---