小程序留言板塊引入emoji表情

最近準備給博客小程序添加一個留言板功能，考慮到如果只是純文本留言有點過於簡陋了，所以準備按照仿微信風格，在評論時可以添加emoji表情發送，實際上爲了簡化開發，原本找到了github一個插件WxEmojiView，可以快速引入項目實現emoji表情的渲染，但是由於幾個缺點放棄了使用這個插件，首先這個插件實際上是用戶選擇emoji表情時轉換成一串對應的字符串拼接到文本中，這樣輸入文本的顯示效果我覺得不是很理想，第二點是插件坐着沒有繼續維護，所以擔心某一天出問題不好處理，所以最終決定自己實現文本插入emoji表情的效果。我們可以先簡單看下本篇文章最終要實現的效果：

歡迎體驗小程序，如果有修改建議可以在小程序提交意見反饋或加入技術羣諮詢。

我們既然要實現這個emoji表情的效果，那具體是什麼樣的業務邏輯呢。我這裏將業務邏輯分成3個步驟：

1. 下載emoji表情eif文件並使用eifBQJYTool工具進行解壓得到emoji的表情文件。然後將圖片上傳到圖片服務器中。
2. 根據用戶選擇的emoji表情，選中對應emoji表情的字符串形式添加到輸入文本中。
3. 用戶點擊輸入框右側的表情按鈕彈出浮層可以選擇emoji表情，再次點擊表情按鈕或者點擊發送按鈕可以關閉浮層。

首先意義不沒啥好說的，都是玩計算機的解壓文件難不倒大家。至於eif文件和解壓工具而我已經上傳百度雲，公衆號回覆emoji工具就可以得到下載鏈接。然後將圖片上傳圖片服務器。首先剛纔講過了我們需要根據用戶選擇的emoji表情，選中對應emoji表情的字符串形式添加到輸入文本中。所以首先需要在頁面js文件的data中創建一個數組存儲emoji表情的名稱，再創建一個字符串存儲emoji表情對應的字符串格式。不同的emoji字符串形式以-拼接。我們可以看下源碼：

data: {    emoji: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35'],    emojiChar: '😓-😡-😳-😁-😠-😪-😄-😄-😔-😒-😞-😖-😏-😥-😷-😚-😂-😉-😵-☺-😌-😣-😥-😭-😱-😰-😨-😍-😃-😊-😝-😋-🍓-☀-☁-☔'  },

看到這裏有讀者會說圖片我提供了，那emoji表情對應的字符串形式要在哪裏看呢？ 要查看圖片對應的字符串形式可以看下面的鏈接：

http://www.oicqzone.com/tool/emoji/

下面我們先來設計頁面效果，我們設計一個view置於屏幕底部，view中存在三個組件：input組件負責輸入文本，表情按鈕點擊會彈出浮層以供用戶選擇emoji表情，發送按鈕用於連接服務端保存留言數據。接着我們先看看頁面佈局：

<view class="message">  <form bindreset="cleanInput" class="sendMessage">    <input type="text" placeholder="留言內容.." value="{{message}}" bindinput='messageInput'></input>    <image class="add" src="/images/bq.png" bindtap='increase'></image>    <button type="primary" bindtap='send' form-type="reset" size="small" button-hover="blue">發送</button>  </form>
  <view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}">    <block wx:for="{{emoji}}" wx:key="index">      <view class="emoji-cell">        <image class="touch-active" data-id="{{index}}" bindtap="emojiChoose" src="https://pic.niyueling.cn/upload_avatar/2019/11/19/0/0/{{item}}.jpg"></image>      </view>    </block>  </view></view>

實際上看到佈局代碼可以發現emoji浮層我設置了一個wx:if屬性，然後監聽表情按鈕的點擊事件，在點擊事件中更改increase的值，當increase值爲true則浮層顯示，當increase爲false浮層隱藏。然後浮層顯示時使用wx:for循環emoji表情數組，每循環一次可以得到文件名，根據我們圖片服務器地址拼接成可訪問的emoji表情url，放入image標籤的src中。至於頁面佈局效果實際上就是使用flex佈局，然後浮層顯示隱藏加了個簡單的動畫效果：

@keyframes slidedown {  from {    transform: translateY(0);  }
  to {    transform: translateY(100%);  }}
.slidedown {  animation: slidedown 0.5s linear;}
.slideup {  animation: slideup 0.5s linear;}
@keyframes slideup {  from {    transform: translateY(100%);  }
  to {    transform: translateY(0);  }}

