一、前言

（1）小程序没有DOM对象，一切基于组件化

• 组件：把重复的代码提取出来合并成为一个个组件
• 模块：分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，独立管理，每个模块有很多接口，可供调用

（2）小程序的四个重要的文件

1. *.js

2. *.wxml —> view结构 ----> html

3. *.wxss —> view样式 -----> css

4. *. json ----> view 数据 -----> json文件

（3）Flex布局简介（推荐）

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

Flex属性

flex-direction:

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

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

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

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

学习地址 : http://www.runoob.com/w3cnote/flex-grammar.html

（4）小程序适配方案

Iphon6： 1rpx = 1物理像素 = 0.5px

微信官方提供的换算方式：

1. 以iPhone6的物理像素个数为标准: 750;

2. 1rpx = 目标设备宽度 / 750 * px;

3. 注意此时底层已经做了viewport适配的处理，即实现了理想视口

二、环境准备

（1）注册账号

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

（2）获取APPID

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

（3）开发⼯具

下载地址

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

三、第⼀个微信⼩程序

（1）打开微信开发者⼯具

注意第⼀次登录的时候需要扫码登录

（2）新建⼩程序项⽬

（3）填写项⽬信息

（4）成功