快捷

1月9日，微信微信小程序正式上线，小程序开互联网迎来了一次狂欢。发科锋网

张小龙在上个月的普让公开演讲中表示，“小程序是入门一种比现有所有 App 更加灵活，更加唾手可得的到上一种形态，并将无处不在。手雷”作为微信的公开一种新形态，小程序不仅扩大了微信的微信生态，也被看作是小程序开移动互联网的“革命者”。

任何文字解析都不如视频直播直观。发科锋网

本次硬创公开课雷锋网请到了「开眼」视频的普让技术负责人为大家直播演示讲解如何开发一款视频微信小程序。「开眼」视频是入门一款短视频日报应用。由「开眼」视频团队制作微信小程序「开眼Eyepetizer」，到上作为为数不多的手雷第一批上线的视频类小程序，受到了许多开发者的关注。

嘉宾介绍：

杨凯，「开眼」视频团队技术负责人。

曾供职于 360，是 360 手机桌面创始团队成员之一，由他参与研发的该款桌面在国内第三方桌面市场很长时间排名第一。2014 年加入豌豆荚，任豌豆荚 Tech Lead，负责豌豆荚主程序开发，主要参与网络库优化，UI 性能调优，通过代理缓存多媒体 web 页等工作。后加入「开眼」视频团队，作为技术负责人，负责技术开发、迭代工作。

下文为雷锋网整理的本次公开课直播分享中的要点。课后陈凯老师还分享了本次课程中完成的 demo，关注雷锋网「唯物 」公众号（ID：okweiwu），回复「 小程序」即可获取链接。

今天主要讲一下微信小程序的开发，希望通过直播开发一个「开眼」视频的小程序，帮大家了解微信小程序的开发步骤、流程以及基本 API 的使用，内容主要包括以下几个方面：

• 开发一个可滚动列表，在这个列表的制作中，我们会熟悉微信小程序数据绑定的方法，以及怎么样发起一个网络请求；

• 处理点击事件，通过这一操作了解微信是怎样做事件绑定的；

• 在列表的指定位置，展现一个视频播放器，通过这一操作了解微信小程序给我们的视频标签是怎样使用的；

• 将页面分享给好友，在好友对话里可以看到制作的微信小程序。

大家可以看到「开眼」视频小程序就是一个简单的列表，列表中的每一个画面其实都是一个可以点开播放的视频。进一步分析可以得知，在我们看到的每一个视频封面图上有一个 icon，图下面是这个视频的文字介绍，标题以及分类。继续向下拉会发现，有多少视频，就会显示多个元素，并且是刷新不到头的。当我们点击一个视频封面或播放按钮 icon 时，视频会开始播放，接着点击播放第二视频时，第一个视频就会自动停止播放，以上就是我们这堂课想要完成的事情。

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

由于时间关系，本次直播不会从零开始做这款小程序，会直接从微信的 demo （小程序组件）中开始操作。

这是微信小程序官方给出的一个 demo，可以看到有两个 tab，今天的操作主要是在第二个 tab 的右边再添加一个 tab，在第三个 tab 中实现一个跟「开眼」视频小程序一样的功能。

可以看到 pages 列表内容非常多，其内容主要是定义或声明一下在这个小程序中会用到一些界面。windows 花括号里面的一些选项是帮你定义 tool bar 上的颜色和信息，可以在这个页面看到demo 中 toolbar 的颜色就在这里设置的。      

在 tab bar 里新加一个“开眼视频”文件夹，配置地址是刚刚写好的，抄过来就好，配制完成可以看到左边的页面已经出来了，虽然没有内容，但第三个 tab 的框架已经完成了。接下来是继续开发这个 tab，我一般会直接从之前写好的代码里复制过来，然后进行一些简单的修改，演示一下变化过程。

注意要把相关文件名也改成“开眼视频”，否则会出现找不到布局文件的情况发生。

文件夹名称改完后，可以看到刚在第三个 tab 里添加的内容，已经可以显示出来了，这是一个微信小程序官方 audio 的页面，还需要对这个页面进行一些改动。

首先写一下这个页面的布局文件，把没有用的布局文件删掉，在最上层定义一个 view，进行最外层的展示，然后会加一个 image 标签，这个标签主要的功能是展示刚才看到的 cover 图（由于时间关系，直播时省略了敲代码步骤，直接从之前的文件中拷贝）。

解释一下拷过来的这几行代码。第一代码是 WX : for,前面 WX 是微信的简称，后面的 for 是说，它会在你的 JS 文件里找到一个名字叫 videos 的变量，该变量是一个数组，image 这个便签会重复多次，直到和 videos 数组长度一致。

后面 for-item 标签是指，每一个 image 标签可以通过 video 变量名拿到和它绑定在一起的视频数据，例如下面 video.coverForFeed 就是把当前绑定的视频数据中 coverForFeed 字段赋值给 image 的 src。

