内容摘要：1月9日，微信小程序正式上线，互联网迎来了一次狂欢。张小龙在上个月的揭露讲演中表明，“小程序是一种比现有一切 App 愈加灵敏，愈加垂手而得的一种形状，并将无处不在。”作为微信的一种新形状，小程序不只

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，里边界说了一切的页面地址，把页面地址能够写过来后咱们今日的使命就完结了。

原创文章，未经授权制止转载。概况见转载须知。

内容来源：https://harmonyscentsg.com/app-1/cờ vua online tải,https://chatbotjud-hml.saude.mg.gov.br/app-1/sonic-.-exe