微信小程序云端解决方案教程四：视频应用场景

网站首页 关于我们 小程序案例 小程序解决方案 小程序资讯 联系我们

小程序资讯

部署和运转

整体架构

1. 准备工作域名和证书

2. Nginx 和 Node 代码部署

3. 布局 HTTPS

4. 域名解析

5. 启用 流媒体服务

6. 准备工作 云数据库MySQL

7. 启动新片预告示例 Node 服务

8. 启动新片预告 Demo

主要功能同时实现

以获取视频列表、展现评论、递交评论

播出视频

新片预告就是融合腾讯云流媒体 VOD和云数据库 MySQL制作的一个微信小程序示例。在代码结构上涵盖如下两部分：

app: 新片预告应用领域纸盒代码，可以轻易在微信开发者工具中做为项目关上

server: 构建的Node服务端代码，做为服务器和app通信，提供更多 CGI USB示例用作拉取云数据库上的视频列表、评论列表，将评论数据递交至云数据库

新片预告主要功能如下：

积极支持分页翻转读取视频列表

页面海报重定向至详情页播出视频

对视频展开评论

展现视频的评论列表

部署和运转

领到利斯勒小程序源码的朋友可以尝试自己运转出来。

整体架构

1. 准备工作域名和证书

在微信小程序中，所有的网路命令受严苛管制，不满足条件的域名和协议无法命令，具体内容包含：

只容许和在 MP 中布局不好的域名展开通信，如果还没域名，须要登记注册一个。

网络命令必须跑 HTTPS 协议，所以你还须要为你的域名提出申请一个 SSL 证书。

腾讯云提供更多域名登记注册和证书提出申请服务，还没域名或者证书的可以回去采用

域名登记注册不好之后，可以登入微信公众平台布局通信域名了。

特别注意：须要将 www.qcloud.la 设置为上面提出申请的域名

2. Nginx 和 Node 代码部署

小程序服务必须运转，须要展开以下几步：

部署 Nginx，Nginx 的加装和部署恳请大家自行搜寻（特别注意须要把 SSL 模块也编程进来）

布局 Nginx 逆向代理至 http://127.0.0.1:9994

Node 运转环境，可以加装 Node V6.6.0

部署 server 目录的代码至服务器上，例如 /data/release/qcloud-applet-video

采用 npm install 加装倚赖模块

采用 npm install pm2 -g 加装 pm2

上述环境布局比较麻烦，新片预告的服务器运转代码和布局已经装箱成腾讯云 CVM 镜像，所推荐大家轻易采用。

镜像部署顺利完成之后，云主机上就存有运转 WebSocket 服务的基本环境、代码和布局了。

腾讯云用户可以免费申领礼包，体验腾讯云小程序解决方案。

镜像已涵盖所有小程序的服务器环境与代码，须要体验小程序的朋友无须重复部署

3. 布局 HTTPS

镜像中已经部署了 nginx，须要在 /etc/nginx/conf.d 下修正布局中的域名、证书、私钥。

布局顺利完成后，即可启动 nginx。

nginx

4. 域名解析

我们还须要嵌入域名记录解析至我们的云服务器上，这样才可以采用域名展开 HTTPS 服务。

在腾讯云登记注册的域名，可以轻易采用云解析控制器去嵌入主机记录，轻易挑选上面出售的 CVM。

解析生效后，我们在浏览器采用域名就可以展开 HTTPS 出访。

5. 启用 流媒体服务

新片预告示例的播出资源就是存储在 腾讯云流媒体 上的mp4文件，必须采用 流媒体 服务，须要登入 流媒体 管理控制器，然后在其中顺利完成以下操作方式：

上载视频资源，流媒体几乎积极支持所有主流的视频格式上载

转码顺利后以获取mp4或m3u8源地址

目前微信小程序video组件经测试积极支持mp4和m3u8格式，其中 m3u8 格式就可以在手机上采用，开发者可以采用腾讯云流媒体控制器将视频源转码成 mp4 或 m3u8 格式，并且腾讯云流媒体可以对播出的资源展开CDN快速。

6. 准备工作 云数据库MySQL

示例中拉取的视频和评论列表都就是存储在 云数据库 上，必须采用 云数据库 服务须要顺利完成以下操作方式

出售，特别注意出售的云数据库须要与云服务器同在一个地域分区

初始化流程，本示例采用的就是utf8编码

页面云数据库 控制器操作方式栏的登入按钮，登入至phpMyAdmin建立数据库并在当前数据库中引入本示例中的SQL文件

特别注意：引入SQL文件中涵盖了 流媒体 上载的视频列表，开发者可以基于云数据库自行研发保护一个视频公布管理系统，因为此内容跟本示例暂不有关，所以不再详细描述。

7. 启动新片预告示例 Node 服务

在镜像中，新片预告示例的 Node 服务代码已部署在目录/data/release/qcloud-applet-video之下：

步入该目录：

cd /data/release/qcloud-applet-video

在该目录下有个名叫config.js的配置文件（如下右图），按注解修正对应的 MySQL 布局：

module.exports = {

// Node 监听的端口号

port: '9994',

ROUTE_BASE_PATH: '/applet',

host: '核对启用 MySQL 时分配的内网IP',

user: '核对MySQL用户名',

password: '核对MySQL密码',

database: '核对上一步中建立的MySQL数据名',

};

示例采用pm2管理 Node 进程，继续执行以下命令启动 node 服务：

pm2 start process.json

8. 启动新片预告 Demo

在微信开发者工具将新片预告应用领域纸盒源码嵌入为项目，并把源文件config.js中的通讯域名修正成上面提出申请的域名。

然后页面调试即可关上新片预告Demo已经开始体验。

主要功能同时实现

以获取视频列表、展现评论、递交评论

通过node的mysql模块相连接mysql，展开查阅，填入操作方式

以下就是查阅评论列表的示例代码

const mysql = require('mysql');

const config = require('../../../config');

let vid = this.req.query.vid;

if (!vid) {

this.res.json({ code: -1, msg: 'failed', data: {} });

return;

}

//CDB Mysql布局

let connection = mysql.createConnection({

host: config.host,

password: config.password,

user: config.user,

database: config.database

});

//打开数据库相连接

connection.connect((err) => {

if (err) {

this.res.json({ code: -1, msg: 'failed', data: {} });

}

});

//查阅列表

connection.query('SELECT * from comment where vid = ? order by id desc', [vid], (err, result) => {

if (err) {

this.res.json({ code: -1, msg: 'failed', data: {} });

return;

}

this.res.json({

code: 0,

msg: 'ok',

data: result,

});

});

//查阅回去后停用相连接

connection.end();

播出视频

属性名

类型

src