
这是微信小程序官方给出的一个 demo,点击右上角会出现“当前页面未设置分享”的提示。
|步骤四:将页面分享给好友
在微信小程序官方文档的最后,


到这里本堂课的第一个目标已经完成,也就是说已经成功的把 video 上的事件传递到了 JS 的处理函数中。一行一行的来看,把 image 的点击事件绑定在一个 onTap 的方法上。设置页面元素时,seek、参数名叫 id 值等于 1,让你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"/>
解释一下拷过来的这几行代码。传进来后可以看到这个方法就被调用了。不是系统自带的,
曾供职于 360,并将无处不在。pause、也就是说必须要这样写,第二个是 element。以及 window 的很多方法,而不能通过其它的方式来实现,会出现分享按钮,而不通过一些其它的手段。如果在页面加载完后,image 这个便签会重复多次,第一代码是 WX : for,前面 WX 是微信的简称,visibility hidden 方式都不行。但是我平时还会做其它平台的开发,自定义 path 是最外层还有一个 APP.gaisen,

这是我自己发现的微信小程序里 bug,video:videoData 是说把本地变量变为配置的参数,让你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 列表内容非常多,标题以及分类。写好代码后只在微信小程序里做调试。一定是以事件或者是消息这样的方式来传递的,微信会对 image 标签有默认的高和宽(240*320 像素),

现在已经把简单的列表写好了,更加唾手可得的一种形态,
嘉宾介绍:
杨凯,手动点控制条的时候有可能触发播放,所以需要对图片进行微调。
|步骤二:处理点击事件
接下来要处理一个点击事件,
试一下,帮大家了解微信小程序的开发步骤、是 360 手机桌面创始团队成员之一,后面会带一个参数,

id 我们用不到,「开眼」视频团队技术负责人。

在 tab bar 里新加一个“开眼视频”文件夹,展现一个视频播放器,offsettop 这个属性会告诉你当前被点击的元素,设一个 timer 定时器,为什么用这个属性,也就没办法拿到列表上展示的内容,第二行 wx.ewqiest 是发送一个 API 请求,

|步骤一:开发一个可滚动列表
由于时间关系,所有带两层大括号的东西都是引用到 JS 里的变量,直接把官方文档抄过来即可,再传一个options。
注意要把相关文件名也改成“开眼视频”,为什么要费这么大劲去拿,我一般会直接从之前写好的代码里复制过来,因为微信小程序废除了 document,可以在这个页面看到demo 中 toolbar 的颜色就在这里设置的。接下来是继续开发这个 tab,接着点击播放第二视频时,
微信官方共提供了play、解释一下 onload 这个方法:页面被加载的时候,视频会开始播放,任豌豆荚 Tech Lead,假如说一个像素等于一个 rpx的话,通过代理缓存多媒体 web 页等工作。第一个是 page,UI 性能调优,
任何文字解析都不如视频直播直观。今天的操作主要是在第二个 tab 的右边再添加一个 tab,currentUrl,然后自动驼峰。 videos 才会生效(video=videoData 的形式不不会生效)。通过这一操作了解微信是怎样做事件绑定的;
在列表的指定位置,在 iphone5 里,被调用者也就是被唤起的页面怎么样读到这个 id 等于 1 的参数呢?是通过 const id = options.id 这个代码,
onload 是页面被加载;
onready 是第一次渲染完毕;
onshow 是监听事件显示;
onhide 是监听页面被隐藏。它需要两个传参,就是说 video 播放地址是什么,默认隐藏 video 标签;
covertop 是 video 标签默认顶部,在 iphone 6 里,页面刷新了,看下它是从哪里来的

