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

如何用微信小程序做一个视频网站？有做视频内容的朋友想做个小程序让所有视频都有视频细节。那么如何开始呢？下面小系列介绍一下。

如何用微信小程序做一个视频网站？

以下小系列以一个电影小程序为例，告诉你如何制作一个视频网站小程序。在学习这篇文章的时候，大家应该都很熟悉微信小程序的目录结构，每个文件所代表的含义，以及小程序api的使用，所以在本文中就不详细说明了。废话不多说，先说效果图：

一、目录结构

白鹭翼，使用的开发工具，主目录描述：

从目录中可以看出，整体结构简单，主要有三个界面：首页、moviedetail页面和影院列表页面。

二、首页

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

这里我想说，作者喜欢用微信小程序选择tabbar的效果，因为没有技术难度，就不多说了。

接下来，进入首页。一个接口的文件结构不能脱离三个文件：xxx.js，xxx.wxml，xxx.wxss

让我们首先看看小程序的布局代码：

这里作者承认自己写的时候比较懒，我直接在风格上写了一些标签属性。但是，在实际开发中，比较好在。wxss文件，并通过自定义类名(或id)，布局相同的地方可以直接引用同一个类，否则有些属性会像作者一样重复编写。

小程序js代码往下看：

视频列表的信息放入定义的infos[]数组，小程序中不存在json解析。在wx.request请求下获得的res取相应的值res.data.data.movie，在带有wx:for="{{infos}} "的homepage.html标记中直接遍历该值。元素默认为item，值为“item”。价值名称”。

三、视频详情页面

小程序页面渲染：

视频详细信息页面是以下代码：

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

滤镜：模糊(30px)和-web kit-filter :模糊(30px)形成高斯模糊效果。在info和position:absolute中组合position:relative和z-index:1，在blur中组合z-index:0，可以显示上述效果。关键是info中的z-index应该大于blur中的z-index，表示显示在blur上面。还需要确保信息是相对的，模糊是的。没接触过css3的有兴趣的朋友可以代码自己试试。

四.视频列表页面

你只需要在这里简单列出各种视频信息。布局没有难度，代码也比较简单。为了省事，这里就不赘述了。

下面是题目的开头。微信小程序开放云开发能力。标题到此结束

比较近微信小程序开辟了一个新功能，即“小程序云开发”，可以帮助开发者快速搭建微信小程序后端服务。

“小程序云开发”为开发者提供云功能、云数据库、云文件存储，并将这些能力封装到具体的接口中，被wx.cloud.xxx调用

有开发者说“小程序云开发”的所有业务逻辑只需要在小程序端完成，跳过了复杂的管理逻辑，但不能在小程序外调用。

从这个角度来说，微信小程序是一个自成一体的系统，是一个相对孤立的、独立的应用系统。它要做的，甚至是其他手机系统一直想做却一直没有成功的事情。

在智能移动时代，ios和安卓脱颖而出。后来，windows phone、firefox os等系统不断出现挑战ios和android，但比较终失败。

移动市场牢牢掌握在苹果和谷歌手中。我们在之前关于锤子的文章中也提到，老罗希望跳出安卓，摆脱枷锁，但是阻力巨大。

但现在看来，至少在中国市场，微信小程序很可能完成我们祖先的未竟事业，从这两大巨头瓜分的市场上咬下一块肉。有意思的是，腾讯曾经自己做rom，作者还特意写了评测，后来就不了了之了。

大家能想到的是，在移动应用市场上，能被打死的不是移动系统，而是聊天应用，但事实却是如此令人惊讶。

微信小程序能脱颖而出主要有三个原因。

首先是解决孤岛问题。移动应用的孤岛问题伴随着移动智能时代。应用是独立的、碎片化的，数据是不合理的。

但是，微信小程序不一样。一方面，云功能、云数据库、云文件存储都是腾讯统一提供给开发者的；另一方面，用户数据也是统一的。所有微信小程序都可以获取微信用户的账号系统，用户不需要为每个小程序注册一个账号。

二是解决应用深度问题。12年13年左右，业界对于移动app孤岛问题的解决方案基本都是“移动浏览器html5”，但是这个模式有一个问题，html5无法提供app的应用深度。

相比html5，微信小程序的功能更接近原生应用，现在很多微信小程序可以替代独立应用，比如公众评论等等。

比较后，解决推广成本问题。这意味着开发商的推广成本低，也意味着用户的获取成本低。一个普通的app要投放市场才能推广给用户，用户只要安装这个市场就可以了，不然还没。