1月9日，微信迷你节目正式启动，互联网迎来了狂欢节。

张小龙在上个月的公开演讲中说：“迷你应用程序是一种比所有现有应用程序更灵活，更容易访问的形式，并且无处不在。”作为微信的一种新形式，迷你应用不仅是微信的生态系统的扩展也被视为移动互联网的“革命性”。

任何文本分析都不像实时视频广播那样直观。

这个艰苦的开放课程邀请了负责“开放式”视频的技术人员向所有人广播现场演示如何开发视频微信Mini计划。 “开放式”视频是一个简短的视频日常应用程序。微信迷你节目“睁大眼睛”是由“睁大眼睛”视频团队制作的。作为为数不多的启动视频迷你节目之一，它吸引了许多开发人员的注意。

来宾简介：

Yang Kai，“开放式”视频团队的技术总监。

他在360工作，是360手机桌面的创始团队之一。他参与研究与开发的台式机长期以来在国内第三方台式市场中排名第一。 2014年，他加入了 Tech Lead，并负责开发 Main计划，主要参与网络库优化，UI性能调整和通过代理来缓存多媒体网页。后来，他加入了“开放式”视频团队，并担任技术开发和迭代的技术人员。

以下是汇编的此公开班的实时分享的关键点。上课后，老师陈凯还分享了本课程中完成的演示。遵循的“唯物主义”官方帐户（ID :)并回复“迷你程序”以获取链接。

今天，我将主要谈论微信小计划的发展。我希望通过实时广播开发“令人大开眼界”的视频小程序，以帮助您了解微信微图的基本API的开发步骤，过程和使用。内容主要包括以下方面：

您可以看到“开放”视频迷你程序是一个简单的列表，列表中的每个屏幕实际上都是可以播放的视频。进一步的分析表明，我们看到的每个视频的封面图像上都有一个图标。以下是视频的文本简介，标题和分类。继续下拉并发现许多视频会显示多个元素，并且不会刷新。当我们单击视频封面或播放按钮图标时，视频将开始播放，然后单击播放第二个视频时，第一个视频将自动停止播放。以上是我们在本课程中要完成的。

｜步骤1：开发可滚动列表

由于时间限制，该实时广播不会从头开始，而是从微信的演示（Mini ）开始运行。

这是微信迷你节目提供的演示。您可以看到有两个选项卡。当今的操作主要是在第二个选项卡的右侧添加一个选项卡，并在第三个标签小型程序式功能中实现“大开眼界”视频。

您可以看到该列表具有很多内容，其内容主要是定义或声明此小程序中将使用某些接口。卷发括号中的某些选项可帮助您定义工具栏上的颜色和信息。您可以在此页面上看到演示中的颜色在此处设置。

在标签栏中添加一个新的“敞开视频”文件夹。配置地址只是写了。只需复制即可。配置后，您可以看到左侧的页面已经出现。尽管没有内容，但已完成的第三个选项卡框架。接下来是继续开发此选项卡。我通常会直接从我之前编写的代码中复制它，然后进行一些简单的修改以演示更改过程。

请小心将相关文件名更改为“开眼界视频”，否则将找不到布局文件。

更改文件夹名称后，您可以在第三个选项卡中看到刚刚添加的内容，可以显示。这是微信迷你节目的官方页面，需要对此页面进行一些更改。

首先，编写此页面的布局文件，删除无用的布局文件，在顶层定义视图，执行最外面的显示，然后添加标签。该标签的主要功能是显示您刚刚看到的图片（由于时间限制，在实时广播期间省略了代码键入步骤，并直接从上一个文件中复制）。

说明复制的代码行。第一个代码是WX：因为，上一个WX是微信的缩写，后续的表示它将在JS文件中找到一个变量。该变量是一个数组，此注释将重复多次，直到与数组长度一致。

下面的前项目标签是指每个标签可以通过以下变量名称获得与其绑定的视频数据。它是当前绑定的视频数据中分配给字段的SRC。

接下来，让我们看一下如何编写GS。第一个定义一个，这是您在布局文件中刚刚声明的内容，这将在其中分配。解释此方法：加载页面时，将被调用。您还可以在微信中的官方开发文件中查看此方法的相关陈述，包括：

如果您在前端开发方面有经验，您会发现它看起来与许多页面非常相似。最常见的事情是仔细研究使用此方法的使用。在这个地方，您将尝试调用一种称为负载的方法并在其上传递“我们自己”。进一步通过另一个。让我解释一下，举一个简单的例子。如果要调整此类配置，可以看到它的url = page/item/item/item/item/item/item/item/item iS ID，值等于1。此方法在呼叫者中如何读取此信息当使用时，ID等于1的参数？这是使用ID = .ID的代码，该代码等同于在页面之间传递参数的工具。

让我们看负载方法。让我们一一看看。第一行总和是两个通过参数和第二行WX。是发送API请求。请注意，WX的定义。在官方迷你程序中，请发送请求现在是本地操作。如果是在线环境，则必须编写，否则将被截获。完整的示例如下：

返回开发页面，：它意味着将本地变量更改为配置参数。应该注意的是，微信小程序与VUE不同。小程序的数据不是双向绑定，也不是默认的双向绑定。如果数据或数据结构已更改。如果要通知级别并刷新，则必须通过页面实现它。换句话说，它必须以这种方式写成才能生效（=表格不会生效）。

现在已经编写了简单的列表，您可以看到我们想要的效果已显示出来。我们要求6个视频，并在界面上显示6张图片。微信将具有标签的默认高度和宽度（240*320像素），因此需要微调图片。

