微信小程序开发基础

? 适合教学的需要。本书内容参考微信小程序官方文档由浅入深地进行编排，考虑了教学的学时分配和知识点的组织，适合作为高校教材。
? 涵盖了*内容。微信小程序的技术更新很快，本书所涉及的内容涵盖了微信小程序的*内容。
? 定位为微信小程序入门教材，语言精练，通俗易懂，内容丰富，图文并茂，每个知识点都结合经典案例进行说明，帮助读者更好地理解、掌握微信小程序开发的基础知识和技术。
? 整书串联性强。通过综合应用分布在全书的知识点及135个案例来开发两个大项目，使读者更好地掌握如何将所学的知识点综合起来解决实际问题。

 

本书从基础知识开始逐步介绍微信小程序开发的相关知识，包括微信小程序组件、API以及示例代码；还介绍了WeUI、wxcharts的应用；*后，介绍了旅游、菜谱等项目；演示了微信小程序开发的全过程。本书内容由浅入深，文字通俗易懂，结合示例介绍各个知识点，可以帮助读者更好地理解、掌握微信小程序开发技术。
本书适合微信小程序初学者（特别是在校学生）、微信应用开发者和移动开发爱好者等，也可以作为大学相关课程的教材。

····························································
前言Foreword微信是目前手机上流行的应用软件之一。由于具备“触手可及、用完即走”的特点，微信小程序减少了对用户手机资源的占用。而且，微信小程序的简易性给企业提供了更简便、高效的营销渠道，可以帮助更多的用户找到企业提供的服务。微信小程序开发是实现小程序的手段。
从2017年1月微信小程序正式上线发布以来，微信小程序正进行着快速的更新。这增加了学习微信小程序开发的难度。而且，这还可能导致本书介绍的一些知识点在新版本中有所更改，或者新版本中增加了新的内容。这需要读者在学习微信小程序开发时参考官方文档进行调整。
为了帮助广大读者更好地掌握微信小程序开发技术，本书循序渐进地介绍微信小程序开发知识。本书的读者对象包括计算机相关专业（如软件工程、计算机科学与技术专业）的在校学生、微信应用开发者和移动开发爱好者等。
本书全面系统地介绍了微信小程序开发知识，并提供了大量的示例代码。为了帮助读者更好地安排学习时间和帮助学校更好地安排课程，本书给出了对各个章节的建议学时，建议学时分为理论学习学时和动手实践学时，如下表所示。章内容建议理论学习学时建议动手实践学时第1章微信小程序开发起步42第2章视图容器组件22第3章基础组件22第4章表单组件44第5章互动操作组件11第6章媒体组件11第7章其他组件22续表
章内容建议理论学习学时建议动手实践学时第8章网络API22第9章媒体API33第10章设备API44第11章界面API44第12章开放接口54第13章其他API33第14章使用WeUI进行设计23第15章使用wxcharts进行设计12第16章项目23合计学时4242
学校在开设微信小程序开发相关课程时可以根据总课时、学生基础和教学目标等情况调整各个章节的学时。读者也可以有选择地阅读章节内容并安排好学时。
本书的示例代码、电子课件、习题答案可以通过清华大学出版社官网下载。提醒读者注意的是，本书所提供的示例代码是相对项目创建之初发生过变动的代码，而从项目创建之初一直没有发生变动的代码不包含在所提供的代码之中。
由于编者水平有限，书中难免有疏漏之处，敬请读者朋友批评指正。联系邮箱： [email protected]。

编者
2018年2月◆微信小程序开发基础

····························································
第5章Chapter5

互动操作组件本章主要介绍互动操作组件的属性和常见用法，包括底部菜单组件actionsheet、弹出对话框组件modal、消息提示框组件toast、加载提示组件loading等组件的属性和用法。App软件经常可以从底部弹出很多选项，这种效果可以在小程序中用actionsheet组件实现。弹出对话框组件modal常用来提示一些信息；例如，退出应用、修改资料等。消息提示框组件toast经常用来提示提交成功或者正在加载。加载提示组件loading通常使用在请求网络数据时的一种方式，通过hidden属性设置显示与否。
5.1底部菜单组件actionsheet
App软件经常可以从底部弹出很多选项，这种效果可以在小程序中用actionsheet组件实现。actionsheet组件是从底部弹出可选菜单项，actionsheet有两个子组件：  每个选项actionsheetitem和取消选项actionsheetcancel。actionsheetcancel和actionsheetitem的区别是： 点击actionsheetcancel会触发actionsheet的change事件，并且外观上会同actionsheetcancel上面的内容间隔开来。actionsheet的属性说明如表51所示。在actionsheet组件中可以放置任何组件。表51actionsheet属性相关信息
属性类型说明hiddenBoolean是否隐藏，默认值为truebindchangeEventHandle点击背景或actionsheetcancel按钮时触发change事件，不携带数据例51代码如下，其效果如图51所示。
例51
弹出action sheet

