1. 程式人生 > >webapp mui & HTML5+ (一) 之 環境

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

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