接下来看下 GS 的写法，先定义一个 videos，也就是刚刚在布局文件里声明需要的，这个 videos 会在 onload 里赋值。解释一下 onload 这个方法：页面被加载的时候，onload 会被调用。在微信小程序官方开发文档中也可以看到这个方法的相关声明，其中：

• onload 是页面被加载；

• onready 是第一次渲染完毕；

• onshow 是监听事件显示；

• onhide 是监听页面被隐藏。

如果有前端开发经验的话，可以看到跟 window 的很多页面很像.最常用的是 onload，再仔细看一下这个方法的使用，在这个地方会尝试调用一个叫 load 的方法，并且把“我们自己”传进去，再传一个options。解释一下 options，举个简单的例子，如果想调一个这样的配置，可以看到它的 url＝page/item/item，后面会带一个参数，参数名叫 id 值等于 1，这个方法是在调用者那边使用的，被调用者也就是被唤起的页面怎么样读到这个 id 等于 1 的参数呢？是通过 const id ＝ options.id 这个代码，options 相当于页面间传递参数传递的一个工具。                                                                                              

再看下 load 的方法，一行一行的来看，第一行 pages 和 options 是两个传参，第二行 wx.ewqiest 是发送一个 API 请求，注意，小程序官方文档里的对 wx.ewqiest 的定义是发送一个 HTTPS 请求，现在是本地操作，如果是线上环境的话，一定要写成 HTTPS，否则会被拦截。完整示例写法如下：

• url 是请求的地址；

• data 是 url 里的参数，也就是我们传进去的参数；

• header 是我们发送 HTTPS 请求的时候所带的 header；

• success 当发送成功时，这个方法会被回掉；

• fail 当请求失败时，会回调这个方法，通知你失败的原因。

再回到开发页面，video：videoData 是说把本地变量变为配置的参数，要注意的是微信小程序和 Vue 不同，小程序的数据不是双向绑定的，或者说不是默认双向绑定的，如果数据或数据结构发生了改变，想通知到 video 层级上，让 video 去刷新，必须要通过 page 中的 setdata 来实现。也就是说必须要这样写， videos 才会生效（video＝videoData 的形式不不会生效）。

现在已经把简单的列表写好了，回到微信小程序的开发列表里可以看到，已经显示出了我们想要的效果，我们请求到了 6 个视频，界面上显示了六个 cover 图。微信会对 image 标签有默认的高和宽（240＊320 像素），所以需要对图片进行微调。

接着写 css，微信的 css 语法和标准的 css 语法几乎没有区别，只是有一些子集不支持，这些在微信的开发文档里也有写，但是我们一般用到的都有。需要额外讲下 rpx，这是微信小程序里自己定义的一个属性。这个属性的定义是说它认为所有屏幕的宽都是 750 个 rps，也就是说，你拿到一台 iphone 5 和一台 iphone 6S，它的宽都是750 rpx。

但是会反过来算一个像素等于多少 rpx，在 iphone5 里，假如说一个像素等于一个 rpx的话，在 iphone 6 里，两个像素等于一个 rpx。这样做的好处是降低了 UI 的适配成本。

到这里本堂课的第一个目标已经完成，已经开发完成了一个可滚动的列表，并熟悉了数据绑定和网络请求。 

｜步骤二：处理点击事件

接下来要处理一个点击事件，点击事件触发之后，会在图片原来的位置展示一个视频播放器，并且播放图片所代表的视频。

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

在组件中绑定一个事件处理函数，如 bindtap，这个用户在点击组件的时候，就会出发到这个 video 的 bindtap。

高亮的这几行意思是我把一个函数 tapname 绑在 video 标签的点击上。也就是说当前这个 video 标签被点击时，系统会调用名字为 tapname 的方法，并且把当前 video 的一些参数传到这个 tapname 函数里。

接下来在项目里定义一个绑定，把 image 的点击事件绑定在一个 onTap 的方法上。接下来要在 JS 里实现这个 onTap 的方法。

在 JS 里 onload 下面，重起一行接着写 onTap：function (element)，微信小程序官方文档中对 element 的定义中包涵了几个属性：

type （事件类型）；

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

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

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

接下来要实现一个方法叫 tap，它需要两个传参，第一个是 page，第二个是 element。page 就是 this，element 就是刚刚定义的 element，传进来后可以看到这个方法就被调用了。打一个 log 可以看到以下结果。

每点一次，下面都会出现一个 tap，也就是说已经成功的把 video 上的事件传递到了 JS 的处理函数中。

第一段代码中的 element 就是刚刚传过来的被点击元素，currenttarget 是当前被点击的目标… 重点讲下videoUrl，videoUrl 是刚在开发中定义的一个内容，不是系统自带的，看下它是从哪里来的

data-video-id 的意思是把当前视频 id 附给 image 标签，作为这个 image 标签上的属性，当点击一个 image 标签是，JS 可以从传入的 element 中读到这个值。

因为列表里有 6 个标签，所以必须要知道当前点击的标签是什么，以及当前被点击的标签上绑定的 video 数据，来决定后面需要播哪一个视频。

