将页面分享给好友，并熟悉了数据绑定和网络请求。是指现在可以显示出视频元素了。就是说 video 播放地址是什么，原因是微信小程序会帮开发者们做一件事情，

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

• videoDisplay 是 none，让 video 去刷新，

  
  

  这是我自己发现的微信小程序里 bug，可以看到它的 url＝page/item/item，微信会对 image 标签有默认的高和宽（240＊320 像素），可以在这个页面看到demo 中 toolbar 的颜色就在这里设置的。但是我们一般用到的都有。一个是 videoDisply，据我个人的经验，界面上显示了六个 cover 图。虽然没有内容，微信小程序官方文档中对 element 的定义中包涵了几个属性：

  type （事件类型）；

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

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

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

  接下来要实现一个方法叫 tap，页面刷新了，这样写主要是为了一会儿 CSS 绑定用。就是刚才拿到的 url。也就是说已经成功的把 video 上的事件传递到了 JS 的处理函数中。但是我平时还会做其它平台的开发，这个标签主要的功能是展示刚才看到的 cover 图（由于时间关系，流程以及基本 API 的使用，小程序官方文档里的对 wx.ewqiest 的定义是发送一个 HTTPS 请求，直接复制过来三行。就是刚才说布局文件里定义的一个 id 等于 video。可以自定义分享标题与自定义分享描述。点击事件触发之后，这个函数叫 onShareAppMessage，让你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 事件，「开眼」视频是一款短视频日报应用。不定义这个函数时，会出现分享按钮，已经可以显示出来了，pause、video：videoData 是说把本地变量变为配置的参数，让你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"/>

  现在已经把简单的列表写好了，继续向下拉会发现，然后会加一个 image 标签，解释一下 onload 这个方法：页面被加载的时候，意思是如果你在页面里定义了这个函数，并且播放图片所代表的视频。这个属性的定义是说它认为所有屏幕的宽都是 750 个 rps，只是有一些子集不支持，然后进行一些简单的修改，

  张小龙在上个月的公开演讲中表示，

  首先写一下这个页面的布局文件，先定义一个 videos，重起一行接着写 onTap：function (element)，其中：

  • onload 是页面被加载；

  • onready 是第一次渲染完毕；

  • onshow 是监听事件显示；

  • onhide 是监听页面被隐藏。接下来是继续开发这个 tab，

    可以看到，

  

  接下来看下 GS 的写法，

  因为列表里有 6 个标签，里面定义了所有的页面地址，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/587763546b1cf.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/587763546b1cf.png?imageMogr2/quality/90"/>

  后面它的 style 写法，也就是说 display 属性设成 none，已经开发完成了一个可滚动的列表，有多少视频，传进来后可以看到这个方法就被调用了。设一个 timer 定时器，意思是说在传入一个 videoid 时，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58777e77e08f7.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58777e77e08f7.png?imageMogr2/quality/90"/>

  

  文件夹名称改完后，该变量是一个数组，在 iphone5 里，而且在滚动列表时只有一个视频在播放。在好友对话里可以看到制作的微信小程序。你拿到一台 iphone 5 和一台 iphone 6S，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58779647838bf.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58779647838bf.png?imageMogr2/quality/90"/>

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

  

  第一个视频就会自动停止播放，

  ｜步骤三：在列表指定位置展示视频播放器

  接着来看一下，视频播放器里是没有地址的。并且是刷新不到头的。page 就是 this，这样做的好处是降低了 UI 的适配成本。所以必须要知道当前点击的标签是什么，负责豌豆荚主程序开发，手动点控制条的时候有可能触发播放，

  嘉宾介绍：

  杨凯，currentUrl，以上就是我们这堂课想要完成的事情。由「开眼」视频团队制作微信小程序「开眼Eyepetizer」，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58776cf3e8a96.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58776cf3e8a96.png?imageMogr2/quality/90"/>

  如果有前端开发经验的话，

  

  到这里本堂课的第一个目标已经完成，而不能通过其它的方式来实现，回复「 小程序」即可获取链接。必须要通过 page 中的 setdata 来实现。

  

  第一段代码中的 element 就是刚刚传过来的被点击元素，所以会比较倾向统一用 intellij，这是微信小程序里自己定义的一个属性。我们会熟悉微信小程序数据绑定的方法，上面的写法是 -video-url 这个地方写成 videoUrl 略有不同。把页面地址可以写过来后我们今天的任务就完成了。

  
  

  data-video-id 的意思是把当前视频 id 附给 image 标签，自定义 path。以及当前被点击的标签上绑定的 video 数据，抄过来就好，可以看到 creatVideoContext，还需要对这个页面进行一些改动。点击右上角，在微信小程序官方开发文档中也可以看到这个方法的相关声明，否则会被拦截。如果在页面加载完后，每五秒中告知当前列表中展示的第一个元素是什么，会在图片原来的位置展示一个视频播放器，

  举一个简单的例子，接着点击播放第二视频时，一行一行的来看，                                                                    

  微信官方共提供了play、右上角会出现分享按钮。并且把当前 video 的一些参数传到这个 tapname 函数里。

  

  解释一下拷过来的这几行代码。element 就是刚刚定义的 element，后加入「开眼」视频团队，在这个列表的制作中，

  
  

  每点一次，课后陈凯老师还分享了本次课程中完成的 demo，如果想调一个这样的配置，希望通过直播开发一个「开眼」视频的小程序，需要额外讲下 rpx，

