微信小程序入门与实战

目录

第一章 微信小程序介绍

1. 本课程的特点

  1. 一边做实战项目,一边学习小程序的基础知识
    • 文件路径
    • 页面生命周期
    • 常用组件
    • api使用方式
  2. 演进式讲解,不只教你“这样做”,关键是为什么
  3. 循序渐进的学习,从简单到复杂,从本地数据到网络数据

2. 什么是微信小程序

  1. 张小龙这样定义:
    • 不需要下载安装即可使用
    • 用户“用完即走”,不用关心是否安装太多应用
    • 应用将无处不在,随时可用

3. 小程序的特点

  1. 小程序适合做简单的、用完即走的应用
  2. 小程序适合低频的应用
  3. 小程序适合性能要求不高的应用

4. 对开发者的影响

  1. 短期内将提升市场对JavaScript程序员的需求量
  2. 小程序是0基础开发者很好的入门平台
  3. 小程序不可以使用(部分)现在已经存在的JavaScript组件库
  4. 开发环境和开发逻辑极其简单,非常适合新手入门

5. 小程序开发需要什么基础

  1. JavaScript
  2. ES6
  3. CSS

第二章 小程序环境搭建与开发工具介绍

1. 申请appid

  1. 到微信公众平台注册一个小程序账号

2. 下载并安装微信开发者工具

  1. 下载安装微信开发者工具
  2. 打开微信开发者工具
  3. 新建项目,填入 appId

3. 微信开发工具UI简介与小程序调试方法

  1. 查看小程序快捷键:代码区按f1

第三章 从一个简单的“欢迎“页面开始小程序之旅

1. 本章内容简介

  • 小程序文件类型与目录结构
  • 注册小程序页面,view、Image、Text等组件的基本用法
  • Flex弹性盒子模型
  • 移动端分辨率及小程序自适应单位RPX

2. 官方种子项目与小程序页面

  1. 小程序的一个页面基本由四个文件组成:page.js, page.wxml, page.wxss, page.json

3. 应用程序级别文件

  1. app.js, app.json, app.wxss。这三个文件属于应用程序级别的文件

4. 小程序的页面层级结构

  1. 旧版本限制5层,新版本10层,以后可能更多。一般来说,小程序的需求不会超过5层。

5. 新建welcome欢迎页面

  1. 可以一个个文件新建,也可以新建page自动生成。但注意,报错的状态下无法新建page自动生成。

6. 我的第一个页面

  1. app.json 配置:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
  2. 在 app.json 文件 pages 字段数组直接新增页面也是可以的,小程序会自动添加相应的文件夹和文件

7. 认识小程序的rpx

  1. 建议用 <view>结合<text>组件代替<button>组件。
  2. 小程序中图片<image>默认值是:width: 300px height: 225px
  3. 小程序的 rpx 可以自适应不同的机型

8. 使用flex(弹性盒子)快速布局

  1. flex-direction 设置分布轴线, align-items 设置对齐方式

9. 制作项目启动页之小程序app.json基础配置

  1. 配置导航栏背景色:
// app.json
{
  ……
  "window": {
    "navigationBarBackgroundColor": "#b3d4db"
  }
}

第四章 第二个页面:新闻阅读列表

1. 第四章课程简介

  1. Swiper组件
  2. App.json里的关于导航栏、标题配置
  3. Page页面与应用程序的生命周期
  4. 数据绑定(核心知识)
  5. 数据绑定的运算与逻辑
  6. AppData区域介绍
  7. 事件与事件对象
  8. 缓存
  9. 列表渲染(核心知识)
  10. Template模板的使用(核心知识)

2. 使用Swiper组件构建轮播图

  1. <swiper>+<swiper-item>组件即可实现轮播图。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
  2. 决定轮播图高度的是swiper组件,而不是swiper-item

3. Swiper组件属性设置

  1. 显示指示点:indicator-dots
  2. 自动轮播:autoplay
  3. 轮播间隔:interval
  4. 纵向轮播:vertical

