基於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);
}
複製程式碼