騰訊雲 微信小程序 即時通訊IM demo

產品簡介

即時通訊（Instant Messaging，IM）基於QQ 底層 IM 能力開發，僅需植入 SDK 便可輕鬆集成聊天、會話、羣組、資料管理能力，幫助您實現文字、圖片、短語音、短視頻等富媒體消息收發，全面知足通訊須要。

應用場景

客服諮詢

即時通訊 IM 可知足商家與用戶多場景溝通的須要，爲客戶提供專屬客服服務，提高服務效率，經過與智能機器人結合，可有效下降人力成本，沉澱客戶價值。

直播彈幕

即時通訊 IM 可支持彈幕、 送禮和點贊等多消息類型，輕鬆打造良好的直播聊天互動體驗；提供彈幕內容審覈能力，保證您的直播免受不雅信息干擾。

網紅帶貨

即時通訊 IM 與商業直播相結合，經過提供點贊、詢價、購物券等特定消息類型，幫助直播客戶實現流量變現。

教學白板

即時通訊 IM 爲可提供在線課堂，文本消息，畫筆軌跡等能力，輕鬆實現教師學生溝通、畫筆軌跡保存、大班課與小班課教學等教學場景。

社交溝通

即時通訊 IM 可實現單聊、羣聊、彈幕等多種聊天模式，支持文字、圖片、語音、短視頻等多種消息類型，有效提高用戶粘性與活躍度。

企業辦公

即時通訊 IM 爲企業客戶提供覆蓋桌面與移動端的完整解決方案，知足設備無縫切換的需求，提升企業內外溝通效率。

智能設備

即時通訊 IM 提供人與物、物與物協同通訊，攜手共進引領 5G 通訊時代潮流。

快速體驗，IMSDK小程序demo運行

本 IM 小程序 demo 是基於 MpVue 框架進行開發的。一分鐘跑通 demo 小節只是用於引導您打開編譯後的文件進行快速預覽，若是您想要進行二次開發，請看開發運行小節。

一分鐘跑通demo

1. 克隆倉庫到本地

   # 命令行執行
   git clone https://github.com/tencentyun/TIMSDK.git
    # 進入小程序 Demo 項目
   cd TIMSDK/WXMini
   複製代碼

2. 安裝微信小程序 開發者工具。

3. 使用微信開發者工具導入項目，請注意目錄爲 /dist/wx，而後填入本身的小程序 AppID。

4. 配置 SDKAPPID 和 SECRETKEY，獲取方式參考：密鑰獲取方法

   • 打開 /debug/GeneraterUserSig.js 文件

   • 按圖示填寫相應配置後，保存文件

5. 本地配置以下圖所示

   • 勾選ES6轉ES5選項
   • 勾選不檢驗合法域名選項
   • 基礎庫版本 > 2.1.1

6. 點擊編譯便可運行

注意事項

合法域名

若是您要發佈小程序，請將如下域名在【微信公衆平臺】>【開發】>【開發設置】>【服務器域名】中進行配置

進入微信公衆平臺，在小程序開發的服務器域名配置相關域名信息

添加到 request 合法域名：

域名	說明	是否必須
https://webim.tim.qq.com	Web IM 業務域名	必須
https://yun.tim.qq.com	Web IM 業務域名	必須
https://pingtas.qq.com	Web IM 統計域名	必須

添加到 uploadFile 合法域名：

域名	說明	是否必須
https://cos.ap-shanghai.myqcloud.com	文件上傳域名	必須

添加到 downloadFile 合法域名：

域名	說明	是否必須
https://cos.ap-shanghai.myqcloud.com	文件下載域名	必須

開發運行

項目目錄

