今天，我将主要讨论微信小程序的发展。我希望通过现场直播制作一个“大开眼界”的视频小程序，以帮助您了解微信小程序的开发步骤，过程和基本API用法。内容主要包括以下方面：

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

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

由于时间限制，此直播不会从头开始启动小程序，而是直接从微信的演示（小程序组件）开始操作。

这是微信小程序给出的官方演示。您可以看到有两个选项卡。今天的操作主要是在第二个标签的右侧添加另一个标签，并在第三个标签中实现跟随。与“大开眼界”视频小程序的功能相同。

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

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

请注意将相关文件的名称更改为“ Open Eye Video”，否则可能找不到布局文件。

更改文件夹名称后，您可以在第三个选项卡中看到刚刚添加的内容，该内容已经显示。这是微信小程序的官方音频页面，需要对此页面进行一些更改。

首先为该页面编写布局文件，删除未使用的布局文件，在顶层定义一个视图，显示最外层，然后添加一个图像标签，此标签的主要功能是现在显示封面图（由于时间关系，在直播期间省略了代码步骤，并且直接从先前的文件中复制了代码步骤。）

解释这些复制的代码行。第一个代码是WX：例如，前一个WX是微信的缩写，后一个for表示它将在您的JS文件中找到一个名为video的变量，该变量是一个数组，并且便笺图像将重复重复直到与视频数组的长度匹配为止。

以下for-item标签意味着每个image标签可以通过video变量名称获取绑定到其的视频数据。例如，下面的video.coverForFeed用于将当前绑定的视频数据中的coverForFeed字段分配给图像的src。

让我们看看GS的写作。首先定义一个视频，该视频刚刚在布局文件中声明。该视频将在加载时分配。说明onload方法：加载页面时，将调用onload。您还可以在微信小程序官方开发文档中查看此方法的相关声明，其中：

如果您具有前端开发经验，则可以看到它与窗口的许多页面非常相似。最常用的是onload。然后仔细研究此方法的使用。在这个地方，您将尝试调用一个名为load的方法，并传入“ Ourself”，然后传递一个选项。解释选项，举一个简单的例子，如果您想调整这样的配置，您可以看到其url = page / item / item，后跟一个参数，参数名称为id，值等于1，方法正在调用被调用方（即正在调用的页面）如何读取ID等于1的参数。这是通过代码const id = options.id进行的，options等效于在页面之间传递参数的工具。

再次查看load方法，逐行查看它，页面的第一行和选项是两个参数，而wx.ewqiest的第二行是发送API请求。请注意，小程序官方文档是正确的。wx.ewqiest的定义是发送HTtps请求，该请求现在是本地操作。如果是在线环境，则必须将其编写为HTTPS，否则将被拦截。完整的示例编写如下：

返回开发页面，视频：videoData意味着将局部变量更改为配置参数。需要说明的是，微信小程序与Vue不同，小程序的数据不是双向绑定，或者默认情况下不是双向绑定。绑定，如果数据或数据结构已更改，则要通知视频级别并让视频刷新，则必须通过页面中的setdata来实现。换句话说，必须这样写才能使视频生效（video = videoData不会生效）。

现在已经编写了简单列表，我们可以从微信小程序的开发列表中看到已经显示了想要的效果，我们请求了6个视频，并且界面显示了6个封面图。 微信将具有图像标签的默认高度和宽度（240 * 320像素），因此您需要调整图像微。

接下来写css的微信的css语法与标准css语法几乎相同，但是不支持某些子集。这些也写在微信的开发文档中，但是我们通常都使用它们。 。需要谈论rpx，这是微信小程序中的自定义属性。此属性的定义是，它将所有屏幕的宽度视为750 rps，即，如果您获得iPhone 5和iPhone 6S，则其宽度为750 rpx。

但是它将计算一个像素等于多少rpx。在iphone5中，如果一个像素等于一个rpx，在iphone 6中，两个像素等于一个rpx。这样做的好处是可以减少UI适配的成本。

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

｜步骤2：处理点击事件

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

首先查看微信小程序定义的事件绑定过程：

在组件中绑定事件处理功能，例如bindtap，当用户单击该组件时，他将开始设置该视频的绑定。

突出显示的行表示我将功能轻敲名称与视频标签的点击绑定在一起。也就是说，当单击当前视频标签时，系统将调用名为tapname的方法，并将当前视频的某些参数传递给此tapname函数。

接下来，在项目中定义一个绑定，以将图像的click事件绑定到onTap方法。下一步是在JS中实现此onTap方法。

