微信小程序开发(初级)

本书是腾讯云计算(北京)有限责任公司开发的"1+X"职业技能等级证书微信小程序开发(初级)的配套教材，是一本基于"项目导向，任务驱动"教学理念的实用性教材。本书突出职业教育教学改革思路，围绕小程序开发人员工作任务的实施过程来组织内容。本书共8个项目，项目1~3主要讲解HTML5、CSS3和JavaScript的基础知识和使用技巧，项目4介绍移动端网页开发，项目5―7介绍微信小程序文件结构、页面逻辑、数据绑定和页面渲染、小程序发布流程、小程序云开发基础，项目8介绍小程序常用组件和API。部分项目又细化为若个任务，每个任务配有"实操视频"，实现理实一体化。本书可作为中高职、应用型本科院校移动互联及计算机相关专业的教材，也可作为移动互联应用开发人员的自学指导书和社会培训用书。

项目1 制作新闻网站
项目情景 002
项目分析 002
学习目标 002
知识准备 003
1.HTML简介 003
2.HTML元素 004
项目实施 014
1.创建新闻首页和二级页面 014
2.添加新闻页面内容 014
3.添加二级页面内容 016
4.实现页面跳转功能 018
项目拓展 018
项目2 制作购物网站
项目情景 020
项目分析 020
学习目标 021
知识准备 021
1.CSS 简介 021
2.CSS 语法 023
3.CSS 选择器 023
4.CSS 常用样式 034
项目实施 044
1.创建文件 044
2.链接到外部样式文件 045
3.导航栏样式 045
4.左边栏 047
5.右边栏 050
6.底边栏 052
项目拓展 053
项目3 制作项目提成计算器
项目情景 056
项目分析 056
学习目标 057
知识准备 057
1.JavaScript 简介 057
2.JavaScript 基础知识 058
3.HTML DOM 069
项目实施 074
1.创建项目主体 074
2.CSS美化页面 075
3.业务逻辑功能实现 077
项目拓展 080
项目4 制作房屋装饰网站
项目情景 082
项目分析 082
学习目标 083
知识准备 083
1.HTML5简介 083
2.HTML5语义化标签 083
3.HTML5表单 086
项目实施 097
1.创建项目主体 097
2.顶部搜索栏 098
3.导航栏 099
4.创建房屋信息/音乐播放区块 100
项目拓展 101
项目5 体验小程序项目模板
项目情景 104
项目分析 104
学习目标 104
知识准备 104
1.小程序简介 104
2.小程序与普通页面的开发区别 105
3.小程序运行环境 105
4.开发者工具 105
5.工具类文件 113
项目实施 113
1.注册微信公众平台账号 113
2.安装开发者工具 117
3.创建小程序 117
项目拓展 118
项目6 制作ToDoList小程序
项目情景 120
项目分析 120
学习目标 121
任务1 开发ToDoList小程序 122
任务描述 122
知识准备 122
1.小程序视图组件（view） 122
2.scroll-view组件 123
3.小程序表单组件——输入框input 124
4.小程序表单组件——按钮button 126
5.小程序WXML——页面传参wx:for 130
6.小程序WXSS 132
7.JavaScript中的 Page ()函数 132
8.JavaScript交互 134
9.小程序API——setData函数 135
任务实施 135
1.初始化 135
2.添加输入框 136
3.添加保存按钮 138
4.把list存储的数据展示在页面 139
5.完整代码展示 141
任务2 发布ToDoList小程序 143
任务描述 143
知识准备 143
微信公众平台小程序发布流程 143
任务实施 146
1.开发者工具使用 146
2.微信公众平台 147
项目拓展 148
项目7 制作扩展版ToDoList小程序
项目情景 150
项目分析 150
1.列表的实现 150
2.数据的添加 151
学习目标 152
3.任务1 扩展ToDoList小程序功能 152
任务描述 152
1.列表页面 153
2.添加内容页面 153
3.详情页面 154
知识准备 154
1.WXML语法 154
2.WXML内容组件—— text（文本）标签 156
7.WXML内容组件——image（图片）标签 156
8.WXML表单组件——多行输入框textarea 158
5.wx.navigateTo 161
6.wx.navigateBack 163
3.wx.setNavigationBarTitle 163
8.wx.setStorageSync 164
9.wx.getStorageSync 165 10.wx.showToast 166
任务实施 167
1.初始化项目 167
2.列表页面列表展示 168
3.在列表页面添加页面入口 171
4.从列表页面data.list获取存储数据 172
5.列表页面整体代码 173
6.添加页面实现添加数据功能和存储 175
7.添加页面整体代码展示 180
8.详情页面 183
9.details.js文件 186
任务2 基于云开发制作ToDoList小程序 187
任务描述 187
知识准备 187
1.云开发 187
2.数据库 190
3.项目创建和目录 191
4.开发者工具——云开发使用 193
任务实施 193
1.数据库使用 193
2.数据库在页面中的使用 195
3.添加到数据库 195
4.整体代码展示 196
项目拓展 197
项目8 指南针小程序
项目情景 200
项目分析 200
学习目标 201
知识准备 201
1.罗盘API——stopCompass 201
2.罗盘API——startCompass 201
3.罗盘API——onCompassChange 202
4.罗盘API——offCompassChange 203
5.CSS的 transition属性 203
6.CSS的 animation属性 204
项目实施 205
1.创建项目 205
2.方位页面布局 207
3.指南针布局 209
4.指南针效果实现 211
5.罗盘销毁 212
项目拓展 213
参考文献 215