部署和運行整體架構(gòu)1. 準(zhǔn)備域名和證書2. Nginx 和 Node 代碼部署3. 配置 HTTPS4. 域名解析5. 開通 點播服務(wù)6. 準(zhǔn)備 云數(shù)據(jù)庫MySQL7. 啟動新片預(yù)告示例 Node 服務(wù)8. 啟動新片預(yù)告 Demo主要功能實現(xiàn)獲取視頻列表、展示 ...
新片預(yù)告是結(jié)合騰訊云點播 VOD和云數(shù)據(jù)庫 MySQL制作的一個微信小程序示例。在代碼結(jié)構(gòu)上包含如下兩部分:
app: 新片預(yù)告應(yīng)用包代碼,可直接在微信開發(fā)者工具中作為項目打開server: 搭建的Node服務(wù)端代碼,作為服務(wù)器和app通信,提供 CGI 接口示例用于拉取云數(shù)據(jù)庫上的視頻列表、評論列表,將評論數(shù)據(jù)提交到云數(shù)據(jù)庫新片預(yù)告主要功能如下:

拿到了本小程序源碼的朋友可以嘗試自己運行起來。

在微信小程序中,所有的網(wǎng)路請求受到嚴(yán)格限制,不滿足條件的域名和協(xié)議無法請求,具體包括:
騰訊云提供域名注冊和證書申請服務(wù),還沒有域名或者證書的可以去使用
域名注冊好之后,可以登錄微信公眾平臺配置通信域名了。

注意:需要將 www.qcloud.la 設(shè)置為上面申請的域名
小程序服務(wù)要運行,需要進(jìn)行以下幾步:
http://127.0.0.1:9994server 目錄的代碼到服務(wù)器上,如 /data/release/qcloud-applet-videonpm install 安裝依賴模塊npm install pm2 -g 安裝 pm2上述環(huán)境配置比較麻煩,新片預(yù)告的服務(wù)器運行代碼和配置已經(jīng)打包成騰訊云 CVM 鏡像,推薦大家直接使用。
- 鏡像部署完成之后,云主機上就有運行 WebSocket 服務(wù)的基本環(huán)境、代碼和配置了。
- 騰訊云用戶可以免費領(lǐng)取禮包,體驗騰訊云小程序解決方案。
- 鏡像已包含所有小程序的服務(wù)器環(huán)境與代碼,需要體驗小程序的朋友無需重復(fù)部署
鏡像中已經(jīng)部署了 nginx,需要在 /etc/nginx/conf.d 下修改配置中的域名、證書、私鑰。

配置完成后,即可啟動 nginx。
nginx
我們還需要添加域名記錄解析到我們的云服務(wù)器上,這樣才可以使用域名進(jìn)行 HTTPS 服務(wù)。
在騰訊云注冊的域名,可以直接使用云解析控制臺來添加主機記錄,直接選擇上面購買的 CVM。

解析生效后,我們在瀏覽器使用域名就可以進(jìn)行 HTTPS 訪問。

新片預(yù)告示例的播放資源是存儲在 騰訊云點播 上的mp4文件,要使用 點播 服務(wù),需要登錄 點播 管理控制臺,然后在其中完成以下操作:

目前微信小程序
video組件經(jīng)測試支持mp4和m3u8格式,其中 m3u8 格式只能在手機上使用,開發(fā)者可以使用騰訊云點播控制臺將視頻源轉(zhuǎn)碼成 mp4 或 m3u8 格式,并且騰訊云點播會對播放的資源進(jìn)行CDN加速。
示例中拉取的視頻和評論列表都是存儲在 云數(shù)據(jù)庫 上,要使用 云數(shù)據(jù)庫 服務(wù)需要完成以下操作
utf8編碼登錄按鈕,登錄到phpMyAdmin創(chuàng)建數(shù)據(jù)庫并在當(dāng)前數(shù)據(jù)庫中導(dǎo)入本示例中的SQL文件注意:導(dǎo)入SQL文件中包含了 點播 上傳的視頻列表,開發(fā)者可以基于云數(shù)據(jù)庫自行開發(fā)維護(hù)一個視頻發(fā)布管理系統(tǒng),因為此內(nèi)容跟本示例暫不相關(guān),所以不再詳述。
在鏡像中,新片預(yù)告示例的 Node 服務(wù)代碼已部署在目錄/data/release/qcloud-applet-video下:
進(jìn)入該目錄:
cd /data/release/qcloud-applet-video
在該目錄下有個名為config.js的配置文件(如下所示),按注釋修改對應(yīng)的 MySQL 配置:
module.exports = {
// Node 監(jiān)聽的端口號
port: '9994',
ROUTE_BASE_PATH: '/applet',
host: '填寫開通 MySQL 時分配的內(nèi)網(wǎng)IP',
user: '填寫MySQL用戶名',
password: '填寫MySQL密碼',
database: '填寫上一步中創(chuàng)建的MySQL數(shù)據(jù)名',
};
示例使用pm2管理 Node 進(jìn)程,執(zhí)行以下命令啟動 node 服務(wù):
pm2 start process.json
在微信開發(fā)者工具將新片預(yù)告應(yīng)用包源碼添加為項目,并把源文件config.js中的通訊域名修改成上面申請的域名。

然后點擊調(diào)試即可打開新片預(yù)告Demo開始體驗。

通過node的mysql模塊連接mysql,進(jìn)行查詢,插入操作
以下是查詢評論列表的示例代碼
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
});
//開啟數(shù)據(jù)庫連接
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,
});
});
//查詢完后關(guān)閉連接
connection.end();
<video src="{{videoUrl}}" binderror="videoErrorCallback"></video>
| 屬性名 | 類型 | 說明 |
|---|---|---|
| src | String | 要播放視頻的資源地址 |
| binderror | EventHandle | 當(dāng)發(fā)生錯誤時觸發(fā)error事件,event.detail = {errMsg: 'something wrong'} |
播放視頻使用的是video標(biāo)簽,目前官方文檔上只給出了兩個參數(shù)說明,筆者測試了src支持加載mp4和m3u8格式視頻,
video標(biāo)簽的控制條暫時沒辦法自定義樣式以及隱藏