在JS中的onload下，重新启动一行并编写onTap：函数（元素），微信小程序官方文档中元素的定义包含几个属性：

type（事件类型）;

timeStamp（事件生成时的时间戳记）

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

currentTarget（当前时间一些属性值的集合）

接下来，我们需要实现一个名为tap的方法，该方法需要两个参数，第一个是page，第二个是element。页面就是这个，元素是刚刚定义的元素。传入后，您可以看到该方法被调用。点击日志以查看以下结果。

每次单击时，都会在下面显示一个水龙头，这意味着视频上的事件已成功传递给JS处理功能。

第一段代码中的元素是刚刚传递的clicked元素，currenttarget是当前被单击的目标...关注videoUrl，videoUrl是在开发中定义的内容，而不是系统附带它，请参阅它来自哪里？

data-video-id表示将当前视频ID作为图像标签上的属性附加到图像标签。单击图像标签后，JS可以从传递的元素中读取此值。

由于列表中有6个标签，因此有必要知道当前单击的标签是什么以及绑定到当前单击的标签的视频数据，以确定以后需要播放哪个视频。

id，我们不需要，请先将其删除。上面的文字是-video-url这个地方写成videoUrl略有不同。原因是微信小程序将帮助开发人员做一件事，删除数据及其后的水平线，然后自动进行驼峰。

以上句子的意思是从单击的元素获取绑定到当前标签的视频的播放URL。许多处于前端的学生可能会在脑海中产生疑问，为什么他们要花这么大的力气才能获得，而不是通过其他方式。因为微信小程序废除了文档和许多window方法，所以目的是使小程序成为纯数据驱动的编程思想，这意味着所有事件和所有数据都必须采用事件或消息的形式。开发人员无法主动获取当前显示的视频。

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

为了获得绑定到当前单击项的视频的播放地址，必须以这种方式实现，但不能以其他方式实现。这确实有点令人费解。

这个想法可以说是微信小程序中最重要的想法，也就是说，DOM模型几乎完全不可用。这可能会给许多前端开发带来麻烦。

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

让我们看看。现在还有另一件事要做。将视频标签添加到界面。该ID称为视频，该类称为Video。这主要是用于CSS绑定一段时间。

样式之后，第一个是显示。为什么要使用此属性？根据我的个人经验，如果要在微信中隐藏视频标签，则只有一种隐藏方法，即，将display属性设置为none即可隐藏视频。隐藏的可见性不起作用。

top表示视频标签在列表中从顶部开始的位置。带有两层花括号的所有内容都是JS中引用的变量。这两个变量之一是Covertop，另一个是videoDisply，src是currentUrL。说视频播放地址是什么，这也是第三个变量。

定义以上三个变量：

让我们再次看一下tap事件，然后直接复制三行。上一页page.setdata是对以下数据的更新，这是一种特殊的复制方法。 offsettop属性将告诉您当前单击的元素相对于其父节点向下移动了多少。 currentUrl是刚获得的网址。背面的videodisply：块表示现在可以显示视频元素。

尝试一下，页面刷新，表明更改已生效。您可以看到视频播放器已经出现，进度条显示了时间，但尚未开始。下一步是找到一种使其开始播放的方法。

首先查看微信小程序的定义：

微信定义了一个名为creatVideoContext的方法，这意味着传入videoid时，它将把当前videoid的视频元素绑定到系统的播放器，这是您在完成此操作后添加的。元素可以广播。

微信正式提供了四种方法：播放，暂停，搜寻和sendDanmu。

看一下代码，您可以看到creatVideoContext，传入的参数称为video，这意味着布局文件中定义的id等于video。

您可以发现该视频已开始播放，滑动列表，该视频位于该列表之后，并且在显示第二个视频后不再播放。

这是我自己发现的微信小程序中的错误。当我单击第二个视频时，它无法自动播放。当我手动单击控制栏时，它可能会触发播放。这是小程序系统中的错误。但是有一种解决方法：在原始方法中添加两个句子是为了设置超时时间，即在开始之前将事件延迟一段时间，然后在结束后500毫秒触发视频的播放点击事件。

微信官方建议使用内置的IDE进行开发。但是我通常会进行其他平台开发，因此我倾向于统一使用intellij，并且仅在编写代码后在微信小程序中进行调试。绕过该错误之后，您可以看到列表滚动时可以自动播放幻灯片视频。这样，我们基本上完成了第二个目标，即播放列表中的视频，并且在滚动列表时仅播放一个视频。