微信小程序入门与实战

第一章 微信小程序介绍

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. 建议用 结合组件代替组件。

2. 小程序中图片默认值是：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. +组件即可实现轮播图。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. 和 的区别： 是一个组件，会在页面上做渲染；不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。

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 模板的使用