微信小程序开发科普，让你1小时内从入门到上手｜硬创公开课|亚美体育app最新版下载

，这些在微信的研发文档里也有写出，但是我们一般中用的都有。必须额外讲下 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，里面定义了所有的页面地址，把页面地址可以写过来后我们今天的任务就已完成了。原创文章，予以许可禁令刊登。下文闻刊登须知。

本文来源：亚美体育app-www.cqwzgl.cn