介紹
環(huán)信小程序demo是基于環(huán)信im SDK開發(fā)的一款即時通訊的小程序。這個demo可以幫助開發(fā)者們更輕松的集成環(huán)信SDK。可掃碼體驗:
demo 包含以下功能
- 最近通話
- 通訊錄
- 通知(加好友巫玻、加群)
- 設(shè)置
在本地跑起來
拉取代碼,導入開發(fā)者工具即可運行起來祠汇。
數(shù)據(jù)結(jié)構(gòu)
登錄頁:
login: {
name:'',
psd: '',
grant_type: 'password',
}
注冊頁:
register: {
username: '',
password: ''
}
通訊錄頁:
member:[], //好友列表
聊天頁:
chatMsg:[{
info:{
to:''
},
username:'', //用戶名
yourname:'', //好友名
msg: {
type:'',
data:''
},
style:'', //樣式
time:'',
mid:'' //message ID
}]
globalData:
userInfo: '', //用戶微信授權(quán)信息
chatMsg: [] //用于存儲離線消息
緩存:
myUsername: '' //緩存登錄用戶名
yourname + myName:'' //以用戶名跟好友名為key來緩存聊天記錄
項目結(jié)構(gòu)
|- comps 自定義組件目錄
|- addfriend 添加好友頁
|-chat 聊天頁面
|-swipedelete 測滑刪除
|-toast toast
|-images demo中用到的圖片 還有表情
|-pages 功能頁面
|-register 注冊頁
|-login 登錄頁
|-login_token token登錄頁
|-chat 最近聯(lián)系人頁(通話)
|-chatroom 聊天室頁
|-main 聯(lián)系人頁
|-add_new 加好友頁
|-group 群組頁
|-groupSetting 群組設(shè)置頁
|-notificaton 通知頁
|-notificaton_friendDetail 加好友通知頁
|-notificaton_groupDetail 加群組通知頁
|-setting 設(shè)置頁
|-setting_general 通用設(shè)置頁
|-utils 工具類和sdk的一些配置
|-sdk 環(huán)信sdk
|-app.js 小程序根實例仍秤,存放一些全局變量,注冊監(jiān)聽事件
|-app.json 注冊頁面以及全局的一些配置
|-app.wxss 一些全局樣式
|-project.config.json工程的一些配置可很,和開發(fā)者工具 “詳情” 中的設(shè)置一樣
可以復用的代碼
如果想快速搭建起一個有im能力的小程序诗力,可以選擇復用demo中的代碼,其中utils以幫助快速集成sdk我抠,comps > chat是聊天頁苇本。當然其他部分需要復用的,如常見的測滑刪除菜拓、聯(lián)系人按字母分類瓣窄、通知的訂閱模式也可以去具體文件去找。
遇到的一些坑
- 聊天頁面布局纳鼎,input定位后俺夕,光標會錯位,官方的說法是贱鄙,input focus時不能使用動畫劝贸。
- 在scroll-view中無法觸發(fā)onPullDownRefresh。
- margin-bottom 只有在下面還有元素時才生效贰逾。
- 使用enablePullDownRefresh看不見下拉動畫悬荣,需要將backgroundTextStyle設(shè)為dark。
- 播放語音 onTimeUpdate在開發(fā)者工具上不能穩(wěn)定觸發(fā)疙剑。
- background-image只能用網(wǎng)絡(luò)地址。
- 適配iphone X 使用wx.getSystemInfo() 返回的model在工具上是'iPhone X' 在真機上后面還會有其他字符践叠,不要精確匹配言缤。
小程序的坑還有很多,這里只列舉我遇到的一部分禁灼,大家還需在坑里前行管挟,希望后來的開發(fā)者可以繞過這些坑。
寫在最后
這期小程序demo只完善了單聊部分弄捕,后面還要優(yōu)化群組的一些功能僻孝,還有一些功能demo沒有去實現(xiàn)但是sdk是支持的导帝,要用到的話大家可以去查文檔