【微信小程序开发零基础入门】——微信小程序入门

一、小程序介绍

1.1.什么是小程序？

1. 2017 年度百度百科十大热词之一
2. 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用
   ( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特
   别小， 下载速度很快，用户感觉不到下载的过程 )
3. 小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在 2017 年 4 月做 了改进，由原来的 1M 提升到 2M；
4. 2017 年 1 月 9 日 0 点，万众瞩目的微信第一批小程序正式低调上线。

1.2. 微信⼩程序历史

（1）2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读了微信的四⼤价值观。张⼩⻰指出，
越来越多产品通过公众号来做，因为这⾥开发、获取⽤⼾和传播成本更低。拆分出来的服务号并没
有提供更好的服务，所以微信内部正在研究新的形态，叫「微信⼩程序」 需要注意的是，之前是叫
做 应⽤号
（2）2016年9⽉21⽇，微信⼩程序正式开启内测。在微信⽣态下，触⼿可及、⽤完即⾛的微信⼩程序引
起⼴泛关注。腾讯云正式上线微信⼩程序解决⽅案，提供⼩程序在云端服务器的技术⽅案。
（3）2017年1⽉9⽇，微信推出的“⼩程序”正式上线。“⼩程序”是⼀种⽆需安装，即可使⽤的⼿
机“应⽤”。不需要像往常⼀样下载App，⽤⼾在微信中“⽤完即⾛”。

1.3.小程序可以干什么？

1. 同 App 进行互补，提供同 app 类型的功能，比 app 使用方便简洁
2. 通过扫一扫或者在微信搜索即可下载
3. 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
4. 连接线上线下
5. 开发门槛低， 成本低

1.4.疯狂的微信⼩程序

1. 微信⽉活已经达到10.82亿。其中55岁以上的⽤⼾也达到6300万
2. 信息传达数达到450亿，较去年增⻓18%;视频通话4.1亿次,增⻓100%
3. ⼩程序覆盖超过200+⾏业，交易额增⻓超过6倍，服务1000亿+⼈次,创造出了5000亿+的商业价值

1.5. 还有其他的⼩程序 不容忽视

1. ⽀付宝⼩程序
2. 百度⼩程序
3. QQ⼩程序
4. 今⽇头条 + 抖⾳⼩程序

1.6. 官⽅微信⼩程序体验

二、小程序开发资料

开发微信⼩程序之前，必须要准备好相应的环境
2.1. 相关资料

1. 官网
   https://mp.weixin.qq.com/
2. 微信开发工具
   3.下载地址
   https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315

2.2. 注册小程序账号

1. 有账号
   
2. 无账号
   建议使用全新的邮箱，没有注册过其他小程序或者公众号的。
   访问注册⻚⾯，耐⼼完成注册即可。
   
   2.3. 获取APPID

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后， 可登录，然后获取APPID。
登录，成功后可看到如下界⾯ 然后复制你的APPID,悄悄的保存起来，不要给别⼈看到😄。

2.4. 开发⼯具
官网下载或者用我提供的也可以：
链接：https://pan.baidu.com/s/1mFyzXvDvunL0zrpo_-uViQ
提取码：26jx

微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。
但是由于编码的体验不算好，因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码
vs code 负责敲代码， 微信编辑工具 负责预览

三、第⼀个微信⼩程序

3.1. 打开微信开发者⼯具
注意 第⼀次登录的时候 需要扫码登录

3.2. 新建⼩程序项⽬

3.3. 填写项⽬信息

3.4. 成功

3.5.微信开发者⼯具介绍
详细的使⽤，可以查看官⽹

四、开发小程序储备知识

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
2. PPI: 一英寸显示屏上的像素点个数
3. DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