新片預告是結合騰訊云點播 VOD和云數據庫 MySQL制作的一個微信小程序示例。在代碼結構上包含如下兩部分:
app
: 新片預告應用包代碼,可直接在微信開發(fā)者工具中作為項目打開server
: 搭建的Node服務端代碼,作為服務器和app
通信,提供 CGI 接口示例用于拉取云數據庫上的視頻列表、評論列表,將評論數據提交到云數據庫新片預告主要功能如下:
拿到了本小程序源碼的朋友可以嘗試自己運行起來。
在微信小程序中,所有的網路請求受到嚴格限制,不滿足條件的域名和協(xié)議無法請求,具體包括:
騰訊云提供域名注冊和證書申請服務,還沒有域名或者證書的可以去使用
域名注冊好之后,可以登錄微信公眾平臺配置通信域名了。
注意:需要將 www.qcloud.la
設置為上面申請的域名
小程序服務要運行,需要進行以下幾步:
http://127.0.0.1:9994
server
目錄的代碼到服務器上,如 /data/release/qcloud-applet-video
npm install
安裝依賴模塊npm install pm2 -g
安裝 pm2上述環(huán)境配置比較麻煩,新片預告的服務器運行代碼和配置已經打包成騰訊云 CVM 鏡像,推薦大家直接使用。
- 鏡像部署完成之后,云主機上就有運行 WebSocket 服務的基本環(huán)境、代碼和配置了。
- 騰訊云用戶可以免費領取禮包,體驗騰訊云小程序解決方案。
- 鏡像已包含所有小程序的服務器環(huán)境與代碼,需要體驗小程序的朋友無需重復部署
鏡像中已經部署了 nginx,需要在 /etc/nginx/conf.d
下修改配置中的域名、證書、私鑰。
配置完成后,即可啟動 nginx。
nginx
我們還需要添加域名記錄解析到我們的云服務器上,這樣才可以使用域名進行 HTTPS 服務。
在騰訊云注冊的域名,可以直接使用云解析控制臺來添加主機記錄,直接選擇上面購買的 CVM。
解析生效后,我們在瀏覽器使用域名就可以進行 HTTPS 訪問。
新片預告示例的播放資源是存儲在 騰訊云點播 上的mp4文件,要使用 點播 服務,需要登錄 點播 管理控制臺,然后在其中完成以下操作:
目前微信小程序
video
組件經測試支持mp4
和m3u8
格式,其中 m3u8 格式只能在手機上使用,開發(fā)者可以使用騰訊云點播控制臺將視頻源轉碼成 mp4 或 m3u8 格式,并且騰訊云點播會對播放的資源進行CDN加速。
示例中拉取的視頻和評論列表都是存儲在 云數據庫 上,要使用 云數據庫 服務需要完成以下操作
utf8
編碼登錄
按鈕,登錄到phpMyAdmin創(chuàng)建數據庫
并在當前數據庫中導入本示例中的SQL文件注意:導入SQL文件中包含了 點播 上傳的視頻列表,開發(fā)者可以基于云數據庫自行開發(fā)維護一個視頻發(fā)布管理系統(tǒng),因為此內容跟本示例暫不相關,所以不再詳述。
在鏡像中,新片預告示例的 Node 服務代碼已部署在目錄/data/release/qcloud-applet-video
下:
進入該目錄:
cd /data/release/qcloud-applet-video
在該目錄下有個名為config.js
的配置文件(如下所示),按注釋修改對應的 MySQL 配置:
module.exports = {
// Node 監(jiān)聽的端口號
port: '9994',
ROUTE_BASE_PATH: '/applet',
host: '填寫開通 MySQL 時分配的內網IP',
user: '填寫MySQL用戶名',
password: '填寫MySQL密碼',
database: '填寫上一步中創(chuàng)建的MySQL數據名',
};
示例使用pm2
管理 Node 進程,執(zhí)行以下命令啟動 node 服務:
pm2 start process.json
在微信開發(fā)者工具將新片預告應用包源碼添加為項目,并把源文件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();
<video src="{{videoUrl}}" binderror="videoErrorCallback"></video>
屬性名 | 類型 | 說明 |
---|---|---|
src
相關資訊RELEVANT NEWS
集錦服務SERVICE
最新案例LATEST CASES
咨詢
|