wechat im

wechat-im

微信小程式即時通訊

開發這個專案付出了我很多心血，如果對你有幫助和啟發的話，希望在GitHub上給個star ！也是對我工作的支持與肯定！

也非常感謝kulovecc對專案中文本超長溢出佈局的問題的修正和提交！

介紹：

wechat-im是一個可以讓你在小程式平台快速實現即時通訊功能的完整範本。

現已更新2.xx版本

相對1.0.x及之前的版本，2.xx新增的特性

• 全面使用ES6語法，非同步操作使用Promise和async語法糖，讓程式碼更符合語意！ （需要較新的微信開發工具，並開啟"增強編譯"）
• 文字輸入功能已使用Component元件化，比先前的版本表現更好！
• 最低支援微信基礎庫版本為2.6.1（先前的最低支援是1.4.0）
• 修復了一些場景下的問題。例如播放語音訊息時，退出聊天介面，依舊會播放語音的問題。
• 2.xx文檔，過些日子再更新吧。有能力的同學可以更新啦，大部分是文法的更新和組件化。我近期比較忙，很抱歉各位同學。

特性：

• 目前專案中已使用webSocket，實現了IM的通訊功能！目前包括會話清單頁面、會話頁面及好友頁面。支援使用nodejs開啟本地WebSocket服務。
• 支援發送文字、圖片、語音，支援輸入法的emoji表情
• 支援拍照，圖庫選擇圖片、圖片預覽
• 支援切換到文字輸入時，顯示發送按鈕。
• 支援語音播放及播放動畫。
• 支援配置錄製語音的最短及最長時間。
• 支援配置自訂事件。
• 支援聊天訊息按時間排序。
• 支援發送訊息後，頁面回彈到最底部。
• 使用了最新的語音播放接口，同時相容於低版的語音播放接口了。
• 訊息發送中、發送成功、發送失敗的狀態更新
• 支援訊息發送失敗情況下，點擊重發按鈕重新發送
• 最佳化時間氣泡顯示邏輯，鄰近資訊大於5分鐘顯示後者資訊的時間
• 在頁面最上方增加了會話狀態的UI展示
• 自訂功能，顯示自訂氣泡。
• 透過解析語音或圖片訊息訊息，優先讀取本機檔案。
• 實現了檔案儲存演算法，確保10M儲存空間內的語音和圖片檔案均為最新。
• 各訊息類型和各功能都已模組化，讓你在瀏覽程式碼時愉悅輕鬆。 （其實這不算是組件特性。。。）

目前不支援的功能：

• 如果要使用群組聊天，目前的UI中，頭像旁並沒有顯示成員暱稱。
• 本地沒有儲存歷史聊天訊息。原因請看文件結尾。
• 目前WebSocket所有功能僅供學習參考，若想商用，請自行開發。
• 目前還不支援以插件方式使用。

學習或使用該項目，需要你具備哪些條件

• 需要你熟悉ES6的語法規範，以及設計模式，否則該專案對你來說門檻很高。
• websocket不必深入掌握，但需要你得知WebSocket的常見API及其用法，詳見小程式WebSocket
• 了解npm依賴的安裝，指令的執行（這塊主要用於啟動本地的WebSocket服務）

如何安裝使用

1. 開發者工具導入項目

修改app.js文件中下面配置的url为你本地网络ip及固定的端口号8001，即ws://xx.xx.xx.xx:8001
this.imWebSocket.createSocket({url: 'ws://10.4.97.87:8001'});

2. 搭建本地WebSocket服務

项目根目录下启动Terminal
需先安装依赖 npm install
执行 npm run server  即可开启WebSocket服务

3. 使用開發者工具運行項目

如果你的專案使用這個框架並且正式投入運營，方便的話可以提供下你們的小程式二維碼，我可以在這裡為大家推廣。

LINK

Document

Questions

ChangeLog

LICENSE

合作

技術交流請加QQ群：一群821711186 （已滿） 二群834335591

如有合作意向或想要推廣您的產品，可加QQ：1178545208

歡迎打賞