前 言
自2016年9月21日微信小程序公布以来,微信技术群中关于小程序的讨论就没间断过,这是又一次创业的好机会,尤其是对中小企业扩大网络影响力很有利。我们在抓紧时间学习小程序的过程中,总结并实践了小程序的功能,并希望通过这本书传达给广大的读者。我们在编写过程中正临电商行业中最忙的几个月,双11、双12、圣诞节、元旦节等需求已经堆叠如山,我和边思白天处理公司需求,晚上编写书籍,几乎没有周末,这样坚持了几个月终于完成本书,直至交稿时才如释重负。
小程序刚发布不久,很多功能都还在不断更新中,本书内容在官方文档基础上进行补充说明,并给出实践案例,尝试给出现阶段尽可能完善的开发模式,适合小程序初学者入门。在小程序的学习过程中,我们做过很多尝试,这里我们仅仅提出了自己的一些实现方案和观点供大家参考。小程序整体推动还需要更多开发者参与,小程序还未正式公布前,便有很多公司及个人针对小程序研发过程中的痛点推出了各类三方框架,希望阅读本书后,大家也能提出自己的想法,积极参与小程序相关话题讨论,推动小程序研发方案优化与普及。
本书内容和组织结构
本书内容大致可分为三部分。
第一部分为基础部分,共3章,主要介绍小程序开发的基础知识。
第1章介绍微信小程序环境搭建、运行第一个小程序demo。
第2章介绍小程序核心知识,包括整体框架运行原理、规则,每个文件的作用,以及WXML与WXSS。
第3章介绍CSS布局基础,讲解了盒子模型、浮动、定位以及Flex布局。
第二部分为组件和API,共2章,主要讲解小程序组件、API相关知识。
第4章介绍小程序组件相关知识,主要内容包括视图容器、基础组件、表单组件、导航、媒体组件、地图、画布等。
第5章介绍小程序API相关知识,主要内容包括网络、媒体、文件、数据缓存、位置、设备、界面、开放接口等。
第三部分为案例实践,共5章,通过实际案例介绍如何开发小程序应用,包括一些思路和框架,以及部分代码和实现技巧。
第6章介绍如何开发豆瓣电影小程序,主要讲解一个最简单小程序的代码结构。
第7章介绍如何开发驾考小程序,主要讲解如何利用第三方API创建小程序引用。
第8章介绍如何开发打赏小程序,主要讲解小程序支付流程。
第9章介绍如何开发日程表小程序。
第10章介绍如何开发多点商城,主要讲解如何架构一个复杂小程序项目。本书创作时间较短,如有疏漏,恳请各位读者斧正。
致谢
在这里感谢那些一直支持我们的人,感谢韩鑫、杨凯等公司领导对本书写作的支持,让我能空出时间投入到书籍编写,感谢吴怡编辑的辛勤工作,感谢龙伟湖对本书案例UI设计的友情支持,感谢杨帆、王庆平、许彬、张磊、范彩霞等同事在工作期间对我的各种支持,感谢罗东、杨小英等同事在这段时间为我分担工作,谢谢大家,正是因为你们的支持,才有了本书的面世。
最后特别感谢我的爱人张舒,一直相信我、支持我,一直为我默默付出,让我能全身心投入到工作中。
目 录
前 言
第1章 初识小程序
1.1 简介
1.2 接入流程
1.2.1 注册小程序帐号
1.2.2 开发环境准备
1.3 第一个小程序
1.4 小结
第2章 小程序开发核心
2.1 简介
2.2 “徒手”创建小程序
2.3 框架主体文件
2.3.1 配置文件(app.json)
2.3.2 小程序逻辑(app.js)
2.3.3 全局样式(app.wxss)
2.4 框架页面文件
2.4.1 页面配置文件
2.4.2 页面逻辑文件(JavaScript)
2.4.3 页面结构文件(WXML)
2.4.4 页面样式文件(WXSS)
2.5 模块化
2.5.1 模块化简介
2.5.2 文件作用域
2.5.3 模块的使用
2.5.4 其他
2.6 小结
第3章 布局
3.1 基本知识
3.1.1 盒子模型
3.1.2 块级元素
3.1.3 行内元素
3.1.4 行内块元素
3.2 浮动和定位
3.2.1 浮动
3.2.2 定位
3.3 Flex布局
3.3.1 基本概念
3.3.2 容器属性
3.3.3 项目属性
3.4 小结
第4章 组件
4.1 组件定义及属性
4.2 视图容器
4.2.1 view组件
4.2.2 scroll-view组件
4.2.3 滑块视图组件
4.3 基础组件
4.3.1 icon
4.3.2 text组件
4.3.3 progress组件
4.4 表单组件
4.4.1 radio组件
4.4.2 checkbox组件
4.4.3 switch组件
4.4.4 label组件
4.4.5 slider组件
4.4.6 picker组件
4.4.7 picker-view组件
4.4.8 input组件
4.4.9 textarea组件
4.4.10 button组件
4.4.11 form组件
4.5 导航组件
4.6 媒体组件
4.6.1 image
4.6.2 audio
4.6.3 video
4.7 地图组件
4.8 画布组件
4.9 客服会话
4.10 小结
第5章 API
5.1 网络
5.1.1 发起HTTPS请求
5.1.2 上传、下载
5.1.3 WebSocket
5.2 媒体
5.2.1 图片
5.2.2 录音
5.2.3 音频播放控制
5.2.4 音乐播放控制
5.2.5 音频组件控制
5.2.6 视频
5.2.7 视频组件控制
5.3 文件
5.4 数据缓存
5.4.1 保存数据
5.4.2 获取数据
5.4.3 获取本地数据信息
5.4.4 删除数据
5.4.5 清空数据
5.5 位置
5.5.1 获取位置
5.5.2 选择位置
5.5.3 查看位置
5.5.4 地图组件控制
5.6 设备
5.6.1 系统信息
5.6.2 网络状态
5.6.3 重力感应
5.6.4 罗盘
5.6.5 拨打电话
5.6.6 扫码
5.7 界面
5.7.1 交互反馈
5.7.2 设置导航条
5.7.3 导航
5.7.4 动画
5.7.5 绘图
5.7.6 下拉刷新
5.8 开放接口
5.8.1 登录
5.8.2 用户信息
5.8.3 微信支付
5.8.4 模板消息
5.8.5 客服消息
5.8.6 分享
5.8.7 获取二维码
5.9 小结
第6章 案例分析——豆瓣电影
6.1 准备工作
6.1.1 豆瓣API
6.1.2 跳转层
6.2 技术架构
6.3 公共模块开发
6.3.1 业务逻辑层
6.3.2 公共模块
6.4 页面构建
6.4.1 首页
6.4.2 详情页
6.5 页面逻辑开发
6.5.1 首页
6.5.2 详情页
6.6 小结
第7章 案例分析——驾考
7.1 业务流程
7.2 项目架构
7.2.1 功能点分析
7.2.2 项目结构图
7.2.3 数据接口
7.3 代码分析
7.3.1 小程序底层代码封装
7.3.2 首页
7.3.3 答题页
7.3.4 答题结果页
7.4 小结
第8章 案例分析——打赏
8.1 登录
8.1.1 登录流程
8.1.2 源码讲解
8.2 支付
8.3 小结
第9章 案例分析——日程表
9.1 业务流程
9.2 项目架构
9.2.1 功能点分析
9.2.2 项目结构图
9.3 代码分析
9.3.1 日程详情页
9.3.2 首页
9.3.3 日程管理页
9.4 小结
第10章 案例分析——多点商城
10.1 需求分析
10.2 技术架构
10.2.1 主界面架构
10.2.2 业务逻辑层
10.2.3 代理网络请求接口
10.2.4 本地模拟接口数据
10.2.5 widgets
10.2.6 全局样式控制
10.3 页面实现
10.3.1 主界面实现
10.3.2 首页与活动页
10.3.3 分类页与搜索页
10.3.4 支付流程
10.3.5 其他页面
10.4 小结