PPTHTML5+CSS3 Web前端开发技术 课件 第6单元-学习情境9-开发微型播放器微信小程序

HTML5+CSS3Web前端开发技术单元6在微信小程序中应用H5单元6在微信小程序中应用H5学习情境9开发微型播放器微信小程序学习情境9开发微型播放器微信小程序01030204情境概述知识准备案例讲解总结PART01情境概述学习情境9开发微型播放器微信小程序教学概述在本章中，我们开始学习一种基于HTML5和CSS3的应用场景——微信小程序，微信小程序可以开发出很多漂亮的应用出来，本章从微信小程序的注册账号、安装开发工具、新建一个项目入手，通过两个微信小程序的应用案例进行讲解，帮助同学们熟悉微信小程序的具体的使用并能够自己开发出一个小程序出来。教学概述知识重点1、如何申请appid2、小程序基本组件的使用3、如何调试小程序知识难点1、Video组件的使用方式2、页面和JavaScript函数的交互推荐教学方式从小程序基本组件的熟悉开始，动手编写一个简单的“helloworld”小程序，熟悉小程序开发流程和步骤，再逐步过渡到下面两个案例的开发中建议学时12学时推荐学习方法理论加实践，动手编写小程序项目的各个组件，应用模拟器和真机进行调试必须掌握的理论知识Appid的概念、小程序框架组成必须掌握的技能微信开发者工具的使用教学导航教学概述学习情境描述通过本章的学习，让同学们可以用基于HTML5技术在开发出一个简单的播放器，如何在手机模拟器中进行代码的调试和运行、如何设置播放器控制按钮的播放和暂停、如何将JavaScript事件绑定到播放按钮上面、如何设置播放视频的截图和视频文件。经过以上一系列知识点的学习，帮助同学们熟悉小程序的开发流程并自己动手做一个小型的播放器出来。教学概述本节课需要掌握的情境知识点和技能点关键知识点：(1)手机模拟器上进行代码的调试和测试(2)按钮的绑定事件和操作并在控制台进行打印输出(3)视频播放的按钮、弹幕、事件、进度条等属性教学概述本节课需要掌握的情境知识点和技能点关键技能点：(1)手机模拟器上进行代码的调试和测试(2)设置按钮的绑定事件和操作并在控制台进行打印输出(3)设置视频播放的按钮、弹幕、事件、进度条等属性教学概述本节课的学习目标掌握媒体播放功能的小程序的开发理解并掌握小程序组件和事件绑定的方式和方法熟悉并掌握采用小程序模拟器进行调试的方法熟悉并掌握采用真机进行小程序调试的方法教学概述本节课的任务书自行创建一个小型的媒体播放器，自选视频并进行播放控制在自己创建的媒体播放器上显示弹幕对自己设计的媒体播放器进行调试，采用模拟器和真机两种方式PART02知识准备学习情境9开发微型播放器微信小程序知识准备知识分布网络知识准备引导问题1.微信小程序如何进行真机调试和模拟器调试？2.制作媒体播放器所需要的视频文件的地址如何设置？知识准备知识点介绍1、video组件的使用方式2、按钮绑定事件3、小程序的调试方式知识准备video组件的使用方式元素<video>是小程序中经常用到的一种媒体组件功能，它可以在小程序页面上嵌入一种小型的媒体播放器，用户可以使用播放控制按钮进行视频的播放控制。元素<video>的属性列表属性类型说明srcsrc要播放视频的资源地址durationnumber指定视频时长controlsboolean是否显示默认播放控件（播放/暂停按钮、播放进度、时间）danmu-listArray弹幕列表autoplayautoplay是否自动播放loopboolean是否循环播放按钮绑定事件知识准备小程序按钮<button>可以通过bindtap属性绑定页面的触发事件，对于在HTML5中的按钮事件在小程序中同样具有很好的支持。下面的示例展示了两个按钮绑定事件，一个为开启弹幕，<videoid="myVideo"src="/bangumi/play/ep427470?from_spmid=6"binderror="videoErrorCallback"danmu-list="{{danmuList}}"enable-danmudanmu-btnshow-center-play-btn='{{false}}'show-play-btn="{{true}}"controls></video>知识准备在小程序页面代码中，按钮的绑定事件有两个，一个为“bindSendDanmu”（发送弹幕），一个为“bindPlayVideo”（播放视频），分别对应JavaScript文件中按钮事件，代码如下：data:{

src:'',

danmuList:

[{

text:'第1s出现的弹幕',

color:'#ff0000',

time:1

},{

text:'第3s出现的弹幕',

color:'#ff00ff',

time:3

}],

},

bindPlayVideo(){

console.log('1')

this.videoContext.play()

},

bindSendDanmu(){

this.videoContext.sendDanmu({

text:this.inputValue,

color:getRandomColor()

})弹幕列表：按钮事件：预览效果图知识准备小程序的调试方式知识准备小程序开发完成后，如何在模拟器上进行调试呢？我们点击开发者工具“界面”的“调试器”菜单项打开调试器知识准备小程序的调试方式调试器窗口点击菜单中的“真机调试”按钮，打开真机调试选择页面小程序的调试方式知识准备PART03案例讲解学习情境9开发微型播放器微信小程序案例讲解1.制作小程序微型播放器实例：使用微信开发者工具设计一个微型播放器，并在模拟器上进行展示案例讲解1.设计小程序微型播放器步骤：1、创建一个工程并且创建播放器组件2、创建媒体播放器js文件3、创建媒体播放器wxml文件4、创建媒体播放器json文件5、创建媒体播放器wxss文件6、模拟器调试以及真机调试PART04总结学习情境9开发微型播放器微信小程序总结总结

本单元我们使用微信开发者工具制作了一个微型播放器，我们在进行一个