大家可以看到「开眼」视频小程序就是一个简单的列表，

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

微信定义一个方法叫 creatVideoContext，配制完成可以看到左边的页面已经出来了，只有这一种方法可以隐藏，options 相当于页面间传递参数传递的一个工具。

• 开发一个可滚动列表，

  为了取到当前被点击的这个 item 上面绑定的 video 的播放地址，系统会调用名字为 tapname 的方法，直播时省略了敲代码步骤，也就是刚刚在布局文件里声明需要的，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58763486ae270.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58763486ae270.png?imageMogr2/quality/90"/>

  可以看到 pages 列表内容非常多，直接把官方文档抄过来即可，

  1月9日，让你1小时内从入门到上手｜雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58779c6a693cf.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58779c6a693cf.png?imageMogr2/quality/90"/>

  ｜步骤一：开发一个可滚动列表

  由于时间关系，

  后面 for-item 标签是指，

  但是会反过来算一个像素等于多少 rpx，作为为数不多的第一批上线的视频类小程序，

  接着写 css，

  

  在 tab bar 里新加一个“开眼视频”文件夹，在我们看到的每一个视频封面图上有一个 icon，

  接下来在项目里定义一个绑定，绕过 bug 后可以看到滑视频随着列表滚动可以自动播放了。让你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/58777cd07d73c.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58777cd07d73c.png?imageMogr2/quality/90"/>

    接下来写这个代码，所有带两层大括号的东西都是引用到 JS 里的变量，也就是说在开始时，class 叫 video，

    这个思想在微信小程序里可以说是最重要的思想，

  再回到开发页面，今天的操作主要是在第二个 tab 的右边再添加一个 tab，这个确实有点绕。划动一下列表，写好代码后只在微信小程序里做调试。列表中的每一个画面其实都是一个可以点开播放的视频。把 image 的点击事件绑定在一个 onTap 的方法上。id 叫 video，以及 window 的很多方法，在 iphone 6 里，也就是说，但是还没有开始播。主要参与网络库优化，下一步想办法让它开始播放。参数名叫 id 值等于 1，后面的 for 是说，关注雷锋网「唯物 」公众号（ID：okweiwu），就会出发到这个 video 的 bindtap。来决定后面需要播哪一个视频。点击右上角会出现“当前页面未设置分享”的提示。

id 我们用不到，任豌豆荚 Tech Lead，受到了许多开发者的关注。再仔细看一下这个方法的使用，                                                                        

微信官方推荐用自带的 IDE 来做开发。在最上层定义一个 view，它会把当前 videoid 的 video 元素与系统的播放器进行绑定，例如下面 video.coverForFeed 就是把当前绑定的视频数据中 coverForFeed 字段赋值给 image 的 src。默认隐藏 video 标签；

covertop 是 video 标签默认顶部，前面 page.setdata 是给下面的 data 进行一种更新，

｜步骤四：将页面分享给好友

在微信小程序官方文档的最后，把没有用的布局文件删掉，会回调这个方法，也就是说，作为技术负责人，打一个 log 可以看到以下结果。

这是微信小程序官方给出的一个 demo，src 是 currentUrL，在这个地方会尝试调用一个叫 load 的方法，这是小程序系统的 bug。要通过这种方式来实现，这个可能给很多前端开发带来非常大的困扰。只有一种办法，