{{item}}
◆微信小程序开发基础第◆5章互动操作组件
取消

//index.js
var items=[‘item1’, ‘item2’, ‘item3’, ‘item4’]
var pageObject={
data: {
actionSheetHidden: true,
actionSheetItems: items
},
actionSheetTap: function(e) {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
},
actionSheetChange: function(e) {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
}
}
for (var i=0; i(function(itemName) {
pageObject[‘bind’ itemName]=function(e) {
console.log(‘click’ itemName, e)
}
})(items[i])
}
Page(pageObject)图51actionsheet组件的应用5.2弹出对话框组件modal
弹出对话框组件modal常用来提示一些信息；例如，退出应用、修改资料等。模态弹窗是对整个界面进行覆盖，防止用户对界面中的其他内容进行操作。对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。modal的属性说明如表52所示。表52modal属性相关信息
属性类型说明titleString标题hiddenBoolean是否隐藏整个弹窗，默认值为falsenocancelBoolean是否隐藏cancel按钮，默认值为falseconfirmtextStringconfirm按钮文字，默认值为确定canceltextStringcancel按钮文字，默认值为取消bindconfirmEventHandle点击确认触发的回调bindcancelEventHandle点击取消以及蒙层触发的回调例52代码如下，其效果如图52所示。
例52

 cancel-text=”取消” hidden=”{{modalHidden1}}”
 bindconfirm=”modalChange1″ bindcancel=”modalChange1″>
这是对话框的内容

 cancel-text=”取消” hidden=”{{modalHidden2}}”
bindconfirm=”modalChange2″ bindcancel=”modalChange2″>

点击弹出包含两个按钮的对话框
点击弹出包含一个按钮的对话框

//index.js
var items=[‘项’, ‘第二项’, ‘第三项’, ‘第四项’];
Page({
data: {
modalHidden1: true,
modalHidden2: true
},
modalTap1: function(e) {
this.setData({
modalHidden1: false
})
},
modalChange1: function(e) {
this.setData({
modalHidden1: true
})
},
modalTap2: function(e) {
this.setData({
modalHidden2: false
})
},
modalChange2: function(e) {
this.setData({
modalHidden2: true
})
}
})
图52modal组件的应用5.3消息提示框组件toast
消息提示框组件toast经常用来提示提交成功或者正在加载。toast弹出式提示适用于轻量级的成功提示，1.5s后自动消失，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。注意该形式不适用于错误提示，因为错误提示需要明确告知用户，不适合使用一闪而过的弹出式提示。toast的属性说明如表53所示。表53toast属性相关信息
属性类型说明durationFloathidden设置false后，触发bindchange的延时，单位为毫秒(ms)，默认值为1500hiddenBoolean是否隐藏，默认值为falsebindchangeEventHandleduration延时后触发例53代码如下，其效果如图53所示。
例53

默认

点击弹出默认toast

“toast2Change”>
设置duration

点击弹出设置duration的toast

//index.js
var toastNum=2
var pageData={}
pageData.data={}
for (var i=0; i<=toastNum; i) {
pageData.data[‘toast’ i ‘Hidden’]=true;
(function(index) {
pageData[‘toast’ index ‘Change’]=function(e) {
var obj={}
obj[‘toast’ index ‘Hidden’]=true;
this.setData(obj)
}
pageData[‘toast’ index ‘Tap’]=function(e) {
var obj={}
obj[‘toast’ index ‘Hidden’]=false
this.setData(obj)
}
})(i)
}
Page(pageData)图53toast组件的应用
5.4加载提示组件loading
加载提示组件loading通常使用在请求网络数据时的一种方式，通过hidden属性设置显示与否。如果加载样式覆盖整个页面，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。局部加载反馈只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。loading属性为hidden，默认为false（不隐藏）。
例54代码如下，其效果如图54所示。
例54

加载中…

点击弹出loading

//index.js
Page({
data: {
hidden: true
},
loadingTap: function() {
this.setData({
hidden: false
});
var that=this;
setTimeout(function() {
that.setData({
hidden: true
});
that.update();
}, 3000);
}
})图54loading组件的应用
习题5〖*2〗问答题1. 请说明actionsheet组件的常见属性。
2. 请说明modal组件的常见属性。
3. 请说明toast组件的常见属性。
4. 请说明loading组件的常见属性。