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,可以註冊、登入、退出，一切都是在本地執行的。

本文純手打，有不當之處請留言！希望能幫到小夥伴們，謝謝！