微信小程序开发入门与实践

目 录第1章 微信小程序简介 11.1 什么是微信小程序 21.2 什么类型的应用适合用小程序开发 51.3 小程序与原生App（iOS、Android）的优劣对比 61.4 小程序会淘汰原生App吗 101.5 Web前端的未来 101.6 Web前端开发者与小程序 111.7 MINA框架与微信小程序 121.8 微信小程序beta测试版 12第2章 小程序环境搭建与开发工具介绍 132.1 微信Web开发者工具下载及安装 142.2 新建**个项目 142.3 微信Web开发者工具界面功能介绍 162.3.1 编辑选项卡 172.3.2 调试选项卡 192.3.3 项目选项卡 222.3.4 编译选项 232.3.5 后台选项 242.3.6 缓存选项 242.3.7 关闭选项 242.3.8 快速打开官方API文档 242.3.9 开发工具的更新 242.3.10 常用小程序快捷键 25第3章 从**个简单的“Welcome”页面开始小程序之旅 263.1 认识小程序的基本文件结构 273.2 开始动手编写**个小程序页面 283.3 构建welcome页面的元素和样式 313.4 小程序所支持的CSS选择器 353.5 Flex布局 363.6 小程序自适应单位rpx简介 393.7 全局样式文件app.wxss 423.8 页面的根元素page 423.9 app.json中的window配置项 44第4章 文章列表页面 474.1 文章列表页面元素分析及准备工作 484.2 swiper组件 504.3 Boolean值的陷阱 534.4 构建文章列表的骨架和样式 544.5 image组件的4种缩放模式与9种裁剪模式 574.5.1 scaleToFill 584.5.2 aspectFit 584.5.3 aspectFill 594.5.4 widthFix 604.5.5 9种裁剪模式 604.6 完成静态文章列表 614.7 .js文件的代码结构与Page页面的生命周期 644.8 数据绑定 684.8.1 初始化数据绑定 694.8.2 在哪里可以查看数据绑定对象 704.8.3 绑定复杂对象 714.8.4 数据绑定更新 724.9 列表渲染wx:for 764.10 配置单个页面导航栏背景色 794.11 从欢迎页面跳转到文章页面 804.11.1 事件 804.11.2 redirectTo与navigateTo 824.11.3 小程序*多只能有5层页面 834.11.4 冒泡事件与非冒泡事件 84第5章 模块、模板与缓存 855.1 将文章数据从业务中分离 865.2 小程序的模块 875.3 小程序的模板化 895.4 消除template模板对外部变量名的依赖 905.5 include与import引用模板的区别 925.6 CSS的模块化 935.7 令人遗憾的模板化而非组件化 945.8 使用缓存在本地模拟服务器数据库 955.8.1 应用程序的生命周期 955.8.2 使用Storage缓存初始化本地数据库 965.8.3 缓存的强制清理及注意事项 995.9 编写缓存数据库操作类 995.10 使用缓存数据库操作类 1015.11 使用ES6改写缓存操作类 1025.12 完善文章数据 1035.13 完整的data.js数据 104第6章 文章详情页面 1106.1 跳转到文章详情页面 1116.2 不要在template上注册事件 1126.3 页面间传递参数的3种方式 1136.3.1 组件的自定义属性 1136.3.2 通过dataset获取组件自定义属性 1146.3.3 获取页面参数值 1156.4 编译时设置初始化页面及参数 1156.5 读取文章详情数据 1166.6 文章id号的数据流向图 1176.7 编写文章详情页面 1186.8 垂直居中问题的经典解决方法 1216.9 动态设置导航栏标题 1226.9.1 使用配置文件配置导航栏标题 1226.9.2 使用wx.setNavigationBarTitle(OBJECT)设置导航条 123第7章 收藏、评论、点赞与计数功能 1247.1 收藏、评论、点赞、计数功能准备工作 1257.2 文章收藏功能 1277.2.1 条件渲染：wx:if与wx:else 1277.2.2 实现收藏点击功能 1287.2.3 交互反馈wx:showToast 1307.3 文章点赞功能 1317.4 本地缓存的重要性及应用举例 1337.5 支持文字、图片、拍照、语音上传的文章评论 1347.6 文章评论页面的实现步骤与思路 1347.7 获取并绑定文章评论数据 1357.8 显示文章评论数据 1407.9 实现图片预览 1457.10 实现提交评论的界面 1467.11 wx:if与hidden控制元素显示和隐藏 1527.12 实现文字评论框和语音评论框的切换 1527.13 input组件 1537.14 bindinput事件 1547.15 屏蔽评论关键字 1557.16 实现自定义发送按钮 1577.17 同时支持模拟器回车、真机点击“完成”发送评论 1617.18 图片与拍照评论的界面实现 1617.19 实现从相册选择照片与拍照 1647.20 icon图片 1667.21 删除已选择的图片 1677.22 在小程序中使用CSS 3动画 1687.23 实现图片评论的发送 1707.24 实现语音消息的发送 1717.25 实现语音消息的暂停与播放 1747.26 用户授权 1767.27 解决真机运行时评论页面滑动卡顿的问题 1777.28 文章阅读计数功能 177第8章 背景音乐播放 1808.1 显示音乐播放图标 1818.2 切换音乐播放图标 1828.3 背景音乐播放的特点 1828.4 实现单页面背景音乐播放 1838.5 监听音乐播放 1858.6 全局变量与全局音乐播放 1868.7 音乐总控开关 1928.8 显示音乐的封面图片 194第9章 丰富文章页面 1959.1 将页面分享给朋友和微信群 1969.2 从swiper组件跳转到文章详情页面 1979.3 使用小程序动画实现点赞特效 199第10章 电影 20410.1 小程序的tab选项卡 20510.2 电影页面介绍 20810.3 编写豆瓣星星评分组件：stars-tpl模板 21010.4 编写movie-tpl模板 21210.5 编写movie-list-tpl模板 21310.6 电影首页的骨架与样式 21510.7 豆瓣电影API分析 21610.8 电影首页的js编写 21710.9 wx.request发送http/https请求 21910.10 设置wx.request的超时时间 22110.11 处理返回的电影数据 22110.12 绑定处理后的电影数据 22410.13 http和https在小程序中的使用说明 22610.14 跳转到更多电影页面 22710.15 编写movie-grid-tpl模板 22910.16 编写“更多电影”页面 23110.17 实现页面下拉刷新的“三部曲” 23410.18 在模拟器中可执行下拉刷新但在真机中无法执行下拉刷新的常见错误 23710.19 json中的backgroundColor配置的是哪里的颜色 23810.20 实现上滑加载更多数据 23910.21 动态设置导航栏loading图标 24110.22 电影搜索 24410.23 电影详情页面 24910.24 电影详情页面的骨架和样式 25110.25 编写电影详情页面的业务逻辑代码 25810.26 预览电影海报 26110.27 设置电影页面的导航栏标题 262第11章 设置 26411.1 设置页面 26511.2 获取用户基本信息 27211.3 数据缓存的异步操作 27511.4 获取系统信息 27711.5 获取网络状态 28111.6 获取当前位置信息与当前速度信息 28211.7 使用微信内置地图查看位置信息 28311.8 监听罗盘数据制作一个简易指南针 28411.9 在小程序中实现摇一摇 28611.10 扫码 28911.11 获取小程序页面二维码 29211.12 下载并预览pdf、word等多种类型文档 293第12章 开放接口 30012.1 准备工作 30112.2 用户登录 30112.3 用户信息校验 30712.4 解析用户加密数据获取openId及UnionId 31312.5 模板消息 31612.6 form表单及picker组件 32112.7 发送模板消息 32312.8 微信支付 32812.9 真实的微信小程序登录状态维护 336第13章 杂项 33813.1 wx:key 33913.2 scroll-view组件：在js中控制滚动条 34313.3 深入理解小程序的单向数据绑定机制 34813.4 深入理解scroll-view组件的bindscrolltolower、lower-threshold属性 34913.5 微信小程序发布流程 350