新片預告是結合騰訊雲(yun) 點播 VOD和雲(yun) 數據庫 MySQL製作的一個(ge) 微信小程序示例。在代碼結構上包含如下兩(liang) 部分：

• app: 新片預告應用包代碼，可直接在微信開發者工具中作為項目打開
• server: 搭建的Node服務端代碼，作為服務器和app通信，提供 CGI 接口示例用於拉取雲數據庫上的視頻列表、評論列表，將評論數據提交到雲數據庫

新片預告主要功能如下：

• 支持分頁滾動加載視頻列表
• 點擊海報跳轉至詳情頁播放視頻
• 對視頻進行評論
• 展示視頻的評論列表

部署和運行

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

整體架構

1. 準備域名和證書

在微信小程序中，所有的網路請求受到嚴(yan) 格限製，不滿足條件的域名和協議無法請求，具體(ti) 包括：

• 隻允許和在 MP 中配置好的域名進行通信，如果還沒有域名，需要注冊一個。
• 網絡請求必須走 HTTPS 協議，所以你還需要為你的域名申請一個 SSL 證書。

騰訊雲(yun) 提供域名注冊(ce) 和證書(shu) 申請服務，還沒有域名或者證書(shu) 的可以去使用

域名注冊(ce) 好之後，可以登錄微信公眾(zhong) 平台配置通信域名了。

注意：需要將 www.qcloud.la 設置為(wei) 上麵申請的域名

2. Nginx 和 Node 代碼部署

小程序服務要運行，需要進行以下幾步：

• 部署 Nginx，Nginx 的安裝和部署請大家自行搜索（注意需要把 SSL 模塊也編譯進去）
• 配置 Nginx 反向代理到 https://127.0.0.1:9994
• Node 運行環境，可以安裝 Node V6.6.0
• 部署 server 目錄的代碼到服務器上，如 /data/release/qcloud-applet-video
• 使用 npm install 安裝依賴模塊
• 使用 npm install pm2 -g 安裝 pm2

上述環境配置比較麻煩，新片預告的服務器運行代碼和配置已經打包成騰訊雲(yun) CVM 鏡像，推薦大家直接使用。

• 鏡像部署完成之後，雲主機上就有運行 WebSocket 服務的基本環境、代碼和配置了。
• 騰訊雲用戶可以免費領取禮包，體驗騰訊雲小程序解決方案。
• 鏡像已包含所有小程序的服務器環境與代碼，需要體驗小程序的朋友無需重複部署

3. 配置 HTTPS

鏡像中已經部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、證書(shu) 、私鑰。

配置完成後，即可啟動 nginx。

nginx

4. 域名解析

我們(men) 還需要添加域名記錄解析到我們(men) 的雲(yun) 服務器上，這樣才可以使用域名進行 HTTPS 服務。

在騰訊雲(yun) 注冊(ce) 的域名，可以直接使用雲(yun) 解析控製台來添加主機記錄，直接選擇上麵購買(mai) 的 CVM。

解析生效後，我們(men) 在瀏覽器使用域名就可以進行 HTTPS 訪問。

5. 開通 點播服務

新片預告示例的播放資源是存儲(chu) 在 騰訊雲(yun) 點播 上的mp4文件，要使用 點播 服務，需要登錄 點播 管理控製台，然後在其中完成以下操作：

• 上傳視頻資源，點播幾乎支持所有主流的視頻格式上傳
• 轉碼成功後獲取mp4或m3u8源地址

目前微信小程序video組件經測試支持mp4和m3u8格式，其中 m3u8 格式隻能在手機上使用，開發者可以使用騰訊雲(yun) 點播控製台將視頻源轉碼成 mp4 或 m3u8 格式，並且騰訊雲(yun) 點播會(hui) 對播放的資源進行CDN加速。

6. 準備 雲數據庫MySQL

示例中拉取的視頻和評論列表都是存儲(chu) 在 雲(yun) 數據庫 上，要使用 雲(yun) 數據庫 服務需要完成以下操作

• 購買，注意購買的雲數據庫需要與雲服務器同在一個地域分區
• 初始化流程，本示例選用的是utf8編碼
• 點擊雲數據庫 控製台操作欄的登錄按鈕，登錄到phpMyAdmin創建數據庫並在當前數據庫中導入本示例中的SQL文件

注意：導入SQL文件中包含了 點播 上傳(chuan) 的視頻列表，開發者可以基於(yu) 雲(yun) 數據庫自行開發維護一個(ge) 視頻發布管理係統，因為(wei) 此內(nei) 容跟本示例暫不相關(guan) ，所以不再詳述。

7. 啟動新片預告示例 Node 服務

在鏡像中，新片預告示例的 Node 服務代碼已部署在目錄/data/release/qcloud-applet-video下：

進入該目錄：

cd /data/release/qcloud-applet-video

在該目錄下有個(ge) 名為(wei) config.js的配置文件（如下所示），按注釋修改對應的 MySQL 配置：

module.exports = { // Node 監聽的端口號 port: '9994', ROUTE_BASE_PATH: '/applet', host: '填寫(xie) 開通 MySQL 時分配的內(nei) 網IP', user: '填寫(xie) MySQL用戶名', password: '填寫(xie) MySQL密碼', database: '填寫(xie) 上一步中創建的MySQL數據名', };

示例使用pm2管理 Node 進程，執行以下命令啟動 node 服務：

pm2 start process.json

8. 啟動新片預告 Demo

在微信開發者工具將新片預告應用包源碼添加為(wei) 項目，並把源文件config.js中的通訊域名修改成上麵申請的域名。

然後點擊調試即可打開新片預告Demo開始體(ti) 驗。

主要功能實現

獲取視頻列表、展示評論、提交評論

通過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 實戰教程：如何有效開發小程序 視頻號運營策略及內容創新 醫療健康小程序開發：在線問診、預約掛號與健康管理 創新小程序開發技術，打造優質用戶體驗 We分析數據助力微信用戶行為洞察 小程序開發解決方案：為您的業務量身定製最佳方案 Kaiyun体育官方全站入口服務SERVICE 小程序定製 商城小程序 / 點餐小程序 / O2O小程序 / / / 最新案例LATEST CASES 精銳教育 教育節能專場 體檢無憂網小程序 材易多商城 谘詢 微信掃碼谘詢 電話谘詢 400-888-9358 立即谘詢