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

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

前言

接著前面的文章,我們來講彈幕小工具的小程式篇。用小程式來實現彈幕的傳送端,傳送端的需求很簡單:一個簡單的小程式,把使用者要輸入的彈幕內容轉發給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愛吃糖糖糖

相關文章