基于Electron + nodejs + 小程序 实现弹幕小工具（下篇）

接着前面的文章，我们来讲弹幕小 工具 的最后一篇。用小程序来实现弹幕的发送端，发送端的需求很简单：一个简单的小程序，把用户要输入的弹幕内容转发给nodejs端，用户双击发送按钮时，默认发送666。

效果图

。

开始开发

快速建立一个小程序项目：

1、先下载开发者工具。

2、选择一个空目录，AppID填写自己的小程序AppID或使用测试号，然后选择建立普通快速启动模板即可快速建立一个小程序项目。

然后你的第一个小程序已经初始化好了。

写代码之前

虽然小程序有提供开发者工具，但是我们通常会把它当做一个模拟器和调试器。真正写代码还是会用自己常用的编译器，我自己使用的是vsCode。 推荐两个插件：

• minapp //小程序的标签、属性智能补全
• wechat-shippet //代码片段模板 json、js、wxml片段
  另外，小程序的WXSS没办法写嵌套，为了符合开发习惯，通常我们会写好css或less然后转成wxss代码。
• Easy LESS //vscode插件，缺点：依赖于vscode编辑器，而且需要在less文件前加一句 //out: index.wxss
• wxss-cli //npm包 less转wxss star数较少
• gulp 等 //自己来转
  鉴于我们这个项目非常小，我安装了Easy less，less文件更新时，wxss就会自动更新。

授权

小程序初始化后，本身的代码里面已经写好了授权的部分。需要注意的是 wx.getUserInfo 接口直接弹出授权框将不再支持，而是用button组件引导用户点击后弹出授权框。详情。用户授权之后调用wx.getUserInfo可以拿到用户信息。

建立websocket连接

为了双向通信，我们选用了websocket，小程序发送弹幕内容到服务端时，服务端能够直接转发给客户端。小程序有提供websocket API，我们在小程序启动后建立websocket连接：

wx.connectSocket({
    url: 'wss://XXX', 
    header:{
      'content-type': 'application/json'
    },
    protocols: ['protocol1'],
    success: function() {
        console.log('成功创建一个socket连接');
    }
});
复制代码

用到的域名需要添加到服务器域名，本地的域名直接在开发者工具右上角->详情->勾选不校验域名即可。

然后再多加一点点异常处理，在socket关闭或出错时重连：

wx.onSocketClose(function() {
    // 建立socketConnect  
});
wx.onSocketError(function() {
    // 建立socketConnect  
})
复制代码

发送弹幕

发送弹幕这里我们分两个需求，单击 -> 发送用户输入的内容; 双击（且用户输入为空） -> 发送666。

小程序本身并没有提供双击事件，那么我们就来手撕一个吧。

双击事件：短时间（300ms）内点击两次，则算作是双击事件。思路很简单，当前点击时间 - 上一次点击时间 < 300ms ,则为双击事件，否则为单击事件。这里需要注意的是，单击事件需要延迟300ms再执行，等到点击完300ms没有再次点击，才能确定是单击事件。

//当前时间
const currentTime = e.timeStamp;
//上一次的点击事件发生的时间
const lastTapTime = this.lastTapTime;
//更新上一次的点击时间
this.lastTapTime = e.timeStamp;

if(currentTime - lastTapTime < 300 && !content) {
    //双击事件
    data.content = '666';
    this.sendBulletScreen(data, 'double');
    //清掉单击事件
    clearTimeout(this.timer);
} else {
   
    //单击事件
    if (!content) {
        return ;
    }
    this.timer = setTimeout(() => {
        this.sendBulletScreen(data);
    }, 300);
}
复制代码