laravel-colorUI-IM-對開發友好的極簡IM

jcc123發表於2021-04-12
LaravelUI

對開發友好的極簡IM
文件

0 功能

  • 單聊
  • 群聊
  • 發文字
  • 發表情
  • 發語音
  • 發圖片
  • 拍一拍（拍頭像，拍文字）
  • 發檔案
  • 發視訊
  • 群內興趣小組（該小組可以不斷分裂，進化）
  • 下拉重新整理聊天記錄
  • 多裝置登入及資訊同步
  • 支援pc,H5，小程式 和 apk ，桌面版，ios 理論上應該也可以，但太麻煩，有心者可研究

demo
手機掃碼體驗
1

1 專案結構

這麼多幾個，只需關注前端就行了,後端可以用自己比較熟悉的語言進行實現。

2 安裝

這裡對前端安裝進行介紹，安裝之前請先安裝HBuilderX 傻瓜安裝

2.1 下載程式碼

git clone https://gitee.com/colorui-im/colorui-im-h5.git

2.2 執行

開啟HBuilderX ，開啟下載的程式碼，點選上方執行->執行到瀏覽器,即可

3 配置

在 common/config.js 中，可以什麼也不改

const config = {
    'api_domain':'https://colorui-im-admin.jc91715.top',//api域名
    chat_img_domain:'https://colorui-im-admin.jc91715.top',//圖片域名沒啥用
    'wbsocket_url':'wss://colorui-im-h5.jc91715.top:8284',//wbsocket服務端連結地址
    fake:false //是否使用假資料，如執行失敗，改為 true,則不會走api介面
}

export default config

4 訪問

HBuilderX 執行成功後，會自動開啟一個連結，訪問那個連結即可，一般為 localhost:8000 這樣的

其他

打包桌面應用 參考

在manifest.json h5 設定中

目錄 ./
取消 https

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 967, height: 667})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  // win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

package.json

{
  "name"    : "app-name",
  "version" : "0.1.0",
  "main"    : "main.js"
}

打包 在unpackage/dist/build/h5/下

electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 12.0.2 --overwrite --ignore=node_modules
Packaging app for platform darwin x64 using electron v12.0.2
Wrote new app to MyApp/MyApp-darwin-x64
本作品採用《CC 協議》，轉載必須註明作者和本文連結
NOT IS BECAUSE I WANT TO WRITE， BUT I WANT TO INCREASE, SO I GO TO WRITE~~

相關文章