對于不了解 web前端開發(fā)、Flutter開發(fā)不太熟悉、IM SDK 使用不太熟悉的開發(fā)者來說，首次接入第三方需要在web端運行的項目時，可能會遇到各種各樣的問題，遇到問題后，不確定是 web、Flutter、im sdk 哪塊配置的問題，這里筆者不作為開發(fā)者來解決各類報錯問題，而是作為 新手 來一步步怎么去正確引入并使用 im sdk 的能力（后續(xù)使用 Flutter 引入 web 第三第三方 sdk 應(yīng)該也可以作為參考，筆者對 web 開發(fā) 目前幾乎也不懂），廢話不多說，現(xiàn)在開始~
第一步：
首先確認系統(tǒng)內(nèi)已經(jīng)安裝并配置好 npm（網(wǎng)上有一堆文章，可以去看看），安裝成功之后運行下面命令，會顯示對應(yīng)版本號
npm --version
第二步：
打開編譯器 terminal 控制臺，進入到 web 目錄
cd web
第三步：
查看工程 web 目錄下是否有 package.json 文件，如果沒有則在 terminal控制臺 輸入下面命令創(chuàng)建，有則跳過
npm init
npm init 不知道怎么配置，點擊這里
第四步：
下載安裝第三方sdk，這里以 “騰訊云 web im” 舉例,在 terminal控制臺 繼續(xù)輸入下面命令下載兩個文件
npm i @tencentcloud/chat
npm i tim-upload-plugin
第五步：
最后在 web 目錄下 index.html 文件內(nèi)引入 js文件
<script src="./node_modules/tim-upload-plugin/index.js"></script>
<script src="./node_modules/@tencentcloud/chat/index.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/group-module.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/relationship-module.js"></script>
<script src="./node_modules/@tencentcloud/chat/modules/signaling-module.js"></script>
第六步：
最后跟 跟其他平臺一樣，在 Flutter 的 pubspec.yaml 文件中引入 騰訊云 im flutter sdk，接下來根據(jù) 騰訊云即時通信官網(wǎng) im flutter sdk api示例正常使用即可，通過在 web 瀏覽器上運行驗證是否已接入成功
最終成功的效果
-
項目結(jié)構(gòu)
-
調(diào)用 api 初始化 及 登錄之后的效果
補充：
運行報錯:
(web im sdk 沒有成功安裝，需要通過上面命令安裝，也可能是緩存問題，先通過 npm 相關(guān)命令，清理下緩存 并刪除 web 目錄下這幾個文件重新創(chuàng)建和下載) npm清理緩存點這里
sdk下載失敗:
切換 npm 鏡像源
//查看當(dāng)前下載源
npm config get registry
##以下選其一，挨個試試，看看最終哪個行
//切換 npm 官方原始鏡像
npm config set registry https://registry.npmjs.org/
//切換騰訊云鏡像
npm config set registry https://mirrors.cloud.tencent.com/npm/
//切換淘寶鏡像
npm config set registry https://registry.npm.taobao.org
//切換 阿里云 鏡像
npm config set registry https://npm.aliyun.com
//切換 網(wǎng)易云 鏡像
npm config set registry https://mirrors.163.com/npm/
//切換 中國科學(xué)技術(shù)大學(xué)開源 鏡像
npm config set registry http://mirrors.ustc.edu.cn/
//切換 清華大學(xué)開源 鏡像
npm config set registry https://mirrors.tuna.tsinghua.edu.cn/
