一、创建项目
1. 准备工作
注册开发者账号
安装小程序开发工具
创建项目
2. 认识项目目录
pages 是存放所有视图的目录
utils 是存放工具类库的目录
app.js 是小程序的全局入口文件
app.json 是小程序的全局配置文件
app.wxss 是小程序的全局样式文件
project.config.json 是项目的配置文件
sitemap.json 是小程序的SEO优化文件，方便用户搜索到该小程序
3. app.json
pages里面注册的是视图
window 是全局窗口配置
backgroundTextStyle 设置文本样式
navigationBarBackgroundColor 设置导航栏背景
navigationBarTitleText 设置导航栏文本
navigationBarTextStyle 设置导航栏文本样式
style 设置样式级别，默认是v2
sitemapLocation 指明 sitemap.json 的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件
4. app.wxss
是小程序的全局样式文件，其实就是css文件
5. project.config.json
setting 里面的配置，也可以通过：详情-本地设置
6. 页面组成
xxx.wxml 是页面，相当于html文件，但是它里面不能写原生的html标签，只能写微信自己的组件。
xxx.wxss 是样式，相当于css文件。
xxx.js 是js文件，书写页面逻辑程序。
xxx.json 是配置文件，配置当前页面信息。
7. xxx.wxml
view组件，相当于html中的div标签。
text组件，相当于html中span标签。
swiper是滑块视图组件，它里面只能放swiper-item组件。
image是图片组件，注意：小程序里面的图片最好全部采用网络图片，因为单个小程序打包后的代码总体积不能超过2MB。
通过插值表达式{{}}，可以执行显示data里面的数据。
wx:for指令用于循环数组数据，生成组件。
item就是循环出来的每一项，index是每一项对应的索引。
item和index可以重命名，方式是wx:for-item="XXX" wx:for-index="XXX"。
wx:key="index"，设置每一项唯一的标识。
bindtap是点击事件，组件通过data-xxx传递数据。
8. xxx.wxss
微信为了让页面里面的内容在各种设备上能够正常显示，提供了一种响应式单位rpx。
在iphone6尺寸中，1px==2rpx。
9. xxx.js
其实每个微信页面，就是一个Page()函数。该函数的参数是一个对象。
在Page()函数中添加页面的数据，方法等等。
页面中的数据，全部放到data中。
定义方法：
10. xxx.json
配置当前页面信息，用法根app.json一样。
二、tabBar&跳转
1. 条件判断
wx:if wx:elif wx:else 指令用于判断条件，满足条件显示上面的组件。
wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
直接在组件上绑定表达式：
2. tabBar
在app.json文件中添加tabBar节点。
color：tab上的文字默认颜色，仅支持十六进制颜色。
selectedColor：tab上的文字选中时的颜色，仅支持十六进制颜色。
backgroundColor：tab的背景色，仅支持十六进制颜色。
borderStyle：tabbar上边框的颜色， 仅支持 black / white。
position：tabBar的位置，仅支持 bottom / top。
custom：自定义tabBar。
list：tab的列表。
list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。
pagePath：页面路径，必须在 pages 中先定义。
text：tab 上按钮文字。
iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络 图片。当 position 为 top 时，不显示 icon。
3. 跳转
navigator组件，用于页面链接，默认只能跳转普通页面。
如果要跳转tabBar页面，需要设置open-type="switchTab"。
代码跳转：
跳转到普通页面
跳转到tabBar页面
使用方法跳转页面的好处是：在跳转之前可能需要做其他事情，比如：验证权限等等。
4. 确认框和消息框
确认框：
wx.showModal({
title:”标题”,
success:res=>{}
})
消息框：
wx.showToast({
title:”标题”,
duration:1000
})
5. 封装方法
确认框方法：
消息框方法：
获取事件参数的方法：
export 是ES6的导出语句。
将封装的方法放到util.js文件中
import是ES6的导入语句。
import {confirm,confirm,key,$msg} from '../../utils/util'。
将这些工具方法注册给wx对象
wx对象是微信小程序的全局对象，在任何地方都可以使用。
wx.msg =msg=msg
wx.confirm =confirm=confirm
wx.key =key=key
在app.js入口文件中导入
import './utils/util'
三、发起请求
1. scroll-view
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
scroll-x：允许横向滚动。
scroll-y：允许纵向滚动。
2. 发起请求
3. 封装方法
添加config配置
添加utils/request.js文件
在app.js文件中
4. wxs
新建filter.wxs文件，用于格式化时间
四、上拉下拉页面
1. 页面
2. 获取数据的方法
3. 下拉刷新
.json文件中设置允许下拉刷新
"enablePullDownRefresh": true
4. 上拉触底
5. 添加页面
6. 添加方法
7. 分类页面
8. 获取分类数据
9. 返回分类数据
10. 获取url参数
11. 显示详情
五、Vant组件库
1. 下载Vant Weapp
步骤一：npm包初始化
初始化包，自动生成package.json文件。
npm init
步骤二：通过 npm 安装
npm i @vant/weapp -S --production
步骤三：修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
步骤四：修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可。
步骤四：构建 npm 包
点击工具-->构建npm
并勾选本地设置-->使用npm模块选项
在.json文件中配置使用的组件，可以在全局中配置，也可以在单独页面中配置。