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