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

前言

• 基于Electron + nodejs + 小程序 实现弹幕小工具（开篇）
• 基于Electron + nodejs + 小程序 实现弹幕小工具（上篇)
• 基于Electron + nodejs + 小程序 实现弹幕小工具（中篇)

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

效果图

小程序就只有这两个页面，很是简单，用户扫码首次进入须要受权，而后就进入弹幕发送页，输入弹幕内容，单击发送按钮便可发送。双击可发送666。小程序端的架构很是简单，这里就再也不赘述，须要的同窗可移步 整体架构图。

开始开发

快速创建一个小程序项目：
一、先下载开发者工具。
二、选择一个空目录，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);
}
复制代码

其余

• 获取小程序码，接口只能生成已发布的小程序的二维码；小程序发布须要审核，审核时间大概是两天。
• 开发时能够经过添加编译模式，进入页面时带上参数。

结语

本文大概讲解了弹幕小程序端的关键点，有前端开发基础的同窗，小程序是很容易上手的。以上，若有错误，恳请指正！

@Author: 小夭yao爱吃糖糖糖