wechat mini apps-Video application scenario - 书目录

wechat mini apps-Video application scenario

The new movie trailer is an example of a WeChat applet created with Tencent Cloud VOD and cloud database MySQL. The code structure contains the following two parts:

  • App: new trailer notice application package code that can be opened directly as a project in the WeChat developer tool
  • Server: The Node server code that is set up to communicate with the server. The CGI interface example is provided to pull the video list and comment list on the cloud database and submit the comment data to the cloud database.

The main functions of the new film trailer are as follows:

  • Support paging scroll loading video list
  • Click on the poster to go to the details page to play the video
  • Comment on the video
  • A list of reviews of show videos

 

Deploy and run

A friend who got this applet source code can try to run it.

Overall structure

1. Prepare domain names and certificates

In the WeChat applet, all network requests are strictly limited. Domain names and protocols that do not meet the conditions cannot be requested. The details include:

  • Only allow communication with the configured domain name in the MP. If you do not have a domain name, you need to register one.
  • The network request must go through the HTTPS protocol, so you also need to apply for an SSL certificate for your domain name.
  • Tencent Cloud provides domain name registration and certificate application services, and no domain name or certificate can be used

After the domain name is registered, you can log in to the WeChat public platform to configure the communication domain name.

Note: You need to set www.qcloud.la to the domain name applied for above

2. Nginx and Node code deployment

To run the applet service, the following steps need to be taken:

  • Deploy Nginx, Nginx installation and deployment, please search on your own (note that you need to compile the SSL module)
  • Configure Nginx Reverse Proxy to http://127.0.0.1:9994
  • Node operating environment that can be installed Node V6.6.0
  • Deploy the server directory code to the server, such as /data/release/qcloud-applet-video
  • Install dependency modules using npm install
  • Install pm2 -g with npm install pm2

The above environment configuration is troublesome. The server running code and configuration of the new movie trailer have been packaged into Tencent Cloud CVM image. It is recommended that everyone use it directly.

After the mirror deployment is complete, the cloud host has the basic environment, code, and configuration to run the WebSocket service.
Tencent cloud users can receive gifts for free and experience Tencent cloud applet solutions.
Mirroring the server environment and code that already contains all the applets, friends who need to experience the applet do not need to be repeatedly deployed

3. Configure HTTPS

Nginx has been deployed in the image. You need to modify the domain name, certificate, and private key in the configuration under /etc/nginx/conf.d.

After the configuration is complete, nginx can be started.

nginx 4. Domain name resolution 

We also need to add a domain record to our cloud server so that we can use the domain name for HTTPS service.

Registered domain name in Tencent cloud, you can directly use the cloud analytics console to add host records, directly select the above purchased CVM.

After the parsing takes effect, we can use the domain name in the browser to perform 
HTTPS access.


5. Open on-demand service

The play resource for the new movie trailer example is the mp4 file stored on Tencent Cloud On Demand. To use the on-demand service, you need to log on to the on-demand management console and complete the following operations:

  • Upload video resources, on-demand support almost all major video formats upload
  • Get mp4 or m3u8 source address after successful transcoding

 

Currently, the WeChat applet video component is tested to support mp4 and m3u8 formats. The m3u8 format can only be used on mobile phones. Developers can use Tencent cloud on-demand console to transcode the video source to mp4 or m3u8 format, and Tencent Cloud on-demand conference. Played resources for CDN acceleration.

6. Prepare the cloud database MySQL

The list of videos and comments pulled in the example is stored on the cloud database. To use the cloud database service, you need to complete the following operations:

  • Purchase, note that the purchased cloud database needs to be in the same geographic area as the cloud server
  • Initialization process, this example is selected utf8 encoding
  • Click on the login button in the cloud database console action bar, log in to phpMyAdmin to create the database and import the SQL file in this example in the current database

Note: The import SQL file contains the on-demand uploaded video list. Developers can develop and maintain a video publishing management system based on the cloud database, because this content is not related to this example and will not be described in detail.

7. Start a new trailer notice example Node service

In the image, the Node service code for the new slice trailer sample has been deployed in the directory /data/release/qcloud-applet-video:

Go to this directory:

cd /data/release/qcloud-applet-video There is a configuration file called config.js in the directory (shown below), and the corresponding MySQL configuration is modified by the comment:
module.exports = {
    // Node 监听的端口号
    port: '9994',
    ROUTE_BASE_PATH: '/applet',

    host: '填写开通 MySQL 时分配的内网IP',
    user: '填写MySQL用户名',
    password: '填写MySQL密码',
    database: '填写上一步中创建的MySQL数据名',
}; The example uses PM2 to manage the Node process and executes the following command to start the node service:
pm2 start process.json


8. Start New Trailer Demo

The WeChat developer tool adds the source of the new trailer notice application package as a project, and modifies the communication domain name in the source file config.js to the domain name of the above application.

 

Then click on Debug to open the new trailer Preview Demo.

The main function is achieved

Get video list, show comments, submit comments
Connect mysql via node’s mysql module to query and insert operations
The following is a sample code to query the list of comments

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();

Play video
<video src="{{videoUrl}}" binderror="videoErrorCallback"></video>

属性名 类型 说明
src String The resource address to play the video
binderror EventHandle Trigger error event when an error occurs,event.detail = {errMsg: ‘something wrong’}

The video is played using the video tag. Currently, only two parameters are given on the official document. The author tested the src support for loading mp4 and m3u8 format videos.
The video tag’s control bar has no way to customize the style and hide it