选择

判断

操作x3

第1章 微信小程序入门

（1）微信公众平台（教材P5-P6）

https://mp.weixin.qq.com/

注册、申请APPID

（2）微信开发者工具安装（教材P7-P8）

（3）小程序开发文档的使用

https://developers.weixin.qq.com/miniprogram/dev/framework/

（4）项目的创建与设置（教材P8-P14）

调试基础库：2.14.4、机型：iphone6、编译文件设置

第2章 微信小程序开发基础

所学案例：

（教材P36-P40）

（教材P40-P46）

（教材P46-P51）

第3章 音乐小程序项目

所学案例：（教材P54-P80）

第4章 婚礼邀请函项目

所学案例：（教材P82-P104）

第2章、第3章、第4章所学知识：

（一）全局配置文件app.json的编写（pages、window、tabBar）

教材P27-P29

Pages

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#pages

创建页面文件路径

window

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

导航栏背景颜色：navigationBarBackgroundColor

导航栏标题颜色：navigationBarTextStyle

导航栏标题文字内容：navigationBarTitleText

tabBar

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

页面底部tab栏：最少 2 个、最多 5 个 tab

（二）页面配置文件json的编写

导航栏背景颜色：navigationBarBackgroundColor

导航栏标题颜色：navigationBarTextStyle

导航栏标题文字内容：navigationBarTitleText

（三）页面背景设置（背景图片、渐变色背景）

l  背景图片

wxml:  <image src=”文件路径” class=”bj”></image>

wxss:.   .bj{

width:100vw;height:100vh:position:fixed;z-index:-1}

l  渐变色背景

wxss文件中定义