4. 全局配置与页面配置

  1. 页面配置只能配置 window 中的部分项目,所以配置具体页面导航栏的时候不需要包裹在 window 字段中

5. 构建新闻列表(上)

6. 构建欣慰列表(下)

  1. 水平方向优先使用 rpx
  2. 布局优先使用 flex 弹性布局

7. JS 与小程序 Page 页面生命周期

  1. 小程序生命周期函数:
    • onLoad–监听页面加载
    • onReady–监听页面初次渲染完成
    • onShow–监听页面显示
    • onHide–监听页面隐藏
    • onUnload–监听页面卸载
  2. 页面相关事件处理函数:
    • onPullDownRefresh–监听用户下拉动作
    • onReachBottom–页面上拉触底事件的处理函数
    • onShareAppMessage–用户点击右上角分享

8. 数据绑定概念和基础

  1. 小程序的数据是单项绑定的

9. setData 方法绑定数据

  1. 改变数据需要调用 this.setData 方法

10. 数据绑定的扩展用法

  1. 双大括号里面的表达式会进行运算

11. 条件渲染和列表渲染

  1. 条件指令:wx:if
  2. 列表指令:wx:for,wx:for-item,wx:for-index。wx:for-item 的默认值就是‘item’,wx:for-index 的默认值就是‘index’
  3. <view> 和 <block> 的区别:<view> 是一个组件,会在页面上做渲染;<block>不是一个组件,它仅仅是一个包装元素,只接受控制属性,不会在页面中做任何渲染。

12. 小程序的事件机制——捕捉与回调

  1. 小程序的跳转有两种:wx.navigateTo 和 wx.redirectTo,区别是:wx.navigateTo 可以返回,而 wx.redirectTo 没有返回。实际上,wx.navigateTo 会隐藏之前的页面,而 wx.redirectTo 会卸载之前的页面。

13. 小程序的事件机制——catch 与 bind

  1. 小程序事件有 bind 和 catch 两种方式,区别是:bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

第五章 小程序的模板化与模块化

1. 将业务中的数据分离到单独的数据文件中

  1. alt + shift + F 快速格式化。wxml文件需要右键格式化。

2. 使用 require 方法加载 js 模块文件

3. template 模板的使用

  1. <template>标签用来定义模板,is 属性指定模板名字
  2. 模板的引入用<import>标签,src 属性指向模板地址

4. 关于新版自定义组件的说明

  1. 自定义组件由 json、wxml、wxss、js 4个文件组成。https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

第六章 构建新闻详情页面

1. 从文章列表跳转到新闻详情页面(组件自定义属性及获取属性)

  1. 自定义属性以 data- 开头

2. 先静后动,构建新闻详情页面样式

3. 配置全局导航栏颜色

4. 使用数据填充新闻详情页面

  1. 小程序数据更新需要通过 this.setData() ,否则视图不会更新。

5. 缓存 Storage 的基本用法

  1. 设置缓存的方法:wx.setStorage(异步) 和 wx.setStorageSync(同步)。第一个参数是键名,第二个参数是键值
  2. 获取缓存:wx.getStorage(异步) 和 wx.getStorageSync(同步)。
  3. 删除缓存:wx.removeStorage(异步) 和 wx.removeStorageSync(同步)。
  4. 删除所有缓存:wx.clearStorage(异步) 和 wx.clearStorageSync(同步)。
  5. 缓存上限10M

6. 文章缓存出错修复方案

7. 使用缓存实现文章收藏功能

8. 交互反馈 wx.showToast

  1. wx.showToast
  2. 可以调用 wx.hideToast() 直接取消 Toast

9. 操作反馈 wx.showModal

  1. wx.showModal 模态弹窗,不操作就不消失

10. 交互反馈 wx.showActionSheet

11. 同步异步方法对比

