1 | 小程序学习之旅

一、前言

注：本系列是本人自己在学习小程序开发记录的笔记，不喜勿喷

基础篇
1 | 小程序学习之旅
2 | 小程序的配置文件
3 | 小程序底部导航栏 tabBar 小实验
4 | 小程序模板语法——数据绑定
5 | 小程序模板语法——运算
6 | 小程序模板语法——列表渲染
7 | 小程序模板语法——条件渲染
8 | 小程序事件的绑定
9 | 小程序之样式WXSS
10 | 小程序之常用组件
11 | 小程序之自定义组件
12 | 自定义组件小实验
13 | 小程序生命周期

实战篇
1 | 小程序实战1之购物商场
2 | 小程序实战之项目搭建
3 | 小程序实战之首页设计（tabbar + 头部搜索框+ 轮播图 + 使用promise优化原生的请求 + 分类导航 + 楼层)
4 | 小程序实战之分类页面（点击菜单切换商品种类并且右侧菜单置顶 + 使用缓存技术）
5 | 小程序实战之使用es7的async语法优化接口
6 | 小程序实战之商品列表（搜索框 + tabs组件 + 启用上拉页面功能加载下一页 + 启用下拉刷新 + 添加全局的正在加载图标）
7 | 小程序实战之商品详情页面（轮播图&价格&名称&图文详情动态渲染 + 实现轮播图可放大预览图片 + 底部工具栏如购物车 + 收藏按钮状态）
8 | 小程序实战之购物车（收货地址授权 + 商品全选反选 + 总价格和总数量的计算 + 结算按钮功能）
9 | 小程序实战之支付（莫点，卑微的我还没有资格完成）
10 | 小程序实战之个人中心
11 | 小程序实战之商品收藏页面
12 | 小程序实战之搜索页面
13 | 小程序实战之意见反馈

二、小程序介绍

（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）成功