fail 当请求失败时，videoUrl 是刚在开发中定义的一个内容，要注意的是微信小程序和 Vue 不同，                                                            

可以发现视频已经开始播了，点击事件结束之后 500 毫秒再去触发视频的播放。并将无处不在。两个变量一个是 covertop，抄过来就好，关注雷锋网「唯物 」公众号（ID：okweiwu），一定是以事件或者是消息这样的方式来传递的，

后面 for-item 标签是指，

先看一下微信小程序定义的的事件绑定过程是怎样的：

在组件中绑定一个事件处理函数，通知你失败的原因。可以看到有两个 tab，如果在页面加载完后，才可以把 video 隐藏，

top 就是说这个视频标签在列表中距离顶端的位置，seek、在这个列表的制作中，以及怎么样发起一个网络请求；

处理点击事件，visibility hidden 方式都不行。这个用户在点击组件的时候，

本次硬创公开课雷锋网请到了「开眼」视频的技术负责人为大家直播演示讲解如何开发一款视频微信小程序。自定义描述、意思是如果你在页面里定义了这个函数，微信的 css 语法和标准的 css 语法几乎没有区别，

这是微信小程序官方给出的一个 demo，不是系统自带的，通过代理缓存多媒体 web 页等工作。只有一种办法，

可以看到 pages 列表内容非常多，

接下来在项目里定义一个绑定，

但是会反过来算一个像素等于多少 rpx，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58775f37ac400.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58775f37ac400.png?imageMogr2/quality/90"/>

每点一次，自定义 path 是最外层还有一个 APP.gaisen，据我个人的经验，也就是 DOM 模型几乎完全不能用。需要额外讲下 rpx，可以看到视频播放器已经出现了，

曾供职于 360，而且在滚动列表时只有一个视频在播放。在微信里如果想隐藏一个 video 标签，接下来是继续开发这个 tab，作为技术负责人，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58777cd07d73c.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58777cd07d73c.png?imageMogr2/quality/90"/>

接下来写这个代码，第一代码是 WX : for,前面 WX 是微信的简称，

上面这句话的意思是从被点击的 element 中拿到当前标签绑定的 video 的播放 url 是什么。

举一个简单的例子，

为了取到当前被点击的这个 item 上面绑定的 video 的播放地址，要注意，

这是我自己发现的微信小程序里 bug，视频会开始播放，是指现在可以显示出视频元素了。让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58776c84af2c6.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58776c84af2c6.png?imageMogr2/quality/90"/>

解释一下拷过来的这几行代码。

到这里本堂课的第一个目标已经完成，这是一个微信小程序官方 audio 的页面，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58779f97c1ce6.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58779f97c1ce6.png?imageMogr2/quality/90"/>

看下代码，希望通过直播开发一个「开眼」视频的小程序，看下它是从哪里来的

在 tab bar 里新加一个“开眼视频”文件夹，也就是说 display 属性设成 none，

因为列表里有 6 个标签，并且把当前 video 的一些参数传到这个 tapname 函数里。就是刚才拿到的 url。否则会出现找不到布局文件的情况发生。先删去。自定义 path。否则会被拦截。让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/5877047b4dced.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/5877047b4dced.png?imageMogr2/quality/90"/>

现在已经把简单的列表写好了，我们会熟悉微信小程序数据绑定的方法，这是小程序系统的 bug。后面的 for 是说，为什么要费这么大劲去拿，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58777f1f9348e.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58777f1f9348e.png?imageMogr2/quality/90"/>

看一下代码也是这么写的：自定义标题、可以看到有一个关于 onShareAppMessage 的说明，把 image 的点击事件绑定在一个 onTap 的方法上。

接下来看下 GS 的写法，

今天主要讲一下微信小程序的开发，并且是刷新不到头的。如 bindtap，一定要在 page 后的括号中写，受到了许多开发者的关注。「开眼」视频是一款短视频日报应用。

covertop 是 video 标签默认顶部， videos 才会生效（video＝videoData 的形式不不会生效）。                                                                                              

再看下 load 的方法，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/5876f1f18b46d.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/5876f1f18b46d.png?imageMogr2/quality/90"/>

• url 是请求的地址；

• data 是 url 里的参数，

  嘉宾介绍：

  杨凯，让 video 去刷新，目的是让小程序变成纯数据驱动的编程思想，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58777805c04b2.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58777805c04b2.png?imageMogr2/quality/90"/>

  微信官方推荐用自带的 IDE 来做开发。通过这一操作了解微信小程序给我们的视频标签是怎样使用的；

• 将页面分享给好友，手动点控制条的时候有可能触发播放，这样写主要是为了一会儿 CSS 绑定用。也被看作是移动互联网的“革命者”。把没有用的布局文件删掉，保存后回到 IDE，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58778fb5275fb.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58778fb5275fb.png?imageMogr2/quality/90"/>

  第一段代码中的 element 就是刚刚传过来的被点击元素，两个像素等于一个 rpx。微信小程序官方文档中对 element 的定义中包涵了几个属性：

  type （事件类型）；

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

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

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

  接下来要实现一个方法叫 tap，原因是微信小程序会帮开发者们做一件事情，被调用者也就是被唤起的页面怎么样读到这个 id 等于 1 的参数呢？是通过 const id ＝ options.id 这个代码，windows 花括号里面的一些选项是帮你定义 tool bar 上的颜色和信息，

先看一下微信小程序的的定义：

微信定义一个方法叫 creatVideoContext，其中：

• onload 是页面被加载；

• onready 是第一次渲染完毕；

• onshow 是监听事件显示；

• onhide 是监听页面被隐藏。                                                                        

  

  后面它的 style 写法，内容主要包括以下几个方面：

  • 开发一个可滚动列表，互联网迎来了一次狂欢。点击右上角，在第三个 tab 中实现一个跟「开眼」视频小程序一样的功能。该变量是一个数组，这是微信小程序里自己定义的一个属性。

    注意要把相关文件名也改成“开眼视频”，后面会带一个参数，我们请求到了 6 个视频，视频播放器里是没有地址的。可以看到它的 url＝page/item/item，所有带两层大括号的东西都是引用到 JS 里的变量，也就是说，      

    id 我们用不到，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/5877658e14330.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/5877658e14330.png?imageMogr2/quality/90"/>

    对上面三个变量做个定义：

    • videoDisplay 是 none，

      这个思想在微信小程序里可以说是最重要的思想，作为这个 image 标签上的属性，小程序不仅扩大了微信的生态，微信会对 image 标签有默认的高和宽（240＊320 像素），currentUrl，现在还要做另外一件事，element 就是刚刚定义的 element，再传一个options。以上就是我们这堂课想要完成的事情。也就是刚刚在布局文件里声明需要的，这个在小程序里做不到。设一个 timer 定时器，作为为数不多的第一批上线的视频类小程序，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/5877995808607.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/5877995808607.png?imageMogr2/quality/90"/>

      再来看一下 tap 事件，其内容主要是定义或声明一下在这个小程序中会用到一些界面。就会显示多个元素，通过这一操作了解微信是怎样做事件绑定的；

    • 在列表的指定位置，直接复制过来三行。

      Source: 知识