《（本科）第4章微信小程序常用组件ppt课件.pptx》由会员分享，可在线阅读，更多相关《（本科）第4章微信小程序常用组件ppt课件.pptx（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：第4章 微信小程序常用组件第4章 微信小程序常用组件夏敏捷第第4 4章章 微信小程序常用组件微信小程序常用组件 教学目标：学习和理解什么是小程序页面组件常用组件的用法34.1 4.1 微信小程序组件微信小程序组件 设置 上述定义一个按钮组件，组件有一个id属性，id属性是一个通用属性，所有组件都具有此属性。bindtap属性是绑定tap事件，用来定义单击事件处理函数。 微信开小程序组件都有的属性如表4-1所示。44.1 4.1 微信小程序组件微信小程序组件微信小程序组件分为以下7大类：（1）视图容器组件：主要用于规划布局页面内容。（2）基础内容组件：用于显示图标、文字等常用基础内容
2、，主要包含icon图标，text文字，rich-text富文本和progress进度条组件。（3）表单组件：用于制作表单。微信小程序的表单组件与HTML类似。（4）导航组件：用于跳转到指定页面，仅有navigator导航组件。（5）多媒体组件：用于显示图片、音频、视频等多媒体信息，主要包含audio音频，image图片，video视频组件。（6）地图map组件：用于显示地图效果。（7）canvas画布组件：用于绘制图画内容，游戏开发主要使用此组件实现游戏画面。54.2 4.2 视图容器组件视图容器组件主要包含view视图容器，scroll-view可滚动视图容器，swiper可滑动的视图容器，
3、movable-view可移动的视图容器和cover-view覆盖视图容器这些组件。1view视图容器view是静态视图容器，通常用和标签标识一个容器区域。需要注意的是view视图容器本身没有大小和颜色，需要在WXSS样式文件中设置。【例4-1】视图容器组件view的简单应用。64.2 4.2 视图容器组件视图容器组件2scroll-view可滚动视图可滚动视图是指当拥有内特容过多，屏幕显示不完全时，需要通过滚动显示视图。scroll-view组件可以横向滚动和纵向滚动。【例4-2】可滚动视图组件scroll-view的简单应用。74.2 4.2 视图容器组件视图容器组件3swiper滑块视图
4、容器 swiper通常用于实现制作幻灯片切换的效果，结合image组件也可以制作轮播图。【例4-3】swiper滑块视图容器实现轮播图。程序提供3张图片，通过swiper滑块视图容器对3张图片不停的切换达到轮播效果。84.2 4.2 视图容器组件视图容器组件4movable-view可移动的视图容器可移动的视图容器在页面中可以被拖拽滑动。注意movable-view必须在组件中，并且必须是直接子节点，否则不能移动。【例4-4】movable-view可移动的视图容器的简单应用。94.2 4.2 视图容器组件视图容器组件5cover-view覆盖视图容器cover-view是覆盖在原生组件之上文
5、本视图容器，可覆盖的原生组件包括map、video、canvas等，支持内嵌cover-image、cover-view和button组件。cover-image是指覆盖在原生组件之上的图片视图容器，可覆盖的原生组件同cover-view一样，该组件可以直接使用或者被嵌套在cover-view中。cover-image组件与image类似，但仅有一个src属性。 【例4-5】cover-view覆盖视图容器的简单应用。在地图上放置一个cover-view覆盖视图，内部有一个图片和一个按钮。104.3 4.3 基础内容组件基础内容组件 基础内容组件包括icon图标，text文本，rich-tex
6、t富文本和process进度条组件。1icon图标组件 微信小程序提供了丰富的图标组件，应用于不同场景，有成功，警告，取消，下载等不同含义的图标，如图4-6所示。 例如声明一个蓝色、50大小的成功的图标WXML代码如下： 或者114.3 4.3 基础内容组件基础内容组件2text文本组件 text文本组件显示文字，它支持转义符,如换行n,制表符t，text组件内只支持嵌套。除了文本节点以外的其他节点都无法长按选中。该组件对应的属性如表4-7所示。例如：你好世界 武汉加油 大家好 n 武汉好运行结果如下：你好世界 武汉加油 大家好武汉好124.3 4.3 基础内容组件基础内容组件3progres
7、s进度条组件progress进度条组件是一种提高用户体验的组件，就像播放视频一样，可以通过进度条看到完整的视频长度，当前的进度，这样能够让用户合理的安排自己的时间，提高用户的体验度。progress进度条组件对应的属性如表4-8所示。例如： 134.3 4.3 基础内容组件基础内容组件4rich-text富文本例如在WXML中声明一个rich-text富文本组件。其中nodes1为自定义变量，用以定义HTML的内容。如果是用纯字符串（String类型）描述HTML代码，在JS中表示如下：Page( data: nodes1:Hello World! )144.4 4.4 表单组件表单组件 表单
8、组件包含button按钮，form表单，input输入框，checkbox复选框，radio单选按钮，picker列表选择器，picker-view内嵌列表选择器，slider滑动选择器，switch开关选择器，label标签组件。151button按钮组件button按钮是最为常用的组件之一，用于事件的触发及表单的提交，小程序中按钮的样式有三种，如图所示。button按钮常用属性有type、size和form-type，分别用于修改样式、尺寸和设置不同的触发事件。4.4 4.4 表单组件表单组件161button按钮组件例如能触发tap单击事件和样式是default的按钮：确定确定bindt
9、ap属性就是添加tap单击事件触发的函数，函数名是but。/ index.js Page( but: function() / 单击事件触发的函数 console.log(你好) wx.navigateTo( url: /pages/logs/logs ) /导航到logs页面)buttonbutton按钮组件按钮组件例如能触发tap单击事件和样式是default的按钮：确定确定bindtap属性就是添加tap单击事件触发的函数，函数名是but。如果修改按钮显示效果，可以在WXSS文件中设置CSS，例如其背景颜色background-color（设置type为primary是背景色为微信绿则无
10、法再设置背景颜色），文字颜色color，border-radius添加圆角的边框。17.btn1 width: 80%; background-color: beige; border-radius: 98rpx; margin: 15px;4.4 4.4 表单组件表单组件182input单行文本输入框组件input单行文本输入框组件对应的属性如表所示。例如输入数字的单行文本框： 请输入第1个数字： 获取input值的常用方式如下： inputnum1: function (e) this.num1 = Number() console.log(第1个数字为 + this.num1) ,猜数字
11、小游戏猜数字小游戏19创建一个可以猜数字的游戏，它会在1100以内随机选择一个数，然后让玩家挑战在10轮以内猜出这个数字，每一轮都要告诉玩家正确或者错误，如果出错了，则告诉他数字是低还是高了，并且还要告诉玩家之前猜的数字是什么。一旦玩家猜测正确，或者玩家用完了回合游戏将会结束。游戏结束后，可以让玩家选择重新开始。4.4 4.4 表单组件表单组件203picker列表选择器 picker列表选择器是从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。这里仅仅介绍普通选择器和日期选择器的属性。4.4 4
12、.4 表单组件表单组件213picker列表选择器日期选择器的属性。4.4 4.4 表单组件表单组件22【例4-7】picker列表选择器组件的简单应用。4.4 4.4 表单组件表单组件234slide滑动选择器 slider组件为滑动选择器。该组件对应的属性如表4-15所示。例如制作一个自定义滑动条，最小值为50、最大值为200，并且在右侧显示当前数值： /* 自定义函数-监听slider改变 */ sliderChange: function (e) console.log(slider发生变化，当前值是： + e.detail.value) ,4.4 4.4 表单组件表单组件245swi
13、tch开关选择器例如：选中没选中 /* 自定义函数-监听switch改变 */ switchChange: function (e) console.log(switch发生变化，当前值是： + e.detail.value) ,4.4 4.4 表单组件表单组件25 6form表单组件 微信小程序的表单组件与Html的表单标签是一样的，但微信小程序的form组件具有一些特殊的性质。将用户输入在等组件内的内容进行提交。 当单击表单中的（此时formType为submit）组件时，会将表单组件中的value值进行提交，需要在表单组件中加上name来作为key识别。 form组件的属性见表4-17。
14、4.4 4.4 表单组件表单组件26【例4-8】form组件的简单应用。form.wxml文件：表单组件form的简单应用 模拟用户登录效果 提交 重置 form.js文件：Page( formSubmit: function(e) console.log(form发生了submit事件，携带数据为：, e.detail.value) , formReset: function() console.log(form发生了reset事件) )4.5 4.5 导航组件导航组件27 导航组件navigator用于单击跳转页面链接，其对应的属性如表4-18所示。例如： 跳转到新页面打开新内容上述代码表
15、示在导航组件中内嵌按钮组件来实现跳转功能。当前组件并未声明open-type属性，因此表示默认情况，即跳转新页面打开page2.wxml。4.5 4.5 导航组件导航组件284.5 4.5 导航组件导航组件29实际上实现单击按钮跳转，也可以在WXML文件中绑定tap单击事件，如下： 跳转到新页面打开新内容在JS文件中添加事件处理函数Tap1： Tap1: function () wx.navigateTo( url: ./Three/Three /跳转到Three游戏页面 ) ,如果需要传递数据给新页面，组件的url属性值可以使用如下格式：其中参数名称可以由开发者自定义，参数个数为一个至若干个
16、均可，多个参数之间使用&符号隔开。4.5 4.5 导航组件导航组件30在WXML文件代码： 跳转到新页面打开新内容上述代码表示打开新页面的同时也传递了date=20201207这条数据给新页面使用。在page2的JS文件中的onLoad函数中可以获取到该参数，代码如下：Page( onLoad: function (options) console.log(options.date);/将在控制台打印输出20201207 )4.6 4.6 媒体组件和地图组件媒体组件和地图组件314.6.1 媒体组件1音频组件audioaudio是音频组件，可以用于播放本地或网络音频。该组件对应的属性如表4-1
17、9所示。 音频组件audio的简单应用 播放网络音频 播放 暂停 回到开头 音频组件音频组件audioaudioJS文件代码：Page(onReady: function () /使用wx.createAudioContext获取audio上下文对象，控制音频的播放暂停与跳转。 this.audioCtx = wx.createAudioContext(myAudio) , /以下是事件代码 audioPlay: function (options) /播放按钮事件代码 this.audioCtx.play() , audioPause: function (options) /暂停按钮事件代
18、码 this.audioCtx.pause() , audioSeek0: function (options) /回到开头按钮事件代码 this.audioCtx.seek(0) /设置当前播放时间为0秒，还是14秒等 )324.6 4.6 媒体组件和地图组件媒体组件和地图组件332图片组件imageimage是图片组件，可以用于显示本地或网络图片，其默认宽度为300px、高度为225px。该组件对应的属性如表4-20所示。image组件的mode属性用于控制图片的裁剪、缩放，其中有4种缩放模式： scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image组件 asp
19、ectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来 aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 widthFix：宽度不变，高度自动变化，保持原图宽高比不变 【例4-10】图片组件image的简单应用。34image组件的mode属性用于控制图片的裁剪、缩放，其中有9种裁剪模式。 top：不缩放图片，只显示图片的顶部区域。 bottom：不缩放图片，只显示图片的底部区域。 center：不缩放图片，只显示图片的中间区域。 left：不缩放图片，只显示
20、图片的左边区域。 right：不缩放图片，只显示图片的右边区域。 top left：不缩放图片，只显示图片的左上边区域。 top right：不缩放图片，只显示图片的右上边区域。 bottom left：不缩放图片，只显示图片的左下边区域。 bottom right：不缩放图片，只显示图片的右下边区域。 【例4-10】图片组件image的简单应用。353视频组件video 视频组件，可用于播放本地或网络视频资源，其默认宽度为300px、高度为225px。该组件常用属性src所示要播放视频的资源地址，danmu-list属性是弹幕列表。 【例4-11】视频组件video的简单应用。364.6 4
21、.6 媒体组件和地图组件媒体组件和地图组件374.6.2 map地图组件 map是地图组件，根据指定的中心经纬度使用腾讯地图显示对应的地段。map组件默认大小为300*150像素，该尺寸可以重新自定义。该组件对应的常用属性如表4-21所示。例如，生成一个北京故宫博物院的地图，WXML代码如下：拓展拓展案例案例翻牌翻牌游戏游戏38翻牌游戏主要考查玩家记忆力。游戏桌面有16张牌，游戏开始前先让玩家记忆几秒钟，玩家翻到两张相同扑克牌，则固定显示这两张牌面，否则又恢复到背面图案。游戏时统计玩家单击次数以及总用时，翻牌游戏运行效果如左图。游戏成功后出现右图排行榜。拓展拓展案例案例翻牌游戏翻牌游戏39 翻
22、牌游戏设计时，游戏桌面的每张牌采用2个组件，其中一个显示牌面，另外一个显示背面。通过控制组件的样式display属性值决定显示那个组件从而达到显示牌面或背面。 每张牌是一个对象，有2个属性：src（牌图片）和state（状态信息，为1时显示牌面图片,为0时显示牌背面，为2时已完成配对）组成。通过每张牌的state属性控制组件的样式display属性值。 游戏排行榜采用微信缓存数据方法，将排行信息数组存入缓存数据maxscore中。拓展拓展案例案例智力测试程序智力测试程序40本案例开发智力测试程序，当用户进入游戏后自动出现题目和选项（如下图）。用户选择答案后如果正确自动进入下一题，也可以单击“上一题”“下一题”按钮进入到上一题目或下一题目。用户如果本题目不会解答，可以单击“显示答案”。本测试提供5道试题，如果答对一题得20分。拓展拓展案例案例智力测试程序智力测试程序41智力测试程序设计思路游戏中题目的显示使用View组件，4个选项使用radio组件（单选按钮组件），当用户单击某个单选按钮后，触发其bindchange事件，在其事件处理函数中判断对错，统计积分。用户选择答案正确或者用户单击“下一题”按钮后，则从数组local_database中读取下一题目数据，更新View组件和4个radio组件上显示的选项信息，从而开始新的题目测试。