12. playBackgroundAudio-音乐播放基本实现

  1. 基础库1.20 以后的 playBackgroundAudio 已经弃用。
  2. 替代 api:backgroundAudioManager https://developers.weixin.qq.com/miniprogram/dev/api/BackgroundAudioManager.html

13. 加入不同的音乐,个性化音乐播放

14. 修复音乐播放闪退的问题

  1. 原因是音乐地址失效,更换地址即可

15. 监听播放事件完善音乐播放

  1. 监听音乐实例的 onPlay 和 onPause 事件,同步全局操作和数据

16. 应用程序生命周期

  1. 在页面里调用 getApp() 可以获得 app.js 里的数据
  2. 应用程序生命周期:
    • onLaunch–小程序初始化完成时调用
    • onShow–当小程序启动,或从后台进入前台显示时调用
    • onHide–当小程序从前台进入后台调用
    • onError–当小程序脚本错误,或者 api 调用失败时,会触发此钩子并带上错误信息

17. 继续完善音乐播放

  1. 为了从后台进入详情页 banner 正确显示,需要将播放状态保存到全局变量。(app.js)

18. 音乐播放最终章

19. 真机如何清除缓存与 template 内路径问题

  1. 在真实环境中,微信并没有提供清除缓存的按钮,所以需要自己在应用内实现,然后调用 wx.clearStorage 这样的 api
  2. template 文件里的路径不是根据文件自身查找的,而是根据引用文件的路径查找的。所以,template 文件中尽量使用绝对路径。

第七章 开始制作电影资讯页面

1. 重要补充说明(关于 API 调用 403)–2018.01

  1. 豆瓣api调整。doubanBase 调整为 “http://t.yushu.im

2. Banner 轮播图跳转文章详情

  1. 利用事件冒泡在<swiper>组件上绑定 bindtap

3. 三种主要的路由 API

  1. wx.navigateTo
  2. wx.redirectTo
  3. wx.switchTab

4. 给项目加入 tab 选项卡

  1. 如果加了选项卡,那么跳转到有选项卡的页面需要使用 wx.switchTab
  2. wx.switchTab 只能跳转到带有选项卡的页面

5. 完善 tab 选项卡

  1. iconPath 和 selectedIconPath 都要设置
  2. 当 position 属性为 top 的时候,tabBar 会位于上方,并且没有图标

6. 电影页面嵌套 template 分析

7. 3 个嵌套 template 标签的实现

8. stars template 的样式实现

9. movie template 的样式实现

10. movie-list-template 的样式实现

11. RESTful API 简介及调用豆瓣 API

  1. RESTful 是一种接口形式,比如 json 格式。
  2. api 的粒度和语义影响 api 的质量
  3. 小程序网络请求方法:wx.request。content-type 要设置为 json

12. 获取正在热映、即将上映和 Top250 的数据

13. 电影页面数据绑定(上)

  1. 小程序 wx.request 的 success 回调即使用箭头函数也无法通过 this 来调用方法。所以,还是指定 this 比较好。

14. 电影页面数据绑定(下)

  1. 小程序模板中的变量名称实际上就是调用模板处传入的变量名

15. 星星评分组件的实现

  1. 判断指令:wx:if wx:elif wx:else

16. 更换电影分类标题

第八章 更多电影及电影搜索页面的实现

1. 更多电影页面的编写思路与电影类型获取

  1. 小程序自定义组件的创建和使用
  2. 小程序自定义组件的 wxml 文件的包裹容器不能用 <template>

2. 动态设置导航栏标题

  1. 设置导航栏标题:
wx.setNavigationBarTitle({
    title: title
})

3. 更多电影页面加载数据

4. 实现 movie-grid template

  1. <scroll-view> 组件无法使用 flex 布局

