Hype 3 教程 搭建本地服務(wù)器進(jìn)行高保真DEMO測試
Hype 3 教程 搭建本地服務(wù)器進(jìn)行高保真DEMO測試 便于局域網(wǎng)內(nèi)分享
Hype 3 教程 搭建本地服務(wù)器進(jìn)行高保真DEMO測試
搭建本地簡易服務(wù)器 實(shí)現(xiàn)hype3 輸出文件的移動(dòng)端測試
視覺設(shè)計(jì)師在使用Hype3 制作完成高保真原型DEMO，可以通過搭建本地簡易服務(wù)器來進(jìn)行真實(shí)環(huán)境測試，目前我主要是用在App的DEMO演示使用。[同一局域網(wǎng)內(nèi)，外網(wǎng)不可，如外網(wǎng)訪問，需要使用外網(wǎng)空間]
另外，hype自家的APP Hype Reflect 也可以實(shí)現(xiàn) 實(shí)時(shí)的Demo 演示，但是局限性是只能一臺(tái)設(shè)備使用，而搭建了本地服務(wù)器后，可通過二維碼進(jìn)行分享，只要是在同一個(gè)局域網(wǎng)內(nèi)的設(shè)備通過二維碼或者地址都可以輕松訪問到高保真的DEMO演示了。 大大提高了分享的效率。
首先，我們需要一個(gè)工具：小蘋果HTML服務(wù)器
適合誰用 Who？
不會(huì)編程的視覺設(shè)計(jì)師 [展示高保真DEMO]
Mobile web前端開發(fā)人員: 「本地環(huán)境下手機(jī)調(diào)試」
產(chǎn)品經(jīng)理: 「局域網(wǎng)內(nèi)演示app交互程序」
如何使用 How？
1、安裝
Mac版直接下載解壓后丟進(jìn)應(yīng)用程序文件夾即可(其實(shí)放在哪里雙擊后都可以正常運(yùn)行)
Window版綠色版，雙擊 小蘋果.exe 即可使用
Window安裝版，按引導(dǎo)安裝完后即可使用
2、本地服務(wù)器的配置（相當(dāng)簡單）
第一個(gè)輸入框：內(nèi)選擇根目錄，即你HTML項(xiàng)目所在文件夾，index.html文件用于默認(rèn)的首頁
第二個(gè)選擇框：程序會(huì)自動(dòng)讀取IP地址一般不用你選擇
第三個(gè)輸入框：分配一個(gè)端口號(hào)，不與其它程序沖突即可，比如8082, 8083, 8084, 8085隨便選一個(gè)都可
啟動(dòng)，That's all
3、使用
手機(jī)可以掃描生成的二維碼訪問
也可以直接在瀏覽器中輸入ip+端口號(hào)+網(wǎng)頁全名訪問，(Eg: http://10.224.68.11:8084/index.html)
還有一些具體的介紹 請(qǐng)移步官網(wǎng)
官方網(wǎng)站：http://www.xbole.com
注意：
使用Hype3導(dǎo)出html5文件 到 之前小蘋果 設(shè)置好的服務(wù)器目錄文件夾 并把文件名改為 index.html
然后使用手機(jī)掃描生成的二維碼就可以分享你的高保真DEMO進(jìn)行測試了。
必須在同一局域網(wǎng)內(nèi)~~~
必須在同一局域網(wǎng)內(nèi)~~~
必須在同一局域網(wǎng)內(nèi)~~~
重要的事情說三遍......
對(duì)于一些大牛來說，我這個(gè)方法可能有點(diǎn)LOW 但對(duì)我這個(gè)不會(huì)編程的視覺設(shè)計(jì)師，能會(huì)用這個(gè)方法，感覺自己已經(jīng)很不錯(cuò)了。
謝謝
