preface

  • Realizing bullet Screen Gadget Based on Electron + NodeJS + applets
  • Realizing bullet Screen Gadget Based on Electron + NodeJS + Small Program (Part 1)
  • Realizing bullet Screen Gadget Based on Electron + NodeJS + Applets

Following on from the previous article, we will talk about the prelude of the bullet-screen gadget. Small program is used to realize the sending end of bullet screen. The requirement of the sending end is very simple: a simple small program forwards the content of bullet screen that the user wants to input to the NodeJS end. When the user double-clicks the send button, 666 will be sent by default.

rendering

Overall architecture diagram

To start developing

Quickly build a small application project: 1. Download the developer tools first. 2, select an empty directory, AppID to fill in their own small program AppID or use the test number, and then select create ordinary quick start template can quickly establish a small program project.

Before I write the code

While applets provide developer tools, we often think of them as emulators and debuggers. I use my own compiler for real code. I use vsCode. Two plug-ins are recommended:

  • Minapp // Intelligent tag and attribute completion of small programs
  • In addition, there is no way to write nested WXSS for small programs. In order to conform to development habits, we usually write CSS or less and convert it to WXSS code.
  • Easy LESS //vscode plugin. Disadvantages: It depends on the VScode editor and requires a line //out: index.wxss before the LESS file
  • WXSS – CLI // NPM package Less Is transferred to WXSS star
  • Since our project is very small, I installed Easy Less and WXSS updates automatically when less files are updated.

authorization

After the small program initialization, the code itself has written the authorization part. It is important to note that the wx.getUserInfo interface directly popup the authorization box will no longer be supported, but use the Button component to guide the user to click and then pop up the authorization box. For details. After the user is authorized, call wx.getUserInfo to retrieve the user information.

Establish a Websocket connection

For two-way communication, we choose Websocket. When the small program sends the bullet-screen content to the server, the server can directly forward it to the client. The applet provides the WebSocket API. We set up a WebSocket connection after the applet starts:

 wx.connectSocket({
    url: 'wss://XXX', 
    header:{
      'content-type': 'application/json'
    },
    protocols: ['protocol1'],
    success: function() {
        console.log('Successfully created a socket connection'); }});Copy the code

The required domain name needs to be added to the server domain name. For the local domain name, click Details in the upper right corner of the Developer Tool and select Not verify domain name. Then add a little extra exception handling to reconnect if the socket is down or fails:


wx.onSocketClose(function() {// establish socketConnect}); wx.onSocketError(function() {// establish socketConnect})Copy the code

Send a barrage

Here we are divided into two requirements, click -> send user input content; Double click (with user input blank) -> Send 666. The small program itself does not provide a double – click event, so let’s hand rip one. Double click event: click twice in a short time (300ms), then count as double click event. The idea is very simple, the current click time – last click time < 300ms, it is a double click event, otherwise it is a click event. Note that the click event needs to be delayed for 300ms. The click event can be confirmed only when the click is not repeated after 300ms.

// currentTime const currentTime = e.stamp; // Last click time const lastTapTime = this.lasttapTime; // Update the last click time this.lastTapTime = e.timstamp;if(currentTime - lastTapTime < 300 && ! // Double-click the event data.content ='666';
    this.sendBulletScreen(data, 'double'); // Clear the click event clearTimeout(this.timer); }else{// Click the eventif(! content) {return ;
    }
    this.timer = setTimeout(() => {
        this.sendBulletScreen(data);
    }, 300);
}
Copy the code

other

  • Get small program code, the interface can only generate the published small program two-dimensional code; Small program release needs review, review time is about two days.
  • During development, you can add compilation mode and enter the page with parameters.

conclusion

This article explains the bullet screen small program about the key point, front-end development of the students, small program is very easy to use. Above, if there is a mistake, kindly correct!

@Author: Xiao Yao Yao loves Candy Candy