目 录

模块1　跨平台开发概述　1
【学习目标】　1
任务1.1　前端开发基础　1
1.1.1　Web标准　1
1.1.2　HTML文件　2
1.1.3　HBuilderX编辑器　4
任务1.2　JavaScript程序　6
1.2.1　编写JavaScript程序　6
1.2.2　JavaScript 基本语法　7
1.2.3　常用浏览器对象　9
模块小结　11
课后习题　11
课后实训　12
模块2　ES6新特性　13
【学习目标】　13
任务2.1　学习let命令与const命令　13
2.1.1　let命令　13
2.1.2　const命令　17
任务2.2　使用函数　19
2.2.1　函数参数　19
2.2.2　箭头函数　22
任务2.3 导出与导入模块　23
2.3.1　命名导出与导入　23
2.3.2　默认导出与导入　24
2.3.3 使用模块对象　25
任务2.4　掌握解构赋值　25
2.4.1　基本用法　26
2.4.2　解构赋值的用途　27
模块小结　28
课后习题　28
课后实训　29
模块3　Vue实例　30
【学习目标】　30
任务3.1　了解Vue的基本概念　30
3.1.1　前端开发框架比较　31
3.1.2　Vue创始人介绍　32
3.1.3　Vue的数据模型　32
3.1.4　Vue的优势　33
任务3.2　显示数据内容　34
3.2.1 创建与运行Vue项目　35
3.2.2　数据选项　36
【任务实现】　40
任务3.3 设计模拟购物车　42
3.3.1　方法选项　42
3.3.2 计算选项　44
3.3.3 状态监听选项　45
【任务实现】　46
任务3.4　全面学习Vue实例　48
3.4.1　Vue实例的生命周期　48
3.4.2　Vue实例属性与方法　49
模块小结　52
课后习题　52
课后实训　52
模块4　Vue指令　54
【学习目标】　54
任务4.1　设计用户注册程序　54
4.1.1　v-text指令　55
4.1.2　v-html指令　56
4.1.3　v-model指令　57
4.1.4　条件渲染指令　60
【任务实现】　63
任务4.2　设计图像浏览程序　64
4.2.1　v-bind指令　64
4.2.2　绑定style属性　66
4.2.3　绑定class属性　68
【任务实现】　72
任务4.3　优化图像浏览程序　74
4.3.1　v-for指令　74
4.3.2　v-on指令　79
【任务实现】　82
模块小结　83
课后习题　83
课后实训　84
模块5　Vue组件　85
【学习目标】　85
任务5.1　设计购物车程序　85
5.1.1　组件定义与注册　86
5.1.2　组件模板　89
5.1.3　选项作用域　90
5.1.4　组件的生命周期　91
【任务实现】　92
任务5.2　设计搜索框组件　93
5.2.1　props选项　94
5.2.2　插槽　96
【任务实现】　99
任务5.3　设计订单生成程序　101
5.3.1　$emit()方法　101
5.3.2　动态组件　104
【任务实现】　106
模块小结　109
课后习题　109
课后实训　110
模块6　uni-app编程　111
【学习目标】　111
任务6.1　开发uni-app项目　111
6.1.1　搭建uni-app项目开发环境　112
6.1.2　创建与运行uni-app项目　113
6.1.3　uni-app项目结构　114
6.1.4　打包为原生App　117
【任务实现】　118
任务6.2　学习uni-app编程规范　120
6.2.1　互相引用　120
6.2.2　CSS语法　120
6.2.3　条件编译　122
6.2.4　scss语法　123
任务6.3　设计应用底部导航程序　124
6.3.1　Vue页面　125
6.3.2　tabBar导航　129
【任务实现】　130
任务6.4　设计登录程序　132
6.4.1　交互反馈　132
6.4.2　数据缓存　133
6.4.3　路由　134
【任务实现】　137
模块小结　139
课后习题　139
课后实训　139
模块７　uni-app组件　140
【学习目标】　140
任务7.1　设计图书分类导航　140
7.1.1　view组件　141
7.1.2　scroll-view组件　142
【任务实现】　146
任务7.2　设计轮播程序　150
7.2.1　navigator组件　150
7.2.2　swiper组件　152
7.2.3　swiper-item组件　153
【任务实现】　154
任务7.3　设计宫格显示程序　155
7.3.1　uni-section组件　156
7.3.2　uni-icons组件　157
7.3.3　uni-grid组件　159
【任务实现】　161
任务7.4　使用数据组件　162
7.4.1　数据组件概述　162
7.4.2　数据组件的数据规范　163
模块小结　166
课后习题　166
课后实训　167
模块8　uview-plus组件　168
【学习目标】　168
任务8.1　使用uview-plus组件　168
8.1.1　uview-plus组件概述　169
8.1.2　安装与配置uview-plus组件　169
8.1.3　u-toast组件　171
【任务实现】　172
任务8.2　验证用户注册信息　173
8.2.1　u-form组件与u-form-item
组件　173
8.2.2　u-input组件　174
8.2.3　表单验证　177
【任务实现】　180
任务8.3　设计订单查看程序　181
8.3.1　u-tabs组件　182
8.3.2　u-loadmore组件　185
8.3.3　u-icon组件　188
【任务实现】　189
任务8.4　设计天气服务程序　192
8.4.1　Http请求　193
8.4.2　u-search组件　195
【任务实现】　196
模块小结　198
课后习题　198
课后实训　198
模块9　uCharts组件　199
【学习目标】　199
任务9.1　学习uCharts组件的基础
知识　　199
9.1.1　uCharts组件概述　199
9.1.2　使用uCharts组件　200
9.1.3　图表基本结构　201
任务9.2　绘制柱状图　201
9.2.1　qiun-data-charts组件　201
9.2.2　定义柱状图的数据　202
9.2.3　柱状图的属性　206
9.2.4　配置柱状图　207
任务9.3　绘制折线图　211

9.3.1　基本绘制　212
9.3.2　配置折线图　214
【任务实现】　216
任务9.4　绘制其他图表　217
9.4.1　绘制饼图　217
9.4.2　绘制混合图　220
模块小结　222
课后习题　222
课后实训　222