书刊介绍
《微信小程序开发入门与实践》内容简介
本书主要围绕Orange Can项目展开一系列编码工作,用几近真实的项目介绍小程序的各个API、组件用法,并附带一些小程序开发的经验、技巧以及常见的误区说明。整个Orange Can项目分为三部分:文章阅读、电影资讯以及设置。文章阅读包括文章列表、文章详情以及评论,通过编写文章阅读功能的代码,读者将学会swiper组件的裁剪模式、image组件的裁剪模式、缓存的使用技巧、列表渲染、数据绑定、模板、音乐播放、录音、分享等知识。除此之外,读者将对小程序页面的生命周期有一个大致了解。学习完这部分内容,读者将可以轻松做出一个内容型小程序应用。电影资讯功能主要介绍如何调用服务器数据及template模板的使用技巧。设置页面功能包含大量功能示例,包括获取硬件设备信息、罗盘与重力感应的应用、扫描二维码、用户登录、用户信息校验、解析用户加密数据、获取用户openId、发送模板消息、微信支付等功能。本书还提供部分服务器的PHP代码,主要供用户登录、校验、解析加密数据、模板消息、微信支付等功能调用。本书内容丰富、注重实战,讲解通俗易懂。适合小程序开发人员、培训机构和企业内部培训使用。
雷磊,8年研发及团队管理经验。曾就职于国内*的GIS公司互联网部门,任职研发经理。精通C#、Python、Java、JavaScript等语言与Web开发技术。工作之余经常撰写有关互联网技术、商业模式等文章,发表在各个TMT媒体上。微信小程序首批内测开发者,知乎专栏“小楼昨夜又秋风”作者。作品目录
内容简介
推荐序
我眼中的小程序
前
言
本书的特点与特色
小程序开发需要的前置技能
小程序开发难吗
处于早期阶段的小程序
本书与官方文档的区别
下载项目资源文件、源代码
如何阅读本书
微信官方开发者社区
致谢
第1章:微信小程序简介
1.1、什么是微信小程序
1.2、什么类型的应用适合用小程序开发
1.3、小程序与原生App(iOS、Android)的优劣对比
1.4、小程序会淘汰原生App吗
1.5、Web前端的未来
1.6、Web前端开发者与小程序
1.7、MINA框架与微信小程序
1.8、微信小程序beta测试版
第2章:小程序环境搭建与开发工具介绍
2.1、微信Web开发者工具下载及安装
2.2、新建第一个项目
2.3、微信Web开发者工具界面功能介绍
2.3.1、编辑选项卡
2.3.2、调试选项卡
2.3.3、项目选项卡
2.3.4、编译选项
2.3.5、后台选项
2.3.6、缓存选项
2.3.7、关闭选项
2.3.8、快速打开官方API文档
2.3.9、开发工具的更新
2.3.10、常用小程序快捷键
第3章:从第一个简单的“Welcome”页面开始小程序之旅
3.1、认识小程序的基本文件结构
3.2、开始动手编写第一个小程序页面
3.3、构建welcome页面的元素和样式
3.4、小程序所支持的CSS选择器
3.5、Flex布局
3.6、小程序自适应单位rpx简介
3.7、全局样式文件app.wxss
3.8、页面的根元素page
3.9、app.json中的window配置项
第4章:文章列表页面
4.1、文章列表页面元素分析及准备工作
4.2、swiper组件
4.3、Boolean值的陷阱
4.4、构建文章列表的骨架和样式
4.5、image组件的4种缩放模式与9种裁剪模式
4.5.1、scaleToFill
4.5.2、aspectFit
4.5.3、aspectFill
4.5.4、widthFix
4.5.5、9种裁剪模式
4.6、完成静态文章列表
4.7、.js文件的代码结构与Page页面的生命周期
4.8、数据绑定
4.8.1、初始化数据绑定
4.8.2、在哪里可以查看数据绑定对象
4.8.3、绑定复杂对象
4.8.4、数据绑定更新
4.9、列表渲染wx:for
4.10、配置单个页面导航栏背景色
4.11、从欢迎页面跳转到文章页面
4.11.1、事件
4.11.2、redirectTo与navigateTo
4.11.3、小程序最多只能有5层页面
4.11.4、冒泡事件与非冒泡事件
第5章:模块、模板与缓存
5.1、将文章数据从业务中分离
5.2、小程序的模块
5.3、小程序的模板化
5.4、消除template模板对外部变量名的依赖
5.5、include与import引用模板的区别
5.6、CSS的模块化
5.7、令人遗憾的模板化而非组件化
5.8、使用缓存在本地模拟服务器数据库
5.8.1、应用程序的生命周期
5.8.2、使用Storage缓存初始化本地数据库
5.8.3、缓存的强制清理及注意事项
5.9、编写缓存数据库操作类
5.10、使用缓存数据库操作类
5.11、使用ES6改写缓存操作类
5.12、完善文章数据
5.13、完整的data.js数据
第6章:文章详情页面
6.1、跳转到文章详情页面
6.2、不要在template上注册事件
6.3、页面间传递参数的3种方式
6.3.1、组件的自定义属性
6.3.2、通过dataset获取组件自定义属性
6.3.3、获取页面参数值
6.4、编译时设置初始化页面及参数
6.5、读取文章详情数据
6.6、文章id号的数据流向图
6.7、编写文章详情页面
6.8、垂直居中问题的经典解决方法
6.9、动态设置导航栏标题
6.9.1、使用配置文件配置导航栏标题
6.9.2、使用wx.setNavigationBarTitle(OBJECT)设置导航条
第7章:收藏、评论、点赞与计数功能
7.1、收藏、评论、点赞、计数功能准备工作
7.2、文章收藏功能
7.2.1、条件渲染:wx:if与wx:else
7.2.2、实现收藏点击功能
7.2.3、交互反馈wx:showToast
7.3、文章点赞功能
7.4、本地缓存的重要性及应用举例
7.5、支持文字、图片、拍照、语音上传的文章评论
7.6、文章评论页面的实现步骤与思路
7.7、获取并绑定文章评论数据
7.8、显示文章评论数据
7.9、实现图片预览
7.10、实现提交评论的界面
7.11、wx:if与hidden控制元素显示和隐藏
7.12、实现文字评论框和语音评论框的切换
7.13、input组件
7.14、bindinput事件
7.15、屏蔽评论关键字
7.16、实现自定义发送按钮
7.17、同时支持模拟器回车、真机点击“完成”发送评论
7.18、图片与拍照评论的界面实现
7.19、实现从相册选择照片与拍照
7.20、icon图片
7.21、删除已选择的图片
7.22、在小程序中使用CSS
3动画
7.23、实现图片评论的发送
7.24、实现语音消息的发送
7.25、实现语音消息的暂停与播放
7.26、用户授权
7.27、解决真机运行时评论页面滑动卡顿的问题
7.28、文章阅读计数功能
第8章:背景音乐播放
8.1、显示音乐播放图标
8.2、切换音乐播放图标
8.3、背景音乐播放的特点
8.4、实现单页面背景音乐播放
8.5、监听音乐播放
8.6、全局变量与全局音乐播放
8.7、音乐总控开关
8.8、显示音乐的封面图片
第9章:丰富文章页面
9.1、将页面分享给朋友和微信群
9.2、从swiper组件跳转到文章详情页面
9.3、使用小程序动画实现点赞特效
第10章:电
影
10.1、小程序的tab选项卡
10.2、电影页面介绍
10.3、编写豆瓣星星评分组件:stars-tpl模板
10.4、编写movie-tpl模板
10.5、编写movie-list-tpl模板
10.6、电影首页的骨架与样式
10.7、豆瓣电影API分析
10.8、电影首页的js编写
10.9、wx.request发送http/https请求
10.10、设置wx.request的超时时间
10.11、处理返回的电影数据
10.12、绑定处理后的电影数据
10.13、http和https在小程序中的使用说明
10.14、跳转到更多电影页面
10.15、编写movie-grid-tpl模板
10.16、编写“更多电影”页面
10.17、实现页面下拉刷新的“三部曲”
10.18、在模拟器中可执行下拉刷新但在真机中无法执行下拉刷新的常见错误
10.19、json中的backgroundColor配置的是哪里的颜色
10.20、实现上滑加载更多数据
10.21、动态设置导航栏loading图标
10.22、电影搜索
10.23、电影详情页面
10.24、电影详情页面的骨架和样式
10.25、编写电影详情页面的业务逻辑代码
10.26、预览电影海报
10.27、设置电影页面的导航栏标题
第11章:设
置
11.1、设置页面
11.2、获取用户基本信息
11.3、数据缓存的异步操作
11.4、获取系统信息
11.5、获取网络状态
11.6、获取当前位置信息与当前速度信息
11.7、使用微信内置地图查看位置信息
11.8、监听罗盘数据制作一个简易指南针
11.9、在小程序中实现摇一摇
11.10、扫
码
11.11、获取小程序页面二维码
11.12、下载并预览pdf、word等多种类型文档
第12章:开放接口
12.1、准备工作
12.2、用户登录
12.3、用户信息校验
12.4、解析用户加密数据获取openId及UnionId
12.5、模板消息
12.6、form表单及picker组件
12.7、发送模板消息
12.8、微信支付
12.9、真实的微信小程序登录状态维护
第13章:杂
项
13.1、wx:key
13.2、scroll-view组件:在js中控制滚动条
13.3、深入理解小程序的单向数据绑定机制
13.4、深入理解scroll-view组件的bindscrolltolower、lower-threshold属性
13.5、微信小程序发布流程