├───sdk/               - 存放tim-wx.js，demo 中未使用，僅供自行集成  
├───build/   
├───config/
├───dist/
│   └───wx/            - MpVue 項目編譯後文件目錄，使用小程序開發工具導入此文件夾
├───src/
│   ├───components/    - 組件
│   ├───pages/         - 頁面
│   ├───store/         - Vuex 目錄
│   ├───stylus/        - 全局主題色樣式，能夠修改全局顏色
│   ├───utils/         - 方法
│   ├───app.json
│   ├───App.vue
│   └───main.js
├───static/            - 靜態依賴資源
│   ├───debug/         - 包含 userSig 驗證登陸方法
│   ├───images/        - 圖片
│   └───iview/         - 使用的 iview 組件
├───_doc/
├───.babelrc
├───.editorconfig
├───.eslintignore
├───.eslintrc.js
├───.postcssrc.js
├───index.html
├───package-lock.json
├───package.json
├───project.config.json
└───README.md

複製代碼

準備工做

1. 獲取到您應用的 SDKAPPID 和 SECRETKEY，方式參考：密鑰獲取方法

2. 安裝微信小程序 開發者工具

3. 安裝 nodejs 環境 ( Version > 8 ) ，選擇合適您安裝環境的安裝包

   • 安裝後，在命令行輸入node --version ，若是 > 8 便可

啓動流程

1. 克隆倉庫到本地

   # 命令行執行
   git clone https://github.com/tencentyun/TIMSDK.git
    # 進入 Demo 項目
   cd TIMSDK/WXMini
   複製代碼

2. 將project.config.json文件中的appid修改成本身微信小程序的appid

3. 配置 SDKAPPID 和 SECRETKEY，獲取方式參考：密鑰獲取方法

   • 打開 /static/debug/GeneraterUserSig.js 文件

   • 按圖示填寫相應配置後，保存文件

4. 安裝依賴並啓動

   # 安裝demo構建和運行所需依賴
   npm install
    # 構建並生成最終可在小程序開發工具內使用的代碼
   npm run start
   複製代碼

   使用 npm install 命令，若是有些依賴包沒法成功安裝

   您能夠試着切換源， 例如： npm config set registry http://r.cnpmjs.org/

   而後再執行 npm install

5. 使用微信開發者工具導入項目，目錄爲/dist/wx

   

6. 本地配置以下圖所示

   • 勾選ES6轉ES5選項
   • 勾選不檢驗合法域名選項
   • 基礎庫版本 > 2.1.1

   

7. 點擊開發工具的編譯便可預覽該項目

   

   注意事項

   合法域名

   若是您要發佈小程序，請將如下域名在【微信公衆平臺】>【開發】>【開發設置】>【服務器域名】中進行配置

   進入微信公衆平臺，在小程序開發的服務器域名配置相關域名信息

   添加到 request 合法域名：

   域名	說明	是否必須
   https://webim.tim.qq.com	Web IM 業務域名	必須
   https://yun.tim.qq.com	Web IM 業務域名	必須
   https://pingtas.qq.com	Web IM 統計域名	必須

   添加到 uploadFile 合法域名：

   域名	說明	是否必須
   https://cos.ap-shanghai.myqcloud.com	文件上傳域名	必須

   添加到 downloadFile 合法域名：

   域名	說明	是否必須
   https://cos.ap-shanghai.myqcloud.com	文件下載域名	必須

   

項目截圖

備註

頁面結構

目錄 /src/pages

頁面	簡介
login/	登陸頁
index/	首頁，對話列表
chat/	聊天對話頁 & 羣信息/用戶信息
contact/	通信錄
own/	我的信息
create/	建立羣聊
members/	羣成員
profile/	修改我的信息
groups/	羣列表
groupDetail/	羣詳細頁
system/	系統通知頁
blacklist/	黑名單頁
detail/	我的信息&羣信息
friend/	發起會話
mention/	@選擇頁

注意事項

1. 避免在前端進行簽名計算

本 Demo 爲了用戶體驗的便利，將 userSig 簽發放到前端執行。若直接部署上線，會面臨 SECRETKEY 泄露的風險。正確的 userSig 簽發方式是將 userSig 的計算代碼集成到您的服務端，並提供相應接口。在須要 userSig 時，發起請求獲取動態 userSig。更多詳情請參見 服務端生成 UserSig。

2. 若是沒法訪問github或者訪問速度過慢

下載zip包

解壓後，進入 TIMSDK/WXMini目錄，便可查看demo代碼。