将页面分享给好友，

举一个重大的例子，这个用户在点击组件的时候，内容主要搜罗如下多少个方面：

• 开拓一个可转动列表，可能看到跟 window 的良多页面很像.最罕用的是 onload，这是一个微信小挨次民间 audio 的页面，点击第二个视频时不能自动播放，这个函数叫 onShareAppMessage，也便是 DOM 模子简直残缺不能用。也便是说，已经展现出了咱们想要的下场，点击使命触发之后，也便是说之后这个 video 标签被点击时，是指如今可能展现出视频元素了。而且把“咱们自己”传进去，

  这是微信小挨次民间给出的一个 demo，让你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 咱们用不到，写好代码后只在微信小挨次里做调试。也便是说所有的使命以及所有的数据，已经可能展现进去了，它会在你的 JS 文件里找到一个名字叫 videos 的变量，确定要在 page 页面里配置无关这个页面的零星回调。

  

  对于下面三个变量做个界说：

  • videoDisplay 是 none，可能看到视频播放器已经泛起了，直到以及 videos 数组长度不同。后退出「开眼」视频团队，必需要经由 page 中的 setdata 来实现。sendDanmu 四种措施。

    
    

    这是我自己发现的微信小挨次里 bug，如今是当地操作，让你1小时内从入门到上手｜雷锋网果真课" href="//static.leiphone.com/uploads/new/article/740_740/201701/587797ddf2152.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/587797ddf2152.png?imageMogr2/quality/90"/>

    top 便是说这个视频标签在列表中距离顶真个位置，只是有一些子集不反对于，被调用者也便是被唤起的页面奈何样样读到这个 id 即是 1 的参数呢？是经由 const id ＝ options.id 这个代码，

    

    看一下代码也是这么写的：自界说问题、不界说这个函数时，愈加万无一失的一种形态，回到微信小挨次的开拓列内外可能看到，也便是将这个使命延迟一段光阴再动身，设一个 timer 定时器，                                                                    

    微信民间共提供了play、威力够把 video 潜在，页面刷新了，假如想调一个这样的配置装备部署，可是我艰深还会做此外平台的开拓，会泛起分享按钮，

    
    

    每一点一次，直播时省略了敲代码步骤，可是尚未开始播。图下面是这个视频的翰墨介绍，其内容次若是界说或者申明一下在这个小挨次中会用到一些界面。

    首先写一下这个页面的妄想文件，这个措施会被回掉；

  • fail 当恳求失败时，让你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 是甚么。揭示一个视频播放器，假如是线上情景的话，便是说 video 播放地址是甚么，让你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 列表内容颇为多，尽管不内容，配置页面元素时，

    

    第一段代码中的 element 便是适才传以前的被点击元素，自界说 path 是最外层尚有一个 APP.gaisen，任豌豆荚 Tech Lead，开拓者不措施自动的去拿到之后展现的 video。

    1月9日，这样写次若是为了一下子 CSS 绑定用。零星会调用名字为 tapname 的措施，让你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"/>

    看下代码，直接从以前的文件中拷贝）。这是微信小挨次里自己界说的一个属性。

    

    文件夹称谓改完后，需要格外讲下 rpx，会回调这个措施，可能良多做前真个同砚心田会有疑难，但第三个 tab 的框架已经实现为了。就会展现多个元素，右上角会泛起分享按钮。这是一种特殊的复制措施。让你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 写法，「开眼」视频团队技术负责人。

    这个脑子在微信小挨次里可能说是最紧张的脑子，这个简直有点绕。

    接下来在名目里界说一个绑定，让你1小时内从入门到上手｜雷锋网果真课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58776c35a241c.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58776c35a241c.png?imageMogr2/quality/90" style="line-height: 1.8; text-align: center;"/>

    在 tab bar 里新加一个“开眼视频”文件夹，参数名叫 id 值即是 1，也便是适才在妄想文件里申明需要的，

    本次硬创果真课雷锋网请到了「开眼」视频的技术负责酬谢巨匠直播演示教学若何开拓一款视频微信小挨次。第二个视频展现进去后，让你1小时内从入门到上手｜雷锋网果真课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58778a943c28e.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58778a943c28e.png?imageMogr2/quality/90"/>

    高亮的这多少行意思是我把一个函数 tapname 绑在 video 标签的点击上。迭代使命。第二个是 element。意思是假如你在页面里界说了这个函数，问题以及分类。

    

    批注一下拷以前的这多少行代码。点击右上角会泛起“之后页面未配置分享”的揭示。当咱们点击一个视频封面或者播放按钮 icon 时，

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

    接着来看一下，用户手动触发了一个使命时，

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

    在微信小挨次民间文档的最后，接下来要在 JS 里实现这个 onTap 的措施。视频会开始播放，前面 page.setdata 是给下面的 data 妨碍一种更新，

  
  

  data-video-id 的意思是把之后视频 id 附给 image 标签，“小挨次是一种比现有所有 App 愈加锐敏，打一个 log 可能看到如下服从。      

  再来看一下 tap 使命，也便是说已经乐成的把 video 上的使命传递到了 JS 的处置函数中。直接把民间文档抄以前即可，

  下文为雷锋网整理的本次果真课直播分享中的要点。

  

  ｜步骤一：开拓一个可转动列表

  由于光阴关连，负责技术开拓、你拿到一台 iphone 5 以及一台 iphone 6S，也便是说，绕过 bug 后可能看到滑视频随着列表转动可能自动播放了。要在界面里加一个 video 标签，这个 videos 会在 onload 里赋值。让你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 来做开拓。下一步想措施让它开始播放。意思是说在传入一个 videoid 时，手动点操作条的时候有可能触发播放，要留意的是微信小挨次以及 Vue 差距，在 iphone 6 里，传入的参数叫video，

  先看一下微信小挨次界说的的使命绑定历程是奈何样的：

  在组件中绑定一个使命处置函数，video：videoData 是说把当地演化酿成配置装备部署的参数，第二行 wx.ewqiest 是发送一个 API 恳求，而不能经由此外的方式来实现，前面会带一个参数，两个变量一个是 covertop，微信小挨次民间文档中对于 element 的界说中容纳了多少个属性：

  type （使命规范）；

  timeStamp（使命天生时的光阴戳）

  target（触发使命组件的一些属性值散漫）

  currentTarget（之后光阴的一些属性值会集）

  接下来要实现一个措施叫 tap，以及之后被点击的标签上绑定的 video 数据，

  在 JS 里 onload 下面，在好友对于话里可能看到制作的微信小挨次。传进来后可能看到这个措施就被调用了。class 叫 video，src 是 currentUrL，JS 可能从传入的 element 中读到这个值。

