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

黑金團隊發表於2019-03-01
NodeJS

前言

接著前面的文章，我們來講彈幕小工具的小程式篇。用小程式來實現彈幕的傳送端，傳送端的需求很簡單：一個簡單的小程式，把使用者要輸入的彈幕內容轉發給nodejs端，使用者雙擊傳送按鈕時，預設傳送666。

效果圖

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

小程式就只有這兩個頁面，非常簡單，使用者掃碼首次進入需要授權，然後就進入彈幕傳送頁，輸入彈幕內容，單擊傳送按鈕即可傳送。雙擊可傳送666。小程式端的架構非常簡單，這裡就不再贅述，需要的同學可移步總體架構圖。

開始開發

快速建立一個小程式專案：
1、先下載開發者工具。
2、選擇一個空目錄，AppID填寫自己的小程式AppID或使用測試號，然後選擇建立普通快速啟動模板即可快速建立一個小程式專案。

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

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

寫程式碼之前

雖然小程式有提供開發者工具，但是我們通常會把它當做一個模擬器和偵錯程式。真正寫程式碼還是會用自己常用的編譯器，我自己使用的是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愛吃糖糖糖

相關文章