5. 实现上滑加载更多数据

  1. <scroll-view>需要给定高度才能触发 onscrolltolower 事件
  2. <scroll-view>需要设定为可视区高度的时候具体数据不好把握,这时可以用页面的 onReachBottom 钩子代替。
  3. 自定义组件触发事件需要用 triggerEvent 方法–https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

6. 设置 loading 状态

  1. wx.showNavigationBarLoading()–显示加载
  2. wx.hideNavigationBarLoading()–不显示加载

7. 实现下拉刷新数据

  1. 在页面 json 文件里配置 enablePullDownRefresh 为 true
  2. 在 onPullDownRefresh 钩子函数里处理刷新
  3. wx.stopPullDownRefresh() 可以取消刷新

8. backgroundColor 到底设置的哪里的颜色

  1. json 文件配置项 backgroundColor 实际上设置的是页面区域以外的背景色。比如下拉时头部的背景色。页面切换时的背景色。

第九章 构建电影详情页面

1. 电影搜索页面构建(上)

2. 电影搜索页面构建(下)

  1. 122100版本开始增加了 bindconfirm 事件,响应键盘的完成事件。

3. 修复音乐播放完成后图标状态没有复位的bug

  1. 监听实例的 onStop 事件,编写相关逻辑

4. 编写电影详情页面(上)

5. 编写电影详情页面(下)

6. 图片的缩放与裁剪

  1. 微信提供了图片的处理功能。<image>标签的 mode 属性有12种模式,其中4中是缩放模式,9种是裁剪模式–https://developers.weixin.qq.com/miniprogram/dev/component/image.html
  2. <image>mode 的默认模式是 scaleToFill,即宽高拉伸填充

7. 新版本更新后的补充章节

8. 编写电影详情页面骨架

9. 完成电影详情页面(上)

  1. -webkit-filter: blur(20px)—这样的css 样式可以实现模糊效果

10. 完成电影详情页面(下)

  1. wx.previewImage 可以实现图片弹窗查看(图片相册)

第十章 Form表单类组件与Map地图组件

第十一章 扩展内容ES6在小程序中的使用与微信小程序后台账号配置

1. 小程序常见问题

  1. 130400 版本后 <scroll-view> 组件无法触发 onPullDownRefresh 事件。

2. 小程序中的 ES6 Class

3. 使用 Module 和 Class 提取封装一个 Movie 对象

4. 箭头函数、致谢与再见

第十二章 0.15.152900 版本重要API、功能讲解

1. 新版本重要特性总览

  1. 更新内容
    • 支持绝大多数ES6 API
    • 开放蓝牙、卡券收获地址等接口能力
    • 新增“场景值”这个概念
    • 若干原有接口的丰富
  2. 微信公众号与小程序强绑定
    • 公众号菜单可以直接打开小程序
    • 公众号模板消息可打开小程序
    • 公众号关联小程序时,可下发通知消息
  3. 移动App可分享小程序页面
  4. 扫描非小程序二维码可打开小程序

2. 选择用户收获地址API

  1. wx.chooseAddress

3. 对 login、getUserInfo 等接口的改动与理解

  1. wx.login
    • 不需要授权,静默登陆
    • 登陆状态有时效性
    • 多久失效由微信服务器决定
  2. wx.checkSession 可查看是否失效
  3. wx.getUserInfo
    • 获取用户信息(明文信息,加密信息)
    • 没更新前,无论用户是否登录,都可以获取加密信息
    • 新增一个参数–withCredentials
    • 为true时,必须要求用户已经登录(调用过wx.login)且状态没有失效
    • 为false时,不需要用户登录,但无法获取用户加密信息

4. 对用户设置界面与动态分享详解

  1. wx.openSetting–打开让用户对开发者授权的界面–只显示曾要求用户授权的权限
  2. wx.showShareMenu()–显示当前页面的转发按钮,wx.hideShareMenu()–隐藏转发按钮

5. 场景值获取方式与应用举例

  1. 场景值:表示进入小程序的途径。在 onLaunch 和 onShow 的参数中可以找到。