一、項目介紹
- 項目使用uniapp開發(fā)，適配微信小程序、安卓、IOS和H5，其他平臺未測試。
- UI框架使用uView2.0。
- 組件使用easycom模式，只要組件安裝在項目的components目錄下或uni_modules目錄下，并符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)。就可以不用引用、注冊，直接在頁面中使用。
- 開發(fā)工具為Hbuilder3.3以上版本。
- 近期在開發(fā)項目升級過程中會逐步優(yōu)化項目結(jié)構(gòu)，由于舊代碼比較龐大需要很多時間優(yōu)化，所以項目結(jié)構(gòu)目錄這塊暫時沒有更新，希望諒解。
| 微信小程序 | 安卓 | IOS | H5 | Vue2 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
二、項目結(jié)構(gòu)
├─apis // 接口管理
│ ├─modules // api模塊化目錄
│ │ └─device.js // 設(shè)備接口地址
│ ├─http.api.js // 接口定義文件
│ └─http.interceptor // 攔截器
├─common // 公共文件
│ ├─mqttTool // mqtt工具
│ ├─extend // 擴展原型方法
│ ├─filters // 全局過濾器
│ └─tools // 全局公共方法
├─components // 項目組件庫，組件放置這里，其他頁面可直接使用
│ ├─cl-test // easycom測試組件
│ ├─cl-icon // iconfont圖標(biāo)組件
│ ├─deviceMonitor // 設(shè)備實時監(jiān)測組件
│ └─other... // 使用的其他組件等等
├─pages // 頁面目錄
│ ├─public // 公共頁面
│ └─tarbar // 底部導(dǎo)航欄頁面
│ ├─home // 首頁的所有頁面
│ ├─scene // 場景聯(lián)動頁面
│ ├─trend // 新聞動態(tài)頁面
│ └─user // 個人中心頁面
├─static // 圖片目錄
├─store // vuex
│ ├─$u.mixin // store全局混入方法
│ └─index // vuex 組件全局狀態(tài)管理
├─uni_modules // 插件市場插件目錄
│ └─uview-ui // uview-ui
├─env.config.js // 接口地址和mqtt地址配置文件
├─mainfest.json // 各個平臺的配置信息三、基本配置
打開根目錄的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é)議，可以去阿里、騰訊、百度等平臺申請免費證書，Nginx配置https和wss參考 官網(wǎng)文檔
- H5端使用ws(未加密)或者wss(加密)協(xié)議
- 微信小程序和App端使用wxs協(xié)議，同時需要配置域名，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端口 |
五、使用說明
- 項目使用uChart圖表，部分圖標(biāo)啟用canvas2d模式，解決小程序?qū)蛹夁^高及拖拽卡頓問題。微信開發(fā)工具中圖表顯示會有問題，發(fā)布后正常顯示。
- 微信小程序支持多設(shè)備配網(wǎng)，mainfest.json微信小程序配置中要啟用位置接口才能使用。微信小程序端配網(wǎng)需要使用真機調(diào)試。
- 微信小程序視頻需要向微信官方申請權(quán)限，Android 和 IOS 需要用Wap2App 方式打包，播放器暫時不支持原生App。
- 項目天氣預(yù)報使用的是心知天氣API需要自行前往官網(wǎng)申請（小程序配置心知天氣域名），也可以使用其他天氣API，但需要調(diào)整一下weather的數(shù)據(jù)（已自定義組件）,由于某些瀏覽器原因，為保證H5正常運行，可以申請騰訊地圖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)時用戶手動切換手機wifi為設(shè)備熱點，然后進行配網(wǎng)。
- 掃碼添加設(shè)備：用戶通過掃碼新建設(shè)備到自己賬號下。系統(tǒng)中的每個設(shè)備都有二維碼，在設(shè)備詳情摘要中查看。二維碼固定為下面JSON格式：
# type固定值為1，代表掃碼添加設(shè)備
# type、deviceNumber、productId 為必填項，productName為可選項
# 如果系統(tǒng)中還不存在該設(shè)備，設(shè)備編號使用一個唯一性編碼即可，不能包含特殊字符
{
"type": 1,
"deviceNumber": "D888666",
"productId": 5,
"productName": "智能插座"
}七、相關(guān)文檔
uView2.0文檔 >>
uniapp文檔 >>
easycom說明 >>
uChart2.0文檔 >>
Wap2App打包
八、項目運行
運行前先跑 npm install 下載所需要的依賴包！