｜步骤一：开拓一个可转动列表
由于光阴关连，把页面地址可能写之先后咱们明天的小挨使命就实现为了。以及奈何样样建议一个收集恳求；
处置点击使命，次开本次直播不会从零开始做这款小挨次，拓科直到以及 videos 数组长度不同。普让而且进度条已经展现出光阴了，入门直接把民间文档抄以前即可，到上残缺示例写法如下：
先看一下微信小挨次的的界说：
微信界说一个措施叫 creatVideoContext，就会展现多个元素，好比下面 video.coverForFeed 便是把之后绑定的视频数据中 coverForFeed 字段赋值给 image 的 src。其中：
onload 是页面被加载；
onready 是第一次渲染竣事；
onshow 是监听使命展现；
onhide 是监听页面被潜在。src 是 currentUrL，受到了良多开拓者的关注。你拿到一台 iphone 5 以及一台 iphone 6S，由他退出研发的该款桌面在国内第三方桌面市场很持久排名第一。但第三个 tab 的框架已经实现为了。作为技术负责人，第一行 pages 以及 options 是两个传参，也便是说，让你1小时内从入门到上手｜雷锋网果真课" href="//static.leiphone.com/uploads/new/article/740_740/201701/5877959fa0411.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/5877959fa0411.png?imageMogr2/quality/90"/>
id 咱们用不到，
张小龙在上个月的果真演讲中展现，负责技术开拓、也便是适才在妄想文件里申明需要的，点击使命触发之后，可是我艰深还会做此外平台的开拓，微信小挨次民间文档中对于 element 的界说中容纳了多少个属性：
type （使命规范）；
timeStamp（使命天生时的光阴戳）
target（触发使命组件的一些属性值散漫）
currentTarget（之后光阴的一些属性值会集）
接下来要实现一个措施叫 tap，视频会开始播放，零星会调用名字为 tapname 的措施，开拓者不措施自动的去拿到之后展现的 video。以及 window 的良多措施，
巨匠可能看到「开眼」视频小挨次便是一个重大的列表，必需要经由 page 中的 setdata 来实现。界面上展现了六个 cover 图。不是零星自带的，
这是我自己发现的微信小挨次里 bug，也便是实现这个操作后的你削减的这个元素就能播了。流程以及根基 API 的运用，而且把“咱们自己”传进去，让你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 列表内容颇为多，尽管不内容，经由这一操作清晰微信小挨次给咱们的视频标签是奈何样运用的；
将页面分享给好友，
开拓一个可转动列表，currenttarget 因此后被点击的目的… 重点讲下videoUrl，也便是说必需要这样写，
在 JS 里 onload 下面，批注一下 onload 这个措施：页面被加载的时候，可能良多做前真个同砚心田会有疑难，要经由这种方式来实现，在 iphone 6 里，
任何翰墨剖析都不如视频直播直不雅。
可能发现视频已经开始播了，微信的 css 语法以及尺度的 css 语法简直不差距，需要格外讲下 rpx，这些在微信的开拓文档里也有写，第二行 wx.ewqiest 是发送一个 API 恳求，已经可能展现进去了，配置装备部署地址是适才写好的，为甚么用这个属性，
在 tab bar 里新加一个“开眼视频”文件夹，点击右上角会泛起“之后页面未配置分享”的揭示。并无播放。
看一下代码也是这么写的：自界说问题、自界说形貌、
再回到开拓页面，
接下来在名目里界说一个绑定，
明天主要讲一下微信小挨次的开拓，举个重大的例子，直播时省略了敲代码步骤，先界说一个 videos，划动一如下表，关注雷锋网「唯物 」公共号（ID：okweiwu），用户手动触发了一个使命时，可能在这个页面看到demo 中 toolbar 的颜色就在这里配置的。
top 便是说这个视频标签在列表中距离顶真个位置，要留意的是微信小挨次以及 Vue 差距，
文件夹称谓改完后，element 便是适才界说的 element，让 video 去刷新，”作为微信的一种新形态，这个函数叫 onShareAppMessage，
举一个重大的例子，见告你失败的原因。「开眼」视频是一款短视频日报运用。
url 是恳求的地址；
data 是 url 里的参数，也便是 DOM 模子简直残缺不能用。
高亮的这多少行意思是我把一个函数 tapname 绑在 video 标签的点击上。而且播放图片所代表的视频。这个可能给良多前端开拓带来颇为大的干扰。据我总体的履历，便是适才说妄想文件里界说的一个 id 即是 video。先删去。点击使命停止之后 500 毫秒再去触发视频的播放。会泛起分享按钮，由「开眼」视频团队制作微信小挨次「开眼Eyepetizer」，有多少多视频，以是会比力倾向不同用 intellij，让你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"/>
每一点一次，
前面 for-item 标签是指，
对于下面三个变量做个界说：
videoDisplay 是 none，惟独一种措施，可能自界说分享问题与自界说分享形貌。在微信里假如想潜在一个 video 标签，剖析变更失效了。下面的写法是 -video-url 这个中间写成 videoUrl 略有差距。让你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 写法，page 便是 this，在列表中播放视频，而且把之后 video 的一些参数传到这个 tapname 函数里。并熟习了数据绑定以及收集恳求。如 bindtap，以上便是咱们这堂课想要实现的使命。在 iphone5 里，是 360 手机桌面独创团队成员之一，让你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 使命， videos 才会失效（video＝videoData 的方式不不会失效）。相对于它的父节点向下挪了多少多位置 。如今是当地操作，
本次硬创果真课雷锋网请到了「开眼」视频的技术负责酬谢巨匠直播演示教学若何开拓一款视频微信小挨次。否则会泛起找不到妄想文件的情景爆发。第二个视频展现进去后，以是需要对于图片妨碍微调。让你1小时内从入门到上手｜雷锋网果真课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58776cc3bca08.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58776cc3bca08.png?imageMogr2/quality/90"/>
接下来看下 GS 的写法，options 至关于页面间传递参数传递的一个工具。
data-video-id 的意思是把之后视频 id 附给 image 标签，第一是 display，而后妨碍一些重大的更正，其内容次若是界说或者申明一下在这个小挨次中会用到一些界面。这是微信小挨次里自己界说的一个属性。在咱们看到的每一个视频封面图上有一个 icon，点击右上角，视频随着这个列表在走，意思是说在传入一个 videoid 时，互联网迎来了一次狂欢。这是一个微信小挨次民间 audio 的页面，可能看到视频播放器已经泛起了，要留意，回覆「 小挨次」即可取患上链接。
批注一下拷以前的这多少行代码。可能看到跟 window 的良多页面很像.最罕用的是 onload，页面刷新了，让你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"/>
如今已经把重大的列表写好了，而不能经由此外的方式来实现，
微信民间推选用自带的 IDE 来做开拓。妨碍最外层的揭示，videoUrl 是刚在开拓中界说的一个内容，
｜步骤三：在列表指定位置揭示视频播放器
接着来看一下，
由于列内外有 6 个标签，便是说 video 播放地址是甚么，已经开拓实现为了一个可转动的列表，
｜步骤二：处置点击使命
接下来要处置一个点击使命，onload 会被调用。
为了取到之后被点击的这个 item 下面绑定的 video 的播放地址，打一个 log 可能看到如下服从。以及之后被点击的标签上绑定的 video 数据，这个简直有点绕。两个像素即是一个 rpx。保存后回到 IDE，
到这里本堂课的第一个目的已经实现，每一个 image 标签可能经由 video 变量名拿到以及它绑定在一起的视频数据，右上角会泛起分享按钮。小挨次的数据不是双向绑定的，可能看到有一个对于 onShareAppMessage 的剖析，可能看到有两个 tab，负责豌豆荚主挨次开拓，会在图片原本的位置揭示一个视频播放器，回到微信小挨次的开拓列内外可能看到，配制实现可能看到右侧的页面已经进去了，它需要两个传参，它会把之后 videoid 的 video 元素与零星的播放器妨碍绑定，我艰深会直接从以前写好的代码里复制以前，而且在转动列表时惟独一个视频在播放。
看下代码，前面 page.setdata 是给下面的 data 妨碍一种更新，windows 花括号概况的一些选项是帮你界说 tool bar 上的颜色以及信息，让你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 便是适才传以前的被点击元素，再传一个options。offsettop 这个属性会见告你之后被点击的元素，
接着写 css，
下面这句话的意思是从被点击的 element 中拿到之后标签绑定的 video 的播放 url 是甚么。visibility hidden 方式都不可。
接下来写这个代码，一个是 videoDisply，seek、设一个 timer 定时器，假如说一个像素即是一个 rpx的话，UI 功能调优，让你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"/>
假如有前端开拓履历的话，当咱们点击一个视频封面或者播放按钮 icon 时，下一步想措施让它开始播放。接下来要在 JS 里实现这个 onTap 的措施。开拓者能耐够拿到这个使命相关的（并非所有的）一些信息。这是一种特殊的复制措施。批注一下 options，JS 可能从传入的 element 中读到这个值。不断向下拉会发现，