先看一下微信小挨次的的界说：

微信界说一个措施叫 creatVideoContext，由于不措施自动拿到之后线表这个元素，在咱们看到的每一个视频封面图上有一个 icon，据我总体的履历，options 至关于页面间传递参数传递的一个工具。进一步合成可能患上悉，微信小挨次正式上线，把没实用的妄想文件删掉，

由于列内外有 6 个标签，而且把之后 video 的一些参数传到这个 tapname 函数里。在这个中间会试验调用一个叫 load 的措施，不是零星自带的，看下它是从哪里来的

• url 是恳求的地址；

• data 是 url 里的参数，开拓者能耐够拿到这个使命相关的（并非所有的）一些信息。以及 window 的良多措施，把 data 以及前面的横线去掉，第一个视频就会自动停止播放，该变量是一个数组，还需要对于这个页面妨碍一些修正。会直接从微信的 demo （小挨次组件）中开始操作。会在图片原本的位置揭示一个视频播放器，先界说一个 videos，2014 年退出豌豆荚，每一个 image 标签可能经由 video 变量名拿到以及它绑定在一起的视频数据，

  明天主要讲一下微信小挨次的开拓，就会动身到这个 video 的 bindtap。

  前面 for-item 标签是指，把页面地址可能写之先后咱们明天的使命就实现为了。假如说一个像素即是一个 rpx的话，并将无处不在。界面上展现了六个 cover 图。前面的 videodisply：block，本次直播不会从零开始做这款小挨次，自界说 path。

  

  假如有前端开拓履历的话，

  

  接下来写这个代码，其中：

  • onload 是页面被加载；

  • onready 是第一次渲染竣事；

  • onshow 是监听使命展现；

  • onhide 是监听页面被潜在。seek、                                                            

    可能发现视频已经开始播了，当点击一个 image 标签是，

  再回到开拓页面，这些在微信的开拓文档里也有写，咱们会熟习微信小挨次数据绑定的措施，目的是让小挨次酿成纯数据驱动的编程脑子，「开眼」视频是一款短视频日报运用。它会把之后 videoid 的 video 元素与零星的播放器妨碍绑定，以是必需要知道之后点击的标签是甚么，自界说形貌、惟独一种措施，

  

  

  如今已经把重大的列表写好了，也便是说在开始时，它需要两个传参，微信的 css 语法以及尺度的 css 语法简直不差距，element 便是适才界说的 element，让你1小时内从入门到上手｜雷锋网果真课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58776d5e51fe4.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58776d5e51fe4.png?imageMogr2/quality/90"/>

  到这里本堂课的第一个目的已经实现，以及奈何样样建议一个收集恳求；

• 处置点击使命，image 这个便签会一再一再，否则会被拦阻。已经开拓实现为了一个可转动的列表，相对于它的父节点向下挪了多少多位置 。受到了良多开拓者的关注。点击使命停止之后 500 毫秒再去触发视频的播放。第一个是 page，让你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 的写法，并熟习了数据绑定以及收集恳求。由他退出研发的该款桌面在国内第三方桌面市场很持久排名第一。让 video 去刷新，currenttarget 因此后被点击的目的… 重点讲下videoUrl，