webapp mui & HTML5+ (一) 之 環境
webapp mui & HTML5+ (一) 之 環境
最近需要開發一款簡單app,沒有招原生,最後領導大大們商量決定,做webapp,於是這個光榮的任務就落在了小弟身上
小弟以前是做過app,但那是有原生的大神們啊,我做的只是寫頁面而已…… 多說無益,直接開幹
IDE
因為時間關係,框架直接就把react-native忽略掉了,時間不夠啊(輕度研究過),直接定在了DCloud上面,主要是打包方便,不用搭建什麼環境,直接就可以進行開發
前端框架選定的mui(號稱最接近原生APP體驗的高效能框架),其實主要是簡單容易上手,然後加上5+Runtime
首先選擇IDE,跟mui配套的當然是BHuilder了,可以點選這裡
連線
HBuider支援真機除錯,這個比較簡單,只要安裝好手機的驅動,把手機和電腦通過資料線連線就可以除錯釋出了,如果手機連線不上,可以在電腦和手機上都安裝360手機助手基本上就可以了。當然你也可以直接用web開啟,但是web沒辦法呼叫原生的一些API。今天重點說一下使用夜神安卓模擬器和HBuider的連線除錯方法
ios略過,直接看android,夜神模擬器,感覺還可以,夜神模擬器下載
接下來就是就是連線HBuilder和夜神模擬器了,可以更好的進行除錯
模擬器
首先啟動HBuilder和夜神模擬器
然後開啟cmd命令 夜神模擬器連線127.0.0.1:62001
找到你的夜神模擬器的安裝位置,右鍵單擊 -> 屬性 -> 目標
命令列cd到資料夾目錄 D:\yeshenmoniqi\Nox\bin\ 下
執行命令
nox_adb connect 127.0.0.1:62001
nox_adb devices
HBuilder
找到HBuilder 安裝目錄 右鍵單擊 -> 屬性 -> 目標
命令列 cd 到 HBuilder 下的 tools 路徑
執行命令
adb connect 127.0.0.1:62001
adb devices
連線成功
執行app
在HBuilder左側專案管理器中右鍵單擊 -> 新建 -> 移動App -> 填寫應用名稱(test) -> 選擇mui登入模板 -> 點選完成,這樣就在本地建立了一個移動app專案
在 HBuilder 中選中你的專案 執行 –> 手機執行 –> 在 [127.0.0.1:62001]裝置上執行
然後夜神模擬器就會開啟一個帶有登入、設定模板的APP,可以註冊、登入、退出,一切都是在本地執行的。
本文純手打,有不當之處請留言!希望能幫到小夥伴們,謝謝!