微信小程序制作视频网站怎么弄?

　　微信小程序制作视频网站怎么弄?有些做视频内容的朋友，想要做个小程序，让视频都有视频详情。那么该如何下手呢?下面小编给大家介绍介绍。

微信小程序制作视频网站怎么弄?

　　下面小编以某个电影的小程序为例，告诉大家如何做视频网站的小程序。在学习本文章的时候大家要熟悉微信小程序的目录结构以及每个文件所代表的的含义和小程序API的使用，所以文中不会详细说明。废话不多说，先上效果图：

　　一、目录结构

　　采用的开发工具Egret Wing，主要目录说明：

　　从目录可知整体结构简单，主要就是三个界面：首页homepage、视频详情页moviedetail、视频列表页cinema。

　　二、首页

　　tab小程序代码，打开app.json如图：

　　这里我想说下，微信小程序自带对tabBar选择效果作者还是挺喜欢的，由于这段没什么技术难点，所以就不多说了。

　　接下来进入首页homepage，一个界面的文件结构离不开三个文件：xxx.js、xxx.wxml、xxx.wxss

　　先来看看小程序布局代码：

　　在这里作者承认当初写的时候偷了下懒，有些标签属*我直接用style写了，但真正开发时，最好把每个标签的style写在.wxss文件里，通过自定义的class名称(或者id)，相同布局的地方可以直接引用同一个class就可以了，不然会像作者这样有些属*重复写了几次。

　　小程序js代码往下看：

　　视频列表的信息本放到了定义的infos[]数组中，小程序也不存在json解析，在wx.request请求下得到的res取相应的值res.data.data.movie，直接在homepage.html标签中用wx:for=“{{infos}}”遍历，元素默认为item，取值的时候用“item.值的名称”就可以取到数据。

　　三、视频详情页

　　小程序页面效果图：

　　视频详情页便是如下代码：

　　这里值得注意的是：高斯模糊和绝对布局

　　filter:blur(30px)和-webkit-filter:blur(30px)形成了高斯模糊的效果。info中的position:relative、z-index:1，blur中的position：absolute、z-index:0相结合就能展示出上面的效果，关键在于info中的z-index要大于blur的，表示显示在blur的上方，还要保证info是相对的，blur是绝对的，感兴趣并且没接触过CSS3的朋友可以下载代码自己去试试改改看看效果。

　　四、视频列表页

　　大家在这里只需要简单的列出各种视频信息就行了，在布局上没难点，代码也比较简单，小编在这里为了省事就不过多赘述了。

　　以上就是小编为大家搜集的微信小程序制作视频网站怎么弄?的全部内容了，希望可以帮到大家，实现一个视频网站的小程序没有大家想的那么复杂，多学习就行了。更多精彩尽在微小乔。

　　微信小程序视频点播怎么使用?

　　微信小视频怎么带音乐具体步骤

　　微信小程序视频是什么?有哪些小程序视频