作者：刘刚
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
微信小程序开发必备100Tip试读：
前言
为什么要写这本书？
微信小程序从正式发布后越来越受很多软件公司和开发人员的使用，目前图书市场上关于微信小程序的书籍还很匮乏，真正能把微信小程序开发必备技能提炼出来的少之又少，本书提供了微信小程序开发必备的100个Tip和一个完整的电商案例——京东购物微信小程序。
100个Tip分为四类：
关于微信小程序的框架及工具16个Tip；
关于微信小程序丰富的组件24个Tip
关于微信小程序必备API技能50个Tip；
关于微信小程序高级交互设计10个Tip。
每一个Tip都有详细的介绍和相关的示例，方便开发人员快速学习这些Tip，同时也可以作为工具书指南进行查询，应用到哪个知识点可以到这里快速查询并使用。京东购物微信小程序是将这些Tip综合应用到实际项目开发过程中。通过学习100个Tip和项目案例，让读者全面、深入、透彻地理解微信小程序开发，提高微信小程序开发能力和项目实战能力。
本书有何特色？
1.图文结合方式，逐步讲解
为了便于读者理解本书内容，提高学习效率，作者通过文字讲解及图表演示，逐步操作，避免枯燥乏味。
2.提炼知识点、方便快速学习
本书针对微信小程序的框架和工具、组件、API、交互效果共提炼出 100 个常用开发Tip，每个Tip都有详细的示例或者实际应用的场景，方便读者快速学习和查阅使用。
3.由浅入深、理论与实战相结合
本书先讲解100个常用开发Tip，从框架和工具的使用到组件的使用，然后是常用API，再后是高级交互效果，最后使用一个完整案例贯穿知识点，由浅入深，一步步掌握微信小程序的开发。
4.实战驱动，应用性强
本书每个开发 Tip 都有详细的示例或者实际应用场景，读者可根据示例快速进行知识点的学习和使用，通过知识点在实际场景的应用，指引读者在项目实战过程中如何应用这些Tip。
5.项目案例典型，实战性强，有较高的应用价值
本书提供了有代表性的高级交互效果和完整的典型案例。读者在实际项目开发过程中，可参考这些案例，缩短开发时间。
6.提供完善的技术支持和售后服务
本书提供了专门的技术支持邮箱：yuan_kevin_525@126.com，读者在阅读本书过程中如有任何疑问都可以通过该邮箱获得帮助。
本书内容及知识体系
第1章 微信小程序的框架及工具
本章介绍了微信小程序的框架及工具使用Tip 15个，详细讲解了微信小程序框架和工具的使用，是小程序入门必备的知识点。
第2章 微信小程序的丰富的组件
本章介绍了微信小程序组件的使用Tip 26个，详细介绍了每个组件的使用以及实际项目应用场景，是小程序界面开发必备的知识点。
第3章 微信小程序必备API技能
本章介绍了微信小程序API使用Tip 49个，详细介绍微信小程序常用API的使用，是小程序进行界面与后台逻辑处理开发必备的知识点。
第4章 微信小程序高级交互设计
本章介绍了微信小程序高级交互设计Tip 10个，介绍了10类高级交互效果，是小程序交互设计必备的知识点。
第5章 京东购物微信小程序案例
本章详细讲解了微信小程序的一个典型案例，通过对案例的学习，读者可掌握各个知识点的应用以及实际项目的开发过程和设计思路。
适合阅读本书的读者
微信开发者
前端开发工程师
学生
网站站长、待业青年
阅读本书的建议
本书可以作为工具书使用，查询各个知识点、交互效果的使用。
没有基础的读者，可以按照章节顺序进行学习，由浅入深，逐个突破。
有一定基础的读者，可以根据实际情况有重点地选择阅读各个模块和项目案例。
对于每一个模块和项目案例，先自己思考一下实现的思路，然后再阅读，学习效果会更好。
轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。
· 提交勘误：您对书中内容的修改意见可在 提交勘误 处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
· 交流互动：在页面下方 读者评论 处留下您的疑问或观点，与我们和其他读者一同学习交流。
页面入口：http：//www.broadview.com.cn/32691第1章 微信小程序的框架及工具
微信小程序的框架及工具的使用，是进行小程序开发的第一步，首先要理解小程序的框架配置，包括 app.json 配置、App（）函数的使用、Page（）函数的使用、数据如何绑定到页面上、条件判断和列表渲染、模板的使用、import引用模板，以及include引用文件，同时还要学会工具的使用，包括Console面板、Sources面板、Network面板、Storage面板、Appdata面板、Wxml面板以及Sensor面板的使用。1.1 app.json配置
app.json配置是进行微信小程序开发必会的一个功能配置，对于微信小程序而言，它是一个全局的配置，有五个主要功能：决定页面文件路径，配置窗口的表现，配置 tab 标签导航，设置网络超时时间以及配置debug模式。配置代码如下所示。1.1.1 决定页面文件路径
微信小程序的页面路径需要在app.json配置文件中配置一下，属性名为“pages”，以数组的形式存放页面文件路径。文件路径以文件名进行命名，数组的第一项代表小程序的初始页面。当小程序中新增/减少页面时，都需要对pages数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径，对.json、.js、.wxml和.wxss四个文件进行整合。具体代码如下所示。
在app.json配置完页面路径后，会生成文件路径对应名称的文件夹和4个对应名称的文件（.js文件、.json文件、.wxml文件、.wxss文件），如图1.1所示。图1.1 页面路径
注意：页面路径以文件名称来创建，“pages/index/index”这样的页面路径是推荐的，而“pages/common/index”这样的页面路径是不推荐的，因为不便于微信小程序创建文件夹和文件，也不方便我们维护。1.1.2 配置窗口表现
app.json文件可以配置窗口的表现，包括导航栏背景色、导航栏标题颜色、导航栏标题文字内容、窗口的背景色、下拉背景字体、loading图的样式，以及是否开启下拉刷新设置。这些功能的配置都放置在window这个对象里，具体代码如下所示。
窗口属性说明如下。（1）navigationBarBackgroundColor：导航栏背景颜色，如＃00000。（2）navigationBarTextStyle：导航栏标题颜色，仅支持 black/white。（3）navigationBarTitleText：导航栏标题文字内容。（4）backgroundColor：窗口的背景色。（5）backgroundTextStyle：下拉背景字体、loading 图的样式，仅支持 dark/light。（6）enablePullDownRefresh：是否开启下拉刷新。
界面效果如图1.2所示。图1.2 界面效果1.1.3 配置tab标签导航
手机上安装的很多App软件，比较流行的一种导航方式就是设置底部标签导航，一般底部标签导航有2～5 个，微信小程序也支持这样的导航方式，通过配置tab 标签导航来支持这种流行的导航方式，像智行12306抢票软件，底部标签有四个，分别是火车票、飞机票、汽车票和个人中心，如图1.3所示。图1.3 智行12306抢票软件
微信小程序配置 tab 标签导航，可以配置底部标签导航和顶部标签导航，通过 tabBar来配置。tabBar是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。当position属性值设置为top时，为顶部标签导航；当position属性值设置为bottom或者不设置时，为底部标签导航。
tabBar的属性如下所示。（1）color：tab上的文字默认颜色。（2）selectedColor：tab上的文字选中时的颜色。（3）backgroundColor：tab的背景色。（4）borderStyle：tabbar上边框的颜色，仅支持black/white。（5）position：可选值bottom、top。（6）list：tab的列表，最少2个、最多5个tab，数组中的每一项都是一个对象。（7）pagePath：页面路径，必须在 pages 中先定义。（8）text：tab 上按钮文字。（9）iconPath：图片路径，icon大小限制为40kb，建议尺寸为81px×81px。当postion为top时，此参数无效。（10）selectedIconPath：选中时的图片路径，icon大小限制为40kb，建议尺寸为81px×81px。当postion为top时，此参数无效。
1.配置底部标签导航
具体代码如下所示。
界面效果如图1.4所示。图1.4 底部标签导航
2.配置顶部标签导航
具体代码如下所示。
界面效果如图1.5所示。图1.5 顶部标签导航1.1.4 设置网络超时时间
微信小程序设置网络超时时间是通过networkTimeout对象来设置的，可以设置网络请求的超时时间、WebSocket的超时时间、uploadFile文件上传超时时间和downloadFile文件下载超时时间，它的属性如下所示。（1）request：wx.request的超时时间，单位毫秒，默认为60000。（2）connectSocket：wx.connectSocket的超时时间，单位毫秒，默认为60000。（3）uploadFile：wx.uploadFile的超时时间，单位毫秒，默认为60000。（4）downloadFile：wx.downloadFile的超时时间，单位毫秒，默认为6000。
配置网络超时时间，具体代码如下所示。1.1.5 配置debug模式
配置debug模式是在开发者工具的控制台面板，调试信息并以info的形式给出，其信息有 Page 的注册、页面路由、数据更新和事件触发。可以帮助开发者快速定位一些常见的问题。具体代码如下所示：（1）开启debug模式，控制台面板的调试信息如图1.6所示。图1.6 开启debug模式（2）没有开启debug模式，控制台面板的调试信息如图1.7所示。图1.7 没有开启debug模式
从图1.6和图1.7中可以看出，开启debug模式时，调试信息会更详细、更全面，方便在程序开发过程中进行调试。如果微信小程序正式运行，则需要把debug模式关闭。1.2 App（）函数使用
App（）函数用来注册一个微信小程序，它被放置在app.js全局文件里，可以接收object对象参数，同时还可以指定微信小程序的生命周期函数、全局函数和全局数据。具体代码如下所示。
微信小程序在App（）函数里可以使用下列生命周期函数。（1）onLaunch：生命周期函数。监听小程序初始化，当小程序初始化完成时，会触发onLaunch（全局只触发一次）。（2）onShow：生命周期函数。监听小程序显示，当小程序启动，或从后台进入前台显示时，会触发 onShow。（3）onHide：生命周期函数。监听小程序隐藏，当小程序从前台进入后台时，会触发onHide。（4）onError：错误监听函数。当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息。（5）其他：开发者可以添加任意的函数或数据到Object参数中，用this可以访问。
微信小程序前后台定义：
当用户点击左上角关闭，或者按了设备Home键离开微信时，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序时，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高时，才会被真正销毁。
微信小程序在 App（）函数里定义的是全局函数和全局数据，因此在页面文件夹的 js 文件里可以直接使用。比如存在“pages/index/index”这样页面路径，在index文件夹下面就会有index.js文件，在index.js文件中就可以使用App（）函数里提供的全局函数或数据，在使用之前，需要使用getApp（）函数来获取小程序实例，这样就可以使用App（）函数提供的全局函数或数据，具体代码如下所示。
注意：App（）函数必须在app.js中注册，且不能注册多个。不要在定义App（）内的函数中调用 getApp（），使用 this 就可以拿到 App 实例。不要在 onLaunch 的时候调用getCurrentPages（），此时page还没有生成。通过getApp（）获取实例之后，不要私自调用生命周期函数。1.3 Page（）函数使用
App（）函数可用来注册一个微信小程序，同时提供生命周期函数、全局函数和全局数据，而Page函数则用来注册一个具体的页面，它在页面文件夹的js文件里，可以接受一个 object参数，可以指定页面的初始数据、生命周期函数、事件处理函数等。
示例代码如下所示。1.3.1 初始化数据
在Page（）函数的data对象里可以初始化页面要用到的函数，data会以JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串、数字、布尔值、对象或数组。
假如界面需要姓名和性别的值，这时就可以通过data来传递数据，具体代码如下所示。
在页面里就可以把姓名和性别的值通过数据绑定的方式取出来，具体代码如下所示。1.3.2 生命周期函数
在Page（）函数里也提供了一些生命周期函数，如下所示。（1）onLoad：生命周期函数。监听页面加载，一个页面只会调用一次。（2）onReady：生命周期函数。监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。（3）onShow：生命周期函数。监听页面显示，每次打开页面都会调用一次。（4）onHide：生命周期函数。监听页面隐藏，当navigateTo或底部tab切换时调用。（5）onUnload：生命周期函数。监听页面卸载，当redirectTo或navigateBack时调用。1.3.3 相关事件函数
在Page（）函数里也提供了一些常用的函数，比如下拉刷新、页面转发事件函数。（1）onPullDownRefresh：下拉刷新。
监听用户下拉刷新事件，需要在config的window选项中开启enablePullDownRefresh，当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。（2）onShareAppMessage：用户转发。
只有定义了此事件的处理函数，右上角菜单才会显示“转发”按钮。用户点击转发按钮的时候会调用，此事件需要 return 一个 Object，用于自定义转发内容。1.4 数据绑定
WXML页面里的动态数据都是来自js文件Page的data，数据绑定就是通过双大括号（{{}}）将变量包起来，在WXML页面里将数据值显示出来。
示例代码如下所示。（1）组件属性绑定是将data里的数据绑定到微信小程序的组件上，示例代码如下所示。（2）控制属性绑定用来进行if语句条件判断，如果满足条件，则执行，否则不执行，示例代码如下所示。（3）关键字绑定常用于组件的一些关键字，像复选框组件一样，checked关键字如果等于true，则代表选中复选框，false则代表不选中复选框，示例代码如下所示。
不要直接写checked=″false″，其计算结果是一个字符串，转成boolean类型后代表真值。1.5 wx：if条件判断
微信小程序的条件判断分为单个组件的条件判断和多个组件的条件判断。
1.wx：if 判断单个组件
在微信小程序里，可以将wx：if=″{{condition}}″应用到某个组件上，用{condition}}″来判断是否需要渲染该代码块，示例代码如下所示。
使用wx：elif 和wx：else 来添加一个else块。
2.block wx：if 判断多个组件
因为wx：if是一个控制属性，因而它需要应用到具体的一个组件上。如果想一次性判断多个组件标签，那么这时可以使用一个＜block/＞标签将多个组件包装起来，并在上面使用wx：if控制属性，示例代码如下所示。
＜block/＞并不是一个组件，它仅仅是一个包装元素，不会在页
试读结束[说明：试读内容隐藏了图片]