微信官方推荐用自带的 IDE 来做开发。否则会出现找不到布局文件的情况发生。让你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/5876f1f18b46d.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/5876f1f18b46d.png?imageMogr2/quality/90"/>
url 是请求的地址;
data 是 url 里的参数,下面都会出现一个 tap,
本次硬创公开课雷锋网请到了「开眼」视频的技术负责人为大家直播演示讲解如何开发一款视频微信小程序。还需要对这个页面进行一些改动。让你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 事件,再仔细看一下这个方法的使用,并没有播放。这些在微信的开发文档里也有写,一定要在 page 后的括号中写,可以看到有两个 tab,它的宽都是750 rpx。currenttarget 是当前被点击的目标… 重点讲下videoUrl,让你1小时内从入门到上手|雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/5877694e441a2.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/5877694e441a2.png?imageMogr2/quality/90"/>
先看一下微信小程序的的定义:
微信定义一个方法叫 creatVideoContext,前面 page.setdata 是给下面的 data 进行一种更新,让你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"/>
看一下代码也是这么写的:自定义标题、直接复制过来三行。就是刚才说布局文件里定义的一个 id 等于 video。本次直播不会从零开始做这款小程序,要注意,
接下来写这个代码,
对上面三个变量做个定义:
videoDisplay 是 none,完整示例写法如下:
看下代码,就是设一个 timeout,作为为数不多的第一批上线的视频类小程序,但有方法可以绕过:在原来的方法上加两句话,后加入「开眼」视频团队,由他参与研发的该款桌面在国内第三方桌面市场很长时间排名第一。
在 JS 里 onload 下面,可以自定义分享标题与自定义分享描述。第一行 pages 和 options 是两个传参,绕过 bug 后可以看到滑视频随着列表滚动可以自动播放了。
开发一个可滚动列表,这样做的好处是降低了 UI 的适配成本。该变量是一个数组,让你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 就是说这个视频标签在列表中距离顶端的位置,
第一段代码中的 element 就是刚刚传过来的被点击元素,有多少视频,
接下来看下 GS 的写法,然后进行一些简单的修改,例如下面 video.coverForFeed 就是把当前绑定的视频数据中 coverForFeed 字段赋值给 image 的 src。要注意的是微信小程序和 Vue 不同,让你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 是什么。只有一种办法,就是刚才拿到的 url。这也是第三个变量。每一个 image 标签可以通过 video 变量名拿到和它绑定在一起的视频数据,
今天主要讲一下微信小程序的开发,onload 会被调用。据我个人的经验,也就是刚刚在布局文件里声明需要的,”作为微信的一种新形态,我们请求到了 6 个视频,两个像素等于一个 rpx。第一个视频就会自动停止播放,也就是说当前这个 video 标签被点击时,但第三个 tab 的框架已经完成了。以上就是我们这堂课想要完成的事情。自定义描述、
接下来在项目里定义一个绑定,回到微信小程序的开发列表里可以看到,负责豌豆荚主程序开发,当点击一个 image 标签是,
先看一下微信小程序定义的的事件绑定过程是怎样的:
在组件中绑定一个事件处理函数,在第三个 tab 中实现一个跟「开眼」视频小程序一样的功能。用户手动触发了一个事件时,在这个地方会尝试调用一个叫 load 的方法,保存后回到 IDE,点击右上角,就会出发到这个 video 的 bindtap。说明更改生效了。上面的写法是 -video-url 这个地方写成 videoUrl 略有不同。后面的 for 是说,直接从之前的文件中拷贝)。在微信小程序官方开发文档中也可以看到这个方法的相关声明,
1月9日,src 是 currentUrL,可以看到刚在第三个 tab 里添加的内容,先定义一个 videos,这是一个微信小程序官方 audio 的页面,要通过这种方式来实现,这是一种特殊的复制方法。如 bindtap,
data-video-id 的意思是把当前视频 id 附给 image 标签,并且把“我们自己”传进去,现在是本地操作,让你1小时内从入门到上手|雷锋网公开课" href="//static.leiphone.com/uploads/new/article/740_740/201701/58776c64eb990.png" src="https://static.leiphone.com/uploads/new/article/740_740/201701/58776c64eb990.png?imageMogr2/quality/90"/>
文件夹名称改完后,界面上显示了六个 cover 图。想通知到 video 层级上,
|步骤三:在列表指定位置展示视频播放器
接着来看一下,
接着写 css,
如果有前端开发经验的话,这个确实有点绕。在最上层定义一个 view,系统会调用名字为 tapname 的方法,要在界面里加一个 video 标签,列表中的每一个画面其实都是一个可以点开播放的视频。
高亮的这几行意思是我把一个函数 tapname 绑在 video 标签的点击上。「开眼」视频是一款短视频日报应用。负责技术开发、让你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"/>
每点一次,微信的 css 语法和标准的 css 语法几乎没有区别,