id 我们用不到，先删去。上面的写法是 -video-url 这个地方写成 videoUrl 略有不同。原因是微信小程序会帮开发者们做一件事情，把 data 和后面的横线去掉，然后自动驼峰。

上面这句话的意思是从被点击的 element 中拿到当前标签绑定的 video 的播放 url 是什么。可能很多做前端的同学心里会有疑问，为什么要费这么大劲去拿，而不通过一些其它的手段。因为微信小程序废除了 document，以及 window 的很多方法，目的是让小程序变成纯数据驱动的编程思想，也就是说所有的事件和所有的数据，一定是以事件或者是消息这样的方式来传递的，开发者没有办法主动的去拿到当前显示的 video。

举一个简单的例子，如果在页面加载完后，设一个 timer 定时器，每五秒中告知当前列表中展示的第一个元素是什么，这个在小程序里做不到。因为没有办法主动拿到当前列表这个元素，也就没办法拿到列表上展示的内容，只有一种办法，用户手动触发了一个事件时，开发者才可能拿到这个事件相关的（并不是所有的）一些信息。

为了取到当前被点击的这个 item 上面绑定的 video 的播放地址，要通过这种方式来实现，而不能通过其它的方式来实现，这个确实有点绕。

这个思想在微信小程序里可以说是最重要的思想，也就是 DOM 模型几乎完全不能用。这个可能给很多前端开发带来非常大的困扰。

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

接着来看一下，现在还要做另外一件事，要在界面里加一个 video 标签，id 叫 video，class 叫 video，这样写主要是为了一会儿 CSS 绑定用。

后面它的 style 写法，第一是 display，为什么用这个属性，据我个人的经验，在微信里如果想隐藏一个 video 标签，只有这一种方法可以隐藏，也就是说 display 属性设成 none，才可以把 video 隐藏，visibility hidden 方式都不行。

top 就是说这个视频标签在列表中距离顶端的位置，所有带两层大括号的东西都是引用到 JS 里的变量，两个变量一个是 covertop，一个是 videoDisply，src 是 currentUrL，就是说 video 播放地址是什么，这也是第三个变量。                                                                        

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

• videoDisplay 是 none，默认隐藏 video 标签；

• covertop 是 video 标签默认顶部，隐藏在那里都可以；

• currentUrl 开始时为空，也就是说在开始时，视频播放器里是没有地址的。

再来看一下 tap 事件，直接复制过来三行。前面 page.setdata 是给下面的 data 进行一种更新，这是一种特殊的复制方法。offsettop 这个属性会告诉你当前被点击的元素，相对它的父节点向下挪了多少位置 。currentUrl，就是刚才拿到的 url。后面的 videodisply：block，是指现在可以显示出视频元素了。

试一下，页面刷新了，说明更改生效了。可以看到视频播放器已经出现了，而且进度条已经显示出时间了，但是还没有开始播。下一步想办法让它开始播放。

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

微信定义一个方法叫 creatVideoContext，意思是说在传入一个 videoid 时，它会把当前 videoid 的 video 元素与系统的播放器进行绑定，也就是完成这个操作后的你添加的这个元素就可以播了。                                                                    

微信官方共提供了play、pause、seek、sendDanmu 四种方法。

看下代码，可以看到 creatVideoContext，传入的参数叫video，就是刚才说布局文件里定义的一个 id 等于 video。                                                            

可以发现视频已经开始播了，划动一下列表，视频跟着这个列表在走，第二个视频显示出来后，并没有播放。

这是我自己发现的微信小程序里 bug，点击第二个视频时不能自动播放，手动点控制条的时候有可能触发播放，这是小程序系统的 bug。但有方法可以绕过：在原来的方法上加两句话，就是设一个 timeout，也就是将这个事件延迟一段时间再出发，点击事件结束之后 500 毫秒再去触发视频的播放。

微信官方推荐用自带的 IDE 来做开发。但是我平时还会做其它平台的开发，所以会比较倾向统一用 intellij，写好代码后只在微信小程序里做调试。绕过 bug 后可以看到滑视频随着列表滚动可以自动播放了。这样我们基本上完成第二个目标，在列表中播放视频，而且在滚动列表时只有一个视频在播放。

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

在微信小程序官方文档的最后，可以看到有一个关于 onShareAppMessage 的说明，意思是如果你在页面里定义了这个函数，这个函数叫 onShareAppMessage，右上角会出现分享按钮。

可以看到，不定义这个函数时，点击右上角会出现“当前页面未设置分享”的提示。

接下来写这个代码，直接把官方文档抄过来即可，要注意，设置页面元素时，一定要在 page 后的括号中写，也就是说，一定要在 page 页面里设置有关这个页面的系统回调。保存后回到 IDE，点击右上角，会出现分享按钮，可以自定义分享标题与自定义分享描述。

看一下代码也是这么写的：自定义标题、自定义描述、自定义 path。自定义 path 是最外层还有一个 APP.gaisen，里面定义了所有的页面地址，把页面地址可以写过来后我们今天的任务就完成了。