然后写CSS。微信的CSS语法几乎与标准CSS语法没有什么不同。只是不支持某些子集。这些也写在微信的开发文件中，但我们通常使用它们。我们需要谈论RPX，这是在微信Mini计划中自行定义的属性。该属性的定义是，它认为所有屏幕的宽度为750 RPS，这意味着如果您获得5和6s，则其宽度为750 RPX。

但是它将计算出等于像素的RPX数量。如果像素等于RPX，则在6中，两个像素等于RPX。这样做的优点是它降低了UI适应的成本。

此类的第一个目标已经完成，已经开发了可滚动列表，并且熟悉数据绑定和网络请求。

｜步骤2：处理点击事件

接下来，要处理一个点击事件。触发点击事件后，将在图像的原始位置显示视频播放器，并将播放图像所代表的视频。

首先，让我们看一下由微信系定义的事件绑定过程：

例如，在组件中绑定事件处理程序功能，例如，当此用户单击组件时，他将开始使用。

突出显示的线意味着我将功能绑定到标签的单击。也就是说，当单击当前标签时，系统将调用命名的方法，并将一些当前参数传递给此功能。

接下来，在项目中定义绑定，并将单击事件绑定到方法。接下来，我们需要在JS中实现此方法。

在JS中，重新启动一行并写下：（），官方微信文档中的定义包含多个属性：

类型（事件类型）;

（时间戳记，事件产生时）

（结合触发事件组件的某些属性值）

（为当前时间设置某些属性值）

接下来，我们需要实现一种称为TAP的方法，该方法需要两个参数，第一个是页面，第二个是。是这个页面，它只是定义的。将其传递后，您可以看到此方法，并将其称为。单击日志以查看以下结果。

每次点击出现下面时，这意味着它上的事件已成功传递给JS处理功能。

第一个代码是刚刚传递的单击元素，这是单击的目标...认真地说，它是在开发中定义的内容（不是由系统构建的），让我们看看它来自哪里。

数据 - ID表示将当前的视频ID连接到该标签上的属性。当单击标签为时，JS可以从传入中读取此值。

由于列表中有6个标签，因此您必须知道当前点击的标签是什么，并且数据绑定到当前单击的标签以决定以后播放哪个视频。

我们不能使用ID，因此请先删除它。以上是 - url。这个地方写的略有不同。原因是微信小计划将帮助开发人员做某事，删除数据和背后的水平线，然后自动驼峰。

上面的句子意味着从单击的句子中获取当前标签绑定的播放URL。许多前端学生可能会在他们的脑海中提出疑问，为什么不使用其他手段就必须努力工作才能得到它？由于微信小计划被废除，并且许多方法旨在将小程序转换为纯粹的数据驱动的编程思想，即所有事件和所有数据都必须以事件或消息的形式传输。 ，开发人员无法主动获得当前显示。

为了举一个简单的示例，如果加载页面后，请设置一个计时器以告诉当前列表每五秒钟，第一个元素是什么，这是在中完成的。由于无法积极获取当前列表的元素，因此无法在列表中显示内容。只有一种方法：当用户手动触发事件时，开发人员可以获取相关事件（不是全部）一些信息。

为了使播放地址绑定到当前要单击的项目上，必须以这种方式实现，但不能以其他方式实现，这确实有点令人困惑。

可以说，这个想法是微信微图中最重要的想法，也就是说，DOM模型几乎完全没有用。这可能会给许多前端发展带来很大的麻烦。

｜步骤3：在列表的指定位置显示视频播放器

让我们看看。现在我必须做另一件事。我需要在接口，ID，调用并写入标签中，主要是为CSS绑定。

以下是编写它的第一种方法，为什么使用此属性？根据我的个人经验，如果您想隐藏在微信上的标签，只能隐藏此方法，也就是说，属性设置为无，可以隐藏它。无法做到。

顶部意味着视频标签位于列表的顶部，并且所有带有两层牙套的东西都引用了JS变量。一个是，另一个是，而另一个是SRC，这意味着什么是播放地址。这也是第三个变量。

定义以上三个变量：

让我们看一下TAP事件，然后将其直接复制到三行。上一页。是以下数据的更新，这是一种特殊的复制方法。此属性将告诉您当前单击的元素相对于其父节点向下移动的位置有多少个位置。 ，这是我刚刚得到的URL。以下内容：意味着现在可以显示视频元素。

试试看，该页面已经刷新，表明更改已生效。您可以看到视频播放器已经出现，并且进度栏已经显示了时间，但是播放尚未开始。下一步是找到一种让它玩游戏的方法。

让我们首先看一下微信系的定义：

微信定义了一种称为的方法，这意味着当传递时，它将当前元素将当前元素绑定到系统播放器，即完成此操作后添加的元素。

微信官员提供了四种方法：游戏，寻求和四种方法。

查看代码，您可以看到调用传递的参数，这是布局文件中定义的ID刚刚说的是等于。

您可以发现该视频已经开始播放。滑动列表，视频遵循此列表。显示第二个视频后，它没有播放。

这是我发现自己的微信迷你节目中的一个错误。单击第二个视频时，它不能自动播放。手动单击控制条时，可能会触发播放。这是迷你程序系统中的错误。但是有一种绕过的方法：在原始方法中添加两个句子，即设置一个句子，也就是说，延迟事件一段时间，然后启动，然后在事件发生后触发视频播放500毫秒超过。

微信正式建议使用内置IDE进行开发。但是，我通常会开发其他平台，因此我倾向于统一使用它。编写代码后，我只在微信中进行调试。绕过错误后，您可以看到可以自动播放幻灯片视频作为列表滚动。通过这种方式，我们基本上完成了第二个目标，在列表中播放视频，在滚动列表时只有一个视频正在播放。