微信小程序
第 1 章 什么是小程序?
-
2017 年度百度百科十大热词之一
-
微信小程序,简称小程序,英文名 Mini Program,是一种不需要下载安装即可使用的应用
( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特
别小, 下载速度很快,用户感觉不到下载的过程 ) -
小程序刚发布的时候要求压缩包的体积不能大于 1M,,否则无法通过,在 2017 年 4 月做
了改进,由原来的 1M 提升到 2M; -
2017 年 1 月 9 日 0 点,万众瞩目的微信第一批小程序正式低调上线。
第 2 章 小程序可以干什么?
- 同 App 进行互补,提供同 app 类型的功能,比 app 使用方便简洁
- 通过扫一扫或者在微信搜索即可下载
- 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选
- 连接线上线下
- 开发门槛低, 成本低
第 3 章 小程序开发资料
3.1 相关资料
- 官网:https://mp.weixin.qq.com/
- 微信开发工具
开发工具 IDE 文件夹中获取
3) 下载地址
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315
3.2 注册小程序账号
- 有账号
- 无账号
第 4 章 开发小程序储备知识
4.1 Flex 布局简介
4.1.1 什么是 flex 布局?
-
Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
-
任何一个容器都可以指定为 Flex 布局。
-
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 物理像素
- 屏幕的分辨率
- 设备能控制显示的最小单元,可以把物理像素看成是对应的像素点
4.2.2 设备独立像素 & css 像素
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代
表一个可以由程序使用并控制的虚拟像素(比如:CSS 像素,只是在 android 机中 CSS 像素就
不叫”CSS 像素”了而是叫”设备独立像素”),然后由相关系统转换为物理像素。
4.2.3 dpr 比 & DPI & PPI
- dpr: 设备像素比,物理像素/设备独立像素 = dpr, 一般以 Iphon6 的 dpr 为准 dpr = 2
使用iphone6的真实物理像素为2*独立像素
-
PPI: 一英寸显示屏上的像素点个数
-
DPI:最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰
4.3移动端 适配方案
4.3.1 viewport 适配
- 为什么做 viewport 适配
- a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px
- b) 手机实际视口宽度都要小于 980px,如: iphone6 为 375px
- c) 开发需求: 需要将 980 的页面完全显示在手机屏幕上且没有滚动条
- 实现:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
width:视觉视控
device-width:布局视控
initial-scale:缩放比列
上面的代码:将视觉视控=布局视控,并且缩放比为1
视觉视控:看到手机屏幕窗口的大小
布局视控:针对网页
完美视控:视觉视控=布局视控
4.3.2 rem 适配
一套设计方案,在各种设备屏幕上等比例,通用
rem=root erm
,根据节点大小
- 为什么做 rem 适配
a) 机型太多,不同的机型屏幕大小不一样
b) 需求: 一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不
同的变化,页面中的内容也相应变化 - 实现:
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)
})
- 第三方库实现
lib-flexible + px2rem-loader
第 5 章 小程序 特点
5.1 小程序特点概述
- 没有 DOM
- 组件化开发: 具备特定功能效果的代码集合
- 体积小,单个压缩包体积不能大于 2M,否则无法上线
- 小程序的四个重要的文件
a) *.js
b) *.wxml —> view 结构 ----> html
c) *.wxss —> view 样式 -----> css
d) *. json ----> view 数据 -----> json 文件 - 小程序适配方案: rpx (responsive pixel 响应式像素单位)
a) 小程序适配单位: rpx
b) 规定任何屏幕
下宽度为750rpx
c) 小程序会根据屏幕的宽度不同自动计算 rpx 值的大小
d) Iphone6 下: 1rpx = 1 物理像素 = 0.5px
5.2 小程序 配置
5.2.1 全局配置 : app.json
一些jsAPI方法
-
作用: 用于为整个应用进行选项设置
-
链接:
a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
-
配图:
5.2.2 页面配置: 页面名称.json
- 作用: 用于为指定的页面进行配置
- 链接:
a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html - 注意事项: 页面配置的优先级高于全局配置
- 配图:
5.2.3 sitemap 配置: sitemap.json
- 作用:用于被微信搜索爬取页面
- 链接:
a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html - 配图:
5.3 小程序框架接口
5.3.1 App
- 全局 app.js 中执行 App()
生成当前应用的实例对象
- getApp()获取全局应用实例
5.3.2 Page
- 页面.js 中执行 Page()
- 生成当前页面的实例
- 通过 getCurrentPages 获取页面实例