Table of Contents
第一章 微信小程序介绍
1. 本课程的特点
- 一边做实战项目，一边学习小程序的基础知识
- 文件路径
- 页面生命周期
- 常用组件
- api使用方式
- 演进式讲解，不只教你“这样做”，关键是为什么
- 循序渐进的学习，从简单到复杂，从本地数据到网络数据
2. 什么是微信小程序
- 张小龙这样定义：
- 不需要下载安装即可使用
- 用户“用完即走”，不用关心是否安装太多应用
- 应用将无处不在，随时可用
3. 小程序的特点
- 小程序适合做简单的、用完即走的应用
- 小程序适合低频的应用
- 小程序适合性能要求不高的应用
4. 对开发者的影响
- 短期内将提升市场对JavaScript程序员的需求量
- 小程序是0基础开发者很好的入门平台
- 小程序不可以使用（部分）现在已经存在的JavaScript组件库
- 开发环境和开发逻辑极其简单，非常适合新手入门
5. 小程序开发需要什么基础
- JavaScript
- ES6
- CSS
第二章 小程序环境搭建与开发工具介绍
1. 申请appid
- 到微信公众平台注册一个小程序账号
2. 下载并安装微信开发者工具
- 下载安装微信开发者工具
- 打开微信开发者工具
- 新建项目，填入 appId
3. 微信开发工具UI简介与小程序调试方法
- 查看小程序快捷键：代码区按f1
第三章 从一个简单的“欢迎“页面开始小程序之旅
1. 本章内容简介
- 小程序文件类型与目录结构
- 注册小程序页面，view、Image、Text等组件的基本用法
- Flex弹性盒子模型
- 移动端分辨率及小程序自适应单位RPX
2. 官方种子项目与小程序页面
- 小程序的一个页面基本由四个文件组成：page.js, page.wxml, page.wxss, page.json
3. 应用程序级别文件
- app.js, app.json, app.wxss。这三个文件属于应用程序级别的文件
4. 小程序的页面层级结构
- 旧版本限制5层，新版本10层，以后可能更多。一般来说，小程序的需求不会超过5层。
5. 新建welcome欢迎页面
- 可以一个个文件新建，也可以新建page自动生成。但注意，报错的状态下无法新建page自动生成。
6. 我的第一个页面
- app.json 配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
- 在 app.json 文件 pages 字段数组直接新增页面也是可以的，小程序会自动添加相应的文件夹和文件
7. 认识小程序的rpx
- 建议用
<view>结合<text>组件代替<button>组件。 - 小程序中图片
<image>默认值是：width: 300px height: 225px - 小程序的 rpx 可以自适应不同的机型
8. 使用flex（弹性盒子）快速布局
- flex-direction 设置分布轴线， align-items 设置对齐方式
9. 制作项目启动页之小程序app.json基础配置
- 配置导航栏背景色：
// app.json
{
……
"window": {
"navigationBarBackgroundColor": "#b3d4db"
}
}
第四章 第二个页面：新闻阅读列表
1. 第四章课程简介
- Swiper组件
- App.json里的关于导航栏、标题配置
- Page页面与应用程序的生命周期
- 数据绑定（核心知识）
- 数据绑定的运算与逻辑
- AppData区域介绍
- 事件与事件对象
- 缓存
- 列表渲染（核心知识）
- Template模板的使用（核心知识）
2. 使用Swiper组件构建轮播图
<swiper>+<swiper-item>组件即可实现轮播图。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html- 决定轮播图高度的是
swiper组件，而不是swiper-item
3. Swiper组件属性设置
- 显示指示点：indicator-dots
- 自动轮播：autoplay
- 轮播间隔：interval
- 纵向轮播：vertical
4. 全局配置与页面配置
- 页面配置只能配置 window 中的部分项目，所以配置具体页面导航栏的时候不需要包裹在 window 字段中
5. 构建新闻列表（上）
6. 构建欣慰列表（下）
- 水平方向优先使用 rpx
- 布局优先使用 flex 弹性布局
7. JS 与小程序 Page 页面生命周期
- 小程序生命周期函数：
- onLoad–监听页面加载
- onReady–监听页面初次渲染完成
- onShow–监听页面显示
- onHide–监听页面隐藏
- onUnload–监听页面卸载
- 页面相关事件处理函数：
- onPullDownRefresh–监听用户下拉动作
- onReachBottom–页面上拉触底事件的处理函数
- onShareAppMessage–用户点击右上角分享
8. 数据绑定概念和基础
- 小程序的数据是单项绑定的
9. setData 方法绑定数据
- 改变数据需要调用 this.setData 方法
10. 数据绑定的扩展用法
- 双大括号里面的表达式会进行运算
11. 条件渲染和列表渲染
- 条件指令：wx:if
- 列表指令：wx:for，wx:for-item，wx:for-index。wx:for-item 的默认值就是‘item’，wx:for-index 的默认值就是‘index’
<view>和<block>的区别：<view>是一个组件，会在页面上做渲染；<block>不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。
12. 小程序的事件机制——捕捉与回调
- 小程序的跳转有两种：wx.navigateTo 和 wx.redirectTo，区别是：wx.navigateTo 可以返回，而 wx.redirectTo 没有返回。实际上，wx.navigateTo 会隐藏之前的页面，而 wx.redirectTo 会卸载之前的页面。
13. 小程序的事件机制——catch 与 bind
- 小程序事件有 bind 和 catch 两种方式，区别是：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
第五章 小程序的模板化与模块化
1. 将业务中的数据分离到单独的数据文件中
- alt + shift + F 快速格式化。wxml文件需要右键格式化。
2. 使用 require 方法加载 js 模块文件
3. template 模板的使用
<template>标签用来定义模板，is 属性指定模板名字- 模板的引入用
<import>标签，src 属性指向模板地址
4. 关于新版自定义组件的说明
- 自定义组件由 json、wxml、wxss、js 4个文件组成。https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
第六章 构建新闻详情页面
1. 从文章列表跳转到新闻详情页面（组件自定义属性及获取属性）
- 自定义属性以 data- 开头
2. 先静后动，构建新闻详情页面样式
3. 配置全局导航栏颜色
4. 使用数据填充新闻详情页面
- 小程序数据更新需要通过 this.setData() ，否则视图不会更新。
5. 缓存 Storage 的基本用法
- 设置缓存的方法：wx.setStorage（异步） 和 wx.setStorageSync（同步）。第一个参数是键名，第二个参数是键值
- 获取缓存：wx.getStorage（异步） 和 wx.getStorageSync（同步）。
- 删除缓存：wx.removeStorage（异步） 和 wx.removeStorageSync（同步）。
- 删除所有缓存：wx.clearStorage（异步） 和 wx.clearStorageSync（同步）。
- 缓存上限10M
6. 文章缓存出错修复方案
7. 使用缓存实现文章收藏功能
8. 交互反馈 wx.showToast
- wx.showToast
- 可以调用 wx.hideToast() 直接取消 Toast
9. 操作反馈 wx.showModal
- wx.showModal 模态弹窗，不操作就不消失
10. 交互反馈 wx.showActionSheet
11. 同步异步方法对比
12. playBackgroundAudio-音乐播放基本实现
- 基础库1.20 以后的 playBackgroundAudio 已经弃用。
- 替代 api：backgroundAudioManager https://developers.weixin.qq.com/miniprogram/dev/api/BackgroundAudioManager.html
13. 加入不同的音乐，个性化音乐播放
14. 修复音乐播放闪退的问题
- 原因是音乐地址失效，更换地址即可
15. 监听播放事件完善音乐播放
- 监听音乐实例的 onPlay 和 onPause 事件，同步全局操作和数据
16. 应用程序生命周期
- 在页面里调用 getApp() 可以获得 app.js 里的数据
- 应用程序生命周期：
- onLaunch–小程序初始化完成时调用
- onShow–当小程序启动，或从后台进入前台显示时调用
- onHide–当小程序从前台进入后台调用
- onError–当小程序脚本错误，或者 api 调用失败时，会触发此钩子并带上错误信息
17. 继续完善音乐播放
- 为了从后台进入详情页 banner 正确显示，需要将播放状态保存到全局变量。（app.js）
18. 音乐播放最终章
19. 真机如何清除缓存与 template 内路径问题
- 在真实环境中，微信并没有提供清除缓存的按钮，所以需要自己在应用内实现，然后调用 wx.clearStorage 这样的 api
- template 文件里的路径不是根据文件自身查找的，而是根据引用文件的路径查找的。所以，template 文件中尽量使用绝对路径。
第七章 开始制作电影资讯页面
1. 重要补充说明（关于 API 调用 403）–2018.01
- 豆瓣api调整。doubanBase 调整为 “http://t.yushu.im”
2. Banner 轮播图跳转文章详情
- 利用事件冒泡在
<swiper>组件上绑定 bindtap
3. 三种主要的路由 API
- wx.navigateTo
- wx.redirectTo
- wx.switchTab
4. 给项目加入 tab 选项卡
- 如果加了选项卡，那么跳转到有选项卡的页面需要使用 wx.switchTab
- wx.switchTab 只能跳转到带有选项卡的页面
5. 完善 tab 选项卡
- iconPath 和 selectedIconPath 都要设置
- 当 position 属性为 top 的时候，tabBar 会位于上方，并且没有图标
6. 电影页面嵌套 template 分析
7. 3 个嵌套 template 标签的实现
8. stars template 的样式实现
9. movie template 的样式实现
10. movie-list-template 的样式实现
11. RESTful API 简介及调用豆瓣 API
- RESTful 是一种接口形式，比如 json 格式。
- api 的粒度和语义影响 api 的质量
- 小程序网络请求方法：wx.request。content-type 要设置为 json
12. 获取正在热映、即将上映和 Top250 的数据
13. 电影页面数据绑定（上）
- 小程序 wx.request 的 success 回调即使用箭头函数也无法通过 this 来调用方法。所以，还是指定 this 比较好。
14. 电影页面数据绑定（下）
- 小程序模板中的变量名称实际上就是调用模板处传入的变量名
15. 星星评分组件的实现
- 判断指令：wx:if wx:elif wx:else
16. 更换电影分类标题
第八章 更多电影及电影搜索页面的实现
1. 更多电影页面的编写思路与电影类型获取
- 小程序自定义组件的创建和使用
- 小程序自定义组件的 wxml 文件的包裹容器不能用
<template>
2. 动态设置导航栏标题
- 设置导航栏标题：
wx.setNavigationBarTitle({
title: title
})
3. 更多电影页面加载数据
4. 实现 movie-grid template
<scroll-view>组件无法使用 flex 布局
5. 实现上滑加载更多数据
<scroll-view>需要给定高度才能触发 onscrolltolower 事件<scroll-view>需要设定为可视区高度的时候具体数据不好把握，这时可以用页面的 onReachBottom 钩子代替。- 自定义组件触发事件需要用 triggerEvent 方法–https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
6. 设置 loading 状态
- wx.showNavigationBarLoading()–显示加载
- wx.hideNavigationBarLoading()–不显示加载
7. 实现下拉刷新数据
- 在页面 json 文件里配置 enablePullDownRefresh 为 true
- 在 onPullDownRefresh 钩子函数里处理刷新
- wx.stopPullDownRefresh() 可以取消刷新
8. backgroundColor 到底设置的哪里的颜色
- json 文件配置项 backgroundColor 实际上设置的是页面区域以外的背景色。比如下拉时头部的背景色。页面切换时的背景色。
第九章 构建电影详情页面
1. 电影搜索页面构建（上）
2. 电影搜索页面构建（下）
- 122100版本开始增加了 bindconfirm 事件，响应键盘的完成事件。
3. 修复音乐播放完成后图标状态没有复位的bug
- 监听实例的 onStop 事件，编写相关逻辑
4. 编写电影详情页面（上）
5. 编写电影详情页面（下）
6. 图片的缩放与裁剪
- 微信提供了图片的处理功能。
<image>标签的 mode 属性有12种模式，其中4中是缩放模式，9种是裁剪模式–https://developers.weixin.qq.com/miniprogram/dev/component/image.html <image>mode 的默认模式是 scaleToFill，即宽高拉伸填充
7. 新版本更新后的补充章节
8. 编写电影详情页面骨架
9. 完成电影详情页面（上）
- -webkit-filter: blur(20px)—这样的css 样式可以实现模糊效果
10. 完成电影详情页面（下）
- wx.previewImage 可以实现图片弹窗查看（图片相册）
第十章 Form表单类组件与Map地图组件
第十一章 扩展内容ES6在小程序中的使用与微信小程序后台账号配置
1. 小程序常见问题
- 130400 版本后
<scroll-view>组件无法触发 onPullDownRefresh 事件。
2. 小程序中的 ES6 Class
3. 使用 Module 和 Class 提取封装一个 Movie 对象
4. 箭头函数、致谢与再见
第十二章 0.15.152900 版本重要API、功能讲解
1. 新版本重要特性总览
- 更新内容
- 支持绝大多数ES6 API
- 开放蓝牙、卡券收获地址等接口能力
- 新增“场景值”这个概念
- 若干原有接口的丰富
- 微信公众号与小程序强绑定
- 公众号菜单可以直接打开小程序
- 公众号模板消息可打开小程序
- 公众号关联小程序时，可下发通知消息
- 移动App可分享小程序页面
- 扫描非小程序二维码可打开小程序
2. 选择用户收获地址API
- wx.chooseAddress
3. 对 login、getUserInfo 等接口的改动与理解
- wx.login
- 不需要授权，静默登陆
- 登陆状态有时效性
- 多久失效由微信服务器决定
- wx.checkSession 可查看是否失效
- wx.getUserInfo
- 获取用户信息（明文信息，加密信息）
- 没更新前，无论用户是否登录，都可以获取加密信息
- 新增一个参数–withCredentials
- 为true时，必须要求用户已经登录（调用过wx.login）且状态没有失效
- 为false时，不需要用户登录，但无法获取用户加密信息
4. 对用户设置界面与动态分享详解
- wx.openSetting–打开让用户对开发者授权的界面–只显示曾要求用户授权的权限
- wx.showShareMenu()–显示当前页面的转发按钮，wx.hideShareMenu()–隐藏转发按钮
5. 场景值获取方式与应用举例
- 场景值：表示进入小程序的途径。在 onLaunch 和 onShow 的参数中可以找到。