各平臺支持
| 微信小程序 | 安卓 | IOS | H5 | Vue2 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
一、項(xiàng)目介紹
- 項(xiàng)目基于uniapp開發(fā)，適配微信小程序、安卓、IOS和H5，其他平臺未測試。
- UI框架使用uView2.0。
- 組件使用easycom模式，只要組件安裝在項(xiàng)目的components目錄下或uni_modules目錄下，并符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)。就可以不用引用、注冊，直接在頁面中使用。
- 開發(fā)工具為Hbuilder3.3以上版本。
- 近期在開發(fā)項(xiàng)目升級過程中會逐步優(yōu)化項(xiàng)目結(jié)構(gòu)，所以項(xiàng)目結(jié)構(gòu)目錄這塊暫時(shí)沒有更新。
二、項(xiàng)目結(jié)構(gòu)
├─apis // 接口管理
│ ├─modules // api模塊化目錄
│ │ └─device.js // 設(shè)備接口地址
│ ├─http.api.js // 接口定義文件
│ └─http.interceptor // 攔截器
├─common // 公共文件
│ ├─mqttTool // mqtt工具
│ ├─extend // 擴(kuò)展原型方法
│ ├─filters // 全局過濾器
│ └─tools // 全局公共方法
├─components // 項(xiàng)目組件庫，組件放置這里，其他頁面可直接使用
│ ├─cl-test // easycom測試組件
│ ├─cl-icon // iconfont圖標(biāo)組件
│ ├─deviceMonitor // 設(shè)備實(shí)時(shí)監(jiān)測組件
│ └─other... // 使用的其他組件等等
├─pages // 頁面目錄
│ ├─public // 公共頁面
│ └─tarbar // 底部導(dǎo)航欄頁面
│ ├─home // 首頁的所有頁面
│ ├─scene // 場景聯(lián)動頁面
│ ├─trend // 新聞動態(tài)頁面
│ └─user // 個(gè)人中心頁面
├─static // 圖片目錄
├─store // vuex
│ ├─$u.mixin // store全局混入方法
│ └─index // vuex 組件全局狀態(tài)管理
├─uni_modules // 插件市場插件目錄
│ └─uview-ui // uview-ui
├─env.config.js // 接口地址和mqtt地址配置文件
├─mainfest.json // 各個(gè)平臺的配置信息三、基本配置
打開根目錄的mainfest.json文件, 基礎(chǔ)配置中 AppId改為自己的 uni-app應(yīng)用標(biāo)識，微信小程序配置中，AppId改為自己的 微信小程序AppId 。
打開根目錄的
env.config.js文件，修改服務(wù)端接口地址和emqx消息服務(wù)器地址
// H5端開發(fā)和生產(chǎn)環(huán)境協(xié)議
let protocalDev = "ws://";
let protocalProd = "wss://";
// 條件編譯，微信端和App端使用wxs協(xié)議
// #ifdef MP-WEIXIN || APP-PLUS
protocalDev = 'wxs://';
protocalProd = 'wxs://';
// #endif
const CONFIG = {
// 開發(fā)環(huán)境配置
development: {
baseUrl: 'http://localhost:8080',
mqttServer: protocalDev + 'localhost:8083/mqtt',
},
// 生產(chǎn)環(huán)境配置
production: {
baseUrl: 'https://domain.com/prod-api/',
mqttServer: protocalProd + 'domain.com/mqtt',
}
}- 小程序調(diào)用接口必須使用https協(xié)議，可以去阿里、騰訊、百度等平臺申請免費(fèi)證書，Nginx配置https和wss參考 官網(wǎng)文檔
- H5端使用ws(未加密)或者wss(加密)協(xié)議
- 微信小程序和App端使用wxs協(xié)議，同時(shí)需要配置域名，App端使用wss連接失敗，可能跟mqtt.js版本有關(guān)系。
四、Mqtt協(xié)議
| 協(xié)議 | 一般使用端口 | 說明 |
|---|---|---|
| mqtt | 1883端口 | 未加密 TCP 連接，硬件端和服務(wù)端使用 |
| mqtts | 8883端口 | 加密 TCP 連接，硬件端和服務(wù)端使用 |
| ws | 8083端口 | 未加密 WebSocket 連接，前端和移動端使用 |
| wss | 8084端口 | 加密 WebSocket 連接，前端和移動端使用，通過代理訪問8083端口 |
| wxs | 8084端口 | 微信小程序連接，微信小程序端使用，通過代理訪問8083端口 |
| alis | 8084端口 | 支付寶小程序連接，支付寶小程序端使用，通過代理訪問8083端口 |
五、使用說明
- 項(xiàng)目使用uChart圖表，部分圖標(biāo)啟用canvas2d模式，解決小程序?qū)蛹夁^高及拖拽卡頓問題。微信開發(fā)工具中圖表顯示會有問題，發(fā)布后正常顯示。
- 微信小程序支持多設(shè)備配網(wǎng)，mainfest.json微信小程序配置中要啟用位置接口才能使用。微信小程序端配網(wǎng)需要使用真機(jī)調(diào)試。
- 微信小程序視頻需要向微信官方申請權(quán)限，Android 和 IOS 需要用Wap2App 方式打包，播放器暫時(shí)不支持原生App。
- 項(xiàng)目天氣預(yù)報(bào)使用的是心知天氣API需要自行前往官網(wǎng)申請（小程序配置心知天氣域名），也可以使用其他天氣API，但需要調(diào)整一下weather的數(shù)據(jù)（已自定義組件）,由于某些瀏覽器原因，為保證H5正常運(yùn)行，可以申請騰訊地圖key來定位。
六、設(shè)備配網(wǎng) / 掃碼添加設(shè)備
- 有兩種情況：第一種是系統(tǒng)不存在該設(shè)備，配網(wǎng)或掃碼后會新建設(shè)備到用戶賬號下；第二種是系統(tǒng)已存在該設(shè)備，配網(wǎng)或掃碼后是關(guān)聯(lián)設(shè)備到用戶賬號下。
- 設(shè)備配網(wǎng)：通過配網(wǎng)可以把wifi信息配置到設(shè)備，以及新建設(shè)備到用戶賬號下。目前H5、微信小程序、安卓和IOS都支持單設(shè)備配網(wǎng)，多設(shè)備配網(wǎng)只有微信小程序支持。單設(shè)備配網(wǎng)時(shí)用戶手動切換手機(jī)wifi為設(shè)備熱點(diǎn)，然后進(jìn)行配網(wǎng)。
- 掃碼添加設(shè)備：用戶通過掃碼新建設(shè)備到自己賬號下。系統(tǒng)中的每個(gè)設(shè)備都有二維碼，在設(shè)備詳情摘要中查看。二維碼固定為下面JSON格式：
# type固定值為1，代表掃碼添加設(shè)備
# type、deviceNumber、productId 為必填項(xiàng)，productName為可選項(xiàng)
# 如果系統(tǒng)中還不存在該設(shè)備，設(shè)備編號使用一個(gè)唯一性編碼即可，不能包含特殊字符
{
"type": 1,
"deviceNumber": "D888666",
"productId": 5,
"productName": "智能插座"
}七、相關(guān)文檔
uView2.0文檔 >>
uniapp文檔 >>
easycom說明 >>
uChart2.0文檔 >>
Wap2App打包
八、項(xiàng)目運(yùn)行
重要
運(yùn)行前先跑 npm install 下載所需要的依賴包！
npm install
# 使用國內(nèi)鏡像源安裝
npm install --registry=https://registry.npmmirror.com1. 瀏覽器運(yùn)行
進(jìn)入fastbee-app項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器 -> 選擇瀏覽器，即可體驗(yàn)web 版。
2. App運(yùn)行
運(yùn)行App到手機(jī)或模擬器：使用電壓足夠的usb端口連接手機(jī)，設(shè)置中開啟USB調(diào)試，手機(jī)上允許電腦設(shè)備調(diào)試手機(jī)，進(jìn)入fastbee-app項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行App到手機(jī)或模擬器，即可在該設(shè)備里面體驗(yàn)。
3. 微信小程序
在微信開發(fā)者工具里運(yùn)行：進(jìn)入fastbee-app項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開發(fā)者工具，即可在微信開發(fā)者工具里面體驗(yàn)。
注意：如果是第一次使用，需要先配置小程序ide的相關(guān)路徑，才能運(yùn)行成功。如下圖，需在輸入框輸入微信開發(fā)者工具的安裝路徑。
注意：微信開發(fā)者工具需要開啟服務(wù)端口 在微信工具的設(shè)置->安全中。
提示
- 如果是第一次使用，需要配置開發(fā)工具的相關(guān)路徑。點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 運(yùn)行設(shè)置，配置相應(yīng)小程序開發(fā)者工具的路徑。
- 微信小程序工具需要配置允許權(quán)限，不然HBuilder無法調(diào)用微信小程序開發(fā)工具的命令行
- 如果自動啟動小程序開發(fā)工具失敗，請手動啟動小程序開發(fā)工具并將 HBuilderX 控制臺提示的項(xiàng)目路徑，打開項(xiàng)目。
4. 快捷鍵
運(yùn)行的快捷鍵是Ctrl+R，HBuilderX 還提供了快捷運(yùn)行菜單，可以按數(shù)字快速選擇要運(yùn)行的設(shè)備：
如需調(diào)試，可參考：uni-app調(diào)試