page{background: linear-gradient(45deg,#f00,#0f0);}

（四）列表渲染 wx:for、条件渲染 wx:if

说明：微信小程序view和block标签的区别

http://www.woaidaogu.com/web_ui/522.html

（五）常用组件

1、视图容器

view、swiper、swiper-item、scroll-view

2、基础内容

icon、text

3、表单组件

button、input、textarea、checkbox、checkbox-group、radio、radio-group、picker

4、导航

navigator

5、媒体组件

image、audio、video

6、地图组件

map

7、画布

canvas

（六）Node.js服务器的使用（自学）

工具安装、启用服务器

第5章

API应用案例（上）

所学案例：

教材P141-P143             教材P121-P141

教材P143-P150

第6章

API应用案例（下）

所学案例：

P156-P160     

P160-P165      P165-P169        P170-P177

常用API的使用

（一）基础

wx.getSystemInfo

（二）路由

wx.navigateTo：跳转到非tabbar页面

wx.navigateBack

wx.switchTab：跳转到tabbar页面

自学：wx.reLaunch、wx.redirectTo

（三）界面

l  交互

wx.showToast：消息提示框

wx.showModal：模态对话框

wx.showLoading：Loading提示框

wx.hideToast、wx.hideLoading

l  动画

wx.createAnimation

Animation.rotate、Animation.scale、Animation.skew、Animation.translate、Animation.step、Animation.export

（四）网络

发起请求：wx.request

下载：wx.downloadFile

上传：wx.uploadFile

WebSocket

（wx.sendSocketMessage、

wx.onSocketOpen

wx.onSocketMessage

wx.onSocketError

wx.onSocketClose

wx.connectSocket

wx.closeSocket）

（五）媒体

地图：wx.createMapContext

图片：wx.chooseImage、wx.previewImage

音频：wx.createInnerAudioContext

背景音频：wx.getBackgroundAudioManager

录音：wx.getRecorderManager

（六）位置

wx.openLocation

wx.getLocation

（七）画布

CanvasContext

（八）开发接口

收货地址： wx.chooseAddress

（九）设备

拨打电话：wx.makePhoneCall

第7章 小程序开发框架

（一）模板 （教材P180-P181）

（二）WeUI样式库（教材P187-P192）

自学：模块 （教材P179-P180）、自定义组件（教材P181-P184）

第8章 综合项目-点餐系统

（一）掌握《点餐系统》综合项目的设计过程（无服务器端）

1.项目的创建与初始化

2.使用常用组件实现各个页面框架的搭建

3.定义各个页面的样式

4.实现一些常用的功能

（二）Node.js服务器配置过程（自学）

1. 安装Node.js，使用npm安装nodemon

npm install -g nodemon

2. 在命令行中切换到本目录下，执行nodemon命令即可启动服务器

nodemon exp.js

点餐系统（Node.js服务器）

选择

判断

操作x3

第1章 微信小程序入门

（1）微信公众平台（教材P5-P6）

https://mp.weixin.qq.com/

注册、申请APPID

（2）微信开发者工具安装（教材P7-P8）

（3）小程序开发文档的使用

https://developers.weixin.qq.com/miniprogram/dev/framework/

（4）项目的创建与设置（教材P8-P14）

调试基础库：2.14.4、机型：iphone6、编译文件设置

第2章 微信小程序开发基础

所学案例：

（教材P36-P40）

（教材P40-P46）

（教材P46-P51）

第3章 音乐小程序项目

所学案例：（教材P54-P80）

第4章 婚礼邀请函项目

所学案例：（教材P82-P104）

第2章、第3章、第4章所学知识：

（一）全局配置文件app.json的编写（pages、window、tabBar）

教材P27-P29

Pages

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#pages

创建页面文件路径

window

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

导航栏背景颜色：navigationBarBackgroundColor

导航栏标题颜色：navigationBarTextStyle

导航栏标题文字内容：navigationBarTitleText

tabBar

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

页面底部tab栏：最少 2 个、最多 5 个 tab

（二）页面配置文件json的编写

导航栏背景颜色：navigationBarBackgroundColor

导航栏标题颜色：navigationBarTextStyle

导航栏标题文字内容：navigationBarTitleText

（三）页面背景设置（背景图片、渐变色背景）

l  背景图片

wxml:  <image src=”文件路径” class=”bj”></image>

wxss:.   .bj{

width:100vw;height:100vh:position:fixed;z-index:-1}

l  渐变色背景

wxss文件中定义

page{background: linear-gradient(45deg,#f00,#0f0);}

（四）列表渲染 wx:for、条件渲染 wx:if

说明：微信小程序view和block标签的区别

http://www.woaidaogu.com/web_ui/522.html

（五）常用组件

1、视图容器

view、swiper、swiper-item、scroll-view

2、基础内容

icon、text

3、表单组件

button、input、textarea、checkbox、checkbox-group、radio、radio-group、picker

4、导航

navigator

5、媒体组件

image、audio、video

6、地图组件

map

7、画布

canvas

（六）Node.js服务器的使用（自学）

工具安装、启用服务器

第5章

API应用案例（上）

所学案例：

教材P141-P143             教材P121-P141

教材P143-P150

第6章

API应用案例（下）

所学案例：

P156-P160     

P160-P165      P165-P169        P170-P177

常用API的使用

（一）基础

wx.getSystemInfo

（二）路由

wx.navigateTo：跳转到非tabbar页面

wx.navigateBack

wx.switchTab：跳转到tabbar页面

自学：wx.reLaunch、wx.redirectTo

（三）界面

l  交互

wx.showToast：消息提示框

wx.showModal：模态对话框

wx.showLoading：Loading提示框

wx.hideToast、wx.hideLoading

l  动画

wx.createAnimation

Animation.rotate、Animation.scale、Animation.skew、Animation.translate、Animation.step、Animation.export

（四）网络

发起请求：wx.request

下载：wx.downloadFile

上传：wx.uploadFile

WebSocket

（wx.sendSocketMessage、

wx.onSocketOpen

wx.onSocketMessage

wx.onSocketError

wx.onSocketClose

wx.connectSocket

wx.closeSocket）

（五）媒体

地图：wx.createMapContext

图片：wx.chooseImage、wx.previewImage

音频：wx.createInnerAudioContext

背景音频：wx.getBackgroundAudioManager

录音：wx.getRecorderManager

（六）位置

wx.openLocation

wx.getLocation

（七）画布

CanvasContext

（八）开发接口

收货地址： wx.chooseAddress

（九）设备

拨打电话：wx.makePhoneCall

第7章 小程序开发框架

（一）模板 （教材P180-P181）

（二）WeUI样式库（教材P187-P192）

自学：模块 （教材P179-P180）、自定义组件（教材P181-P184）

第8章 综合项目-点餐系统

（一）掌握《点餐系统》综合项目的设计过程（无服务器端）

1.项目的创建与初始化

2.使用常用组件实现各个页面框架的搭建

3.定义各个页面的样式

4.实现一些常用的功能

（二）Node.js服务器配置过程（自学）

1. 安装Node.js，使用npm安装nodemon

npm install -g nodemon

2. 在命令行中切换到本目录下，执行nodemon命令即可启动服务器

nodemon exp.js

点餐系统（Node.js服务器）