基於Electron + nodejs + 小程序實現彈幕小工具（下篇）

時間 2019-11-25

標籤基於 electron nodejs 程序實現工具下篇简体版

原文原文鏈接

前言

接着前面的文章，咱們來說彈幕小工具的小程序篇。用小程序來實現彈幕的發送端，發送端的需求很簡單：一個簡單的小程序，把用戶要輸入的彈幕內容轉發給nodejs端，用戶雙擊發送按鈕時，默認發送666。css

效果圖

小程序就只有這兩個頁面，很是簡單，用戶掃碼首次進入須要受權，而後就進入彈幕發送頁，輸入彈幕內容，單擊發送按鈕便可發送。雙擊可發送666。小程序端的架構很是簡單，這裏就再也不贅述，須要的同窗可移步整體架構圖。

開始開發

快速創建一個小程序項目：
一、先下載開發者工具。
二、選擇一個空目錄，AppID填寫本身的小程序AppID或使用測試號，而後選擇創建普通快速啓動模板便可快速創建一個小程序項目。html

而後你的第一個小程序已經初始化好了。

寫代碼以前

雖然小程序有提供開發者工具，可是咱們一般會把它當作一個模擬器和調試器。真正寫代碼仍是會用本身經常使用的編譯器，我本身使用的是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能夠拿到用戶信息。node

創建websocket鏈接

爲了雙向通訊，咱們選用了websocket，小程序發送彈幕內容到服務端時，服務端可以直接轉發給客戶端。小程序有提供websocket API，咱們在小程序啓動後創建websocket鏈接：git

wx.connectSocket({
    url: 'wss://XXX', 
    header:{
      'content-type': 'application/json'
    },
    protocols: ['protocol1'],
    success: function() {
        console.log('成功建立一個socket鏈接');
    }
});
複製代碼

用到的域名須要添加到服務器域名，本地的域名直接在開發者工具右上角->詳情->勾選不校驗域名便可。
而後再多加一點點異常處理，在socket關閉或出錯時重連：github

wx.onSocketClose(function() {
    // 創建socketConnect  
});
wx.onSocketError(function() {
    // 創建socketConnect  
})
複製代碼

發送彈幕

發送彈幕這裏咱們分兩個需求，單擊 -> 發送用戶輸入的內容; 雙擊（且用戶輸入爲空） -> 發送666。
小程序自己並無提供雙擊事件，那麼咱們就來手撕一個吧。
雙擊事件：短期（300ms）內點擊兩次，則算做是雙擊事件。思路很簡單，當前點擊時間 - 上一次點擊時間 < 300ms ,則爲雙擊事件，不然爲單擊事件。這裏須要注意的是，單擊事件須要延遲300ms再執行，等到點擊完300ms沒有再次點擊，才能肯定是單擊事件。web

//當前時間
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);
}
複製代碼