到這一步我們實際上已經可以實現emoji浮層的顯示與隱藏。我們可以先看下頁面效果：

界面效果沒有問題了，那下一步就需要來實現留言的功能了。實際上我們的需求很簡單，就是文字和emoji表情結合，在我們選擇emoji表情時，將emoji表情對應的字符串形式添加到輸入文本中。首先我們需要在data中設置message參數保存輸入文本，我們剛纔已經在input輸入框綁定了bindInput事件，可以監聽文本輸入。在用戶輸入文本就將文本值動態添加到data的message參數中，當用戶選擇emoji表情時將message已有的輸入文本和對應的emoji表情的字符串形式進行拼接。然後input的value值顯示的就是data中的message參數。這樣就可以保證我們選擇emoji表情時輸入框可以顯示。接下來我們看看js文件的關鍵代碼：

data: {    message: '',    emoji: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35'],    emojiChar: '😓-😡-😳-😁-😠-😪-😄-😄-😔-😒-😞-😖-😏-😥-😷-😚-😂-😉-😵-☺-😌-😣-😥-😭-😱-😰-😨-😍-😃-😊-😝-😋-🍓-☀-☁-☔'  }，
  //監聽input值的改變  messageInput(res) {    this.setData({      message: res.detail.value    });  },
  cleanInput() {    //button會自動清空，所以不能再次清空而是應該給他設置目前的input值    this.setData({      message: this.data.message    });  },
 increase() {    this.setData({      increase: !this.data.increase,      aniStyle: true    });  },
  emojiChoose: function(e) {    var index = e.target.dataset.id    var emojiArr = this.data.emojiChar.split('-');    this.setData({      message: this.data.message + emojiArr[index]    });  },
  //點擊空白隱藏message下選框  outbtn() {    this.setData({      increase: false,      aniStyle: true    });  },

我們從代碼可以看到，用戶輸入文本時動態將值存入message中，在用戶選擇emoji表情這時候需要使用split拆分字符串爲數組，因爲我們將emoji自複式形式以-爲分隔符拼接成字符串形式，所以需要先將emoji表情字符串形式分割成一個數組與emoji表情一一對應，然後將message原有的值加上emoji字符串形式的值。increase方法其實就是改變increase參數的值來動態的進行浮層的顯示與隱藏。最後實現發送按鈕的點擊事件send，邏輯實際上很簡單，就是保存留言內容。點擊發送按鈕需要關係emoji浮層，所以需要更改increase值爲false。

send: function() {    this.setData({      increase: false    });
    if(!this.data.message) {      $Toast({        content: '不能留言空消息!',        type: 'error'      });    } else {      //chatInfo 中 friendInfo 是作者信息，userInfo 是留言者信息也就是登陸者信息      var that = this;      var chatInfo = that.data.chatInfo;      chatInfo.message = that.data.message;
      wx.request({        url: util.basePath + '/article/v1/saveMessageBoard',        method: "post",        data: {          chatInfo: chatInfo543        },        header: {          'content-type': 'application/json'        },        success(res) {          if (res.data.status == 200) {            $Toast({              content: res.data.payload,              type: 'success'            });
            that.setData({message: '', messageboard: []});            that.onLoad();          } else {            $Toast({              content: res.data.err,              type: 'error'            });          }        }      });    }  }

  

後端就是一個insert語句的問題就不展示代碼了，但是這裏要注意一個問題，這裏的表情字符串形式並非任何格式都可以存儲的。所以這裏數據庫留言內容的字符編碼處理最簡單的方法就是字符集修改爲utf8mb4，這樣我們就可以成功存儲emoji表情的字符串形式，存儲成功我們可以發現數據庫存儲的是?但是實際上讀取出來是可以正常轉換成原有的emoji表情字符形式的。

但是正式開發字符集肯定不是可以隨意進行修改的。 所以存取的時候有可能會出現報錯，所以這時候我們保存留言記錄時的時候就可以使用base64_encode()對message的值進行編碼，取數據時再使用base64_decode()進行解碼操作。 這樣也可以保證我們可以正常存取emoji表情字符形式到數據庫並且正常讀取數據渲染。 我們現在可以看下完整的頁面渲染效果：

博客小程序功能正在不斷完善，目前已經開源於碼雲。歡迎star。源碼地址：

https://gitee.com/mqzuimeng_admin/wx_blog.git

歡迎關注公衆號：程序猿周先森。查看更多精彩文章。

點擊留言

本文分享自微信公衆號 - 程序猿周先森（zhanyue_org）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。