本书是针对Web前端开发人员编写的一本快速掌握微信小程序开发的教程。本书通过通俗易懂的语言、丰富实用的案例,讲解微信小程序的开发技术。
全书共8章,第1章讲解微信小程序的入门知识,介绍微信小程序的优势和发展前景;第2、3章分别讲解微信小程序的页面制作和页面交互;第4、5章讲解微信小程序的常用API;第6章讲解综合项目“点餐”微信小程序;第7章讲解微信小程序开发进阶;第8章讲解基于uni-app开发的“短视频”微信小程序。
本书适合作为高等院校本、专科计算机相关专业的教材,也可作为广大计算机编程爱好者的参考书。
本书是《微信小程序开发实战》第1版教材的改版,对书中的知识讲解、案例都进行了改版升级,主要改动如下。
(1)目录结构更清晰,各章学习目标更明确,知识点讲解的顺序更加合理,通过恰当的需求引入,使内容更加通俗易懂。
(2)对整本书进行内容优化,整体分成基础篇(1~6章)和扩展篇(7~8章),基础篇主要讲解微信小程序原生框架的基础知识,通过第6章项目对基础知识进行综合实践;扩展篇讲解一些组件库和uni-app框架,通过第8章的项目对扩展知识进行综合实践。
(3)对技术点进行更新,移除了mpvue和WePY框架,增加了更流行的Vant Weapp组件库和uni-app框架。
(4)案例、项目等模块划分更加细致,每个功能点的实现按照开发步骤进行讲解。
第1章 微信小程序入门 1 1.1 初识微信小程序 1 1.1.1 什么是微信小程序 2 1.1.2 微信小程序的特点 2 1.1.3 微信小程序的发展前景 3 1.1.4 微信小程序的宿主环境 4 1.2 微信小程序开发前准备 5 1.2.1 注册微信小程序开发账号 5 1.2.2 获取微信小程序AppID 8 1.2.3 安装微信开发者工具 9 1.2.4 创建微信小程序项目 10 1.3 微信小程序开发基础 12 1.3.1 微信小程序的项目结构 12 1.3.2 微信小程序的页面组成 12 1.3.3 微信小程序的通信模型 13 1.4 微信开发者工具的使用 13 1.4.1 认识微信开发者工具 13 1.4.2 微信小程序的项目设置 17 1.4.3 微信小程序开发常用快捷键 18 1.5 微信小程序的项目成员 20 1.5.1 项目成员的组织结构 20 1.5.2 项目成员的分工 21 1.5.3 项目成员和体验成员的管理 21 1.5.4 项目成员的权限 22 1.5.5 添加项目成员和体验成员 23 1.6 微信小程序的发布上线 24 1.6.1 微信小程序的版本 24 1.6.2 微信小程序的上线流程 25 本章小结 27 课后练习 27 第2章 微信小程序页面制作 29 【案例2-1】个人信息 29 案例分析 30 知识储备 30 1. WXML简介 30 2. WXSS简介 31 3. 常用组件 31 4. 页面路径配置 31 5. view组件 32 6. image组件 33 7. rpx单位 35 8. 样式导入 35 案例实现 36 【案例2-2】本地生活 37 案例分析 37 知识储备 38 1. swiper和swiper-item组件 38 2. text组件 39 3. Flex布局 40 案例实现 42 【案例2-3】婚礼邀请函 45 案例分析 45 知识储备 47 1. 导航栏配置 47 2. 标签栏配置 47 3. vw、vh单位 49 4. video组件 49 5. 表单组件 50 案例实现 54 本章小结 64 课后练习 64 第3章 微信小程序页面交互 65 【案例3-1】比较数字大小 66 案例分析 66 知识储备 66 1. Page( )函数 66 2. 数据绑定 68 3. 事件绑定 69 4. 事件对象 70 5. this关键字 71 6. setData( )方法 71 7. 条件渲染 72 8. <block>标签 72 9. hidden属性 73 案例实现 73 【案例3-2】计算器 75 案例分析 75 知识储备 76 1. data-*自定义属性 76 2. 模块 77 案例实现 77 【案例3-3】美食列表 85 案例分析 85 知识储备 86 1. 列表渲染 86 2. 网络请求 87 3. 提示框 88 4. WXS 89 5. 上拉触底 91 6. 下拉刷新 91 案例实现 92 【案例3-4】调查问卷 97 案例分析 98 知识储备 98 双向数据绑定 98 案例实现 98 本章小结 102 课后练习 102 第4章 微信小程序常用API(上) 104 【案例4-1】音乐播放器 104 案例分析 104 知识储备 106 1. scroll-view组件 106 2. slider组件 107 3. <include>标签 108 4. 背景音频API 109 案例实现 110 【案例4-2】录音机 121 案例分析 121 知识储备 122 1. 录音API 122 2. 音频API 123 案例实现 124 【案例4-3】头像上传下载 127 案例分析 128 知识储备 128 1. 选择媒体API 128 2. 图片预览API 129 3. 文件上传API 130 4. 文件下载API 131 案例实现 131 【案例4-4】模拟时钟 134 案例分析 134 知识储备 134 1. canvas组件 134 2. 画布API 135 案例实现 137 本章小结 142 课后练习 143 第5章 微信小程序常用API(下) 144 【案例5-1】罗盘动画 144 案例分析 144 知识储备 145 动画API 145 案例实现 147 【案例5-2】用户登录 151 案例分析 151 知识储备 151 1. 登录流程时序 151 2. 登录API 153 3. 数据缓存API 154 4. 头像昵称填写 155 5. App( )函数 157 案例实现 158 【案例5-3】查看附近美食餐厅 162 案例分析 163 知识储备 163 1. 腾讯地图SDK 163 2. map组件 168 3. 地图API 169 4. 位置API 170 5. 路由API 170 案例实现 172 【案例5-4】在线聊天 176 案例分析 176 知识储备 177 1. WebSocket API 177 2. SocketTask 178 案例实现 179 本章小结 184 课后练习 184 第6章 综合项目——“点餐”微信小程序 186 【任务6-1】项目开发准备 186 开发背景 186 项目模块划分 187 项目初始化 187 【任务6-2】封装网络请求 189 任务分析 189 任务实现 189 【任务6-3】用户登录 192 任务分析 192 任务实现 193 【任务6-4】商家首页 196 任务分析 196 任务实现 196 【任务6-5】菜单列表页 201 任务分析 201 任务实现 202 【任务6-6】购物车 209 任务分析 209 任务实现 210 【任务6-7】订单确认页 220 任务分析 220 任务实现 220 【任务6-8】订单详情页 227 任务分析 227 任务实现 228 【任务6-9】订单列表页 231 任务分析 231 任务实现 232 【任务6-10】消费记录页 238 任务分析 238 任务实现 238 本章小结 241 课后练习 241 第7章 微信小程序开发进阶 243 【案例7-1】自定义标签栏 243 案例分析 244 知识储备 245 1. 创建自定义组件 245 2. 使用自定义组件 246 3. 使用自定义组件渲染标签栏 247 4. Vant Weapp组件库 248 案例实现 249 【案例7-2】电影列表 253 案例分析 253 知识储备 254 1. WeUI组件库 254 2. navigator组件 256 案例实现 257 【案例7-3】待办事项 262 案例分析 262 知识储备 263 1. uni-app框架概述 263 2. HBuilder X开发工具 264 3. 创建uni-app项目 265 4. uni-app项目的目录结构 266 5. 将uni-app项目运行至微信小程序 266 6. uni-app项目的全局配置文件 267 案例实现 268 本章小结 272 课后练习 272 第8章 uni-app项目——“短视频”微信小程序 274 【任务8-1】项目开发准备 274 项目展示 274 项目初始化 276 【任务8-2】公共头部区域 277 任务分析 277 任务实现 277 【任务8-3】导航栏区域 279 任务分析 279 任务实现 279 【任务8-4】轮播图区域 281 任务分析 281 任务实现 281 【任务8-5】视频列表区域 283 任务分析 283 任务实现 283 【任务8-6】视频详情页 285 任务分析 285 任务实现 286 本章小结 292 课后练习 292