---

【前言】 HPP是什麼？

HybirdApp的簡稱，詳細引見參見：HPP——讓一切中小企業擁有自己的APP

說白了就是用html+css+js開發app，包括IOS和Android版本。

HBuilder

詳細完成方式比擬多，自行百度吧，就不逐個敘說了，

之前比擬引薦的HBuilder+mui+nativejs那套，相關材料：

如何疾速開收回一個高質量的APP——創業談

HBuilder開發App入門-滴石

Hbuilder開發App實戰1-識歲

http://uikoo9.com/dishi

http://uikoo9.com/shisui

Framework7

HBuilder優點有很多，參見下面的幾篇文章，

缺陷也有些，比擬大的就是ui，和Framework7一比，完全是大相徑庭，

從幾年前的初識，到前段時間Framework7推出Android版本的冷艷，

覺得總有人在耳語，這麼好的東西不做app，惋惜了，

參考：贊，framework7~

結

說了半天，其實就是想說Framework7效果很好，但這個東西配合HBuilder玩不轉，配合phonegap效果很好。

【後期預備】 1.裝置phonegap 1

npm i -g phonegap@latest

裝置進程參見官網：http://docs.phonegap.com/getting-started/1-install-phonegap/cli/不關鍵怕，只是幾行代碼，前提是有nodejs和npm，這個就自己百度吧。

2.下載phonegap developer app

iphone直接在app store搜索就行，Android的話需求去google play，假如不能FQ的同窗可以下載這個

3.git clone

git地址：https://github.com/uikoo9/phonegap-framework7.git

4.目錄引見

demo1為android版本，demo2為IOS版本

【android版】 1.cd到demo1/www下

2.phonegap serve

Framework7文件比擬多，輸出命令後耐煩等會。

3.翻開phonegap developer app

找一個裝置了phonegap developer app的android手機，而且要保證可以訪問到手機網絡

翻開app，然後輸出下面serve地址，點擊connect

4.效果

【IOS版】

和android版本相似，不同的是進入demo2，並且運用iphone手機檢查效果，如下：

【phonegap-serve】

phonegap serve 命令會在本機啟動一個小型的web serve服務，

做前端的應該比擬熟習，和browser-sync類似，

當手機訪問本機serve的時分，會將本機www目錄下的文件傳輸到手機上，

進而基於phonegap developer app打包成一個app，方便調試，

這種真機調試方式也是比擬好的，

1.不需求數據線，只需求手機上裝置app

2.啟動的serve可以監聽文件修正，當有文件修正的時分立刻更新

【Framework7單頁面使用】 文件構造

從github上下載framework7之後，可以看到文件構造如下：

復雜的引見下：

1.dist：放構建後的資源文件，一些js，css之類的

2.kitchen-sink-ios：ios風格

3.kitchen-sink-material：android風格

進入kitchen-sink-ios文件夾下可以看到構造如下：

翻開各個html，發現只要index是有完好構造的，也就是有html，head，body等，

而其他的html文件都只是一些html片段，例如popover.html文件：

SPA使用

前端開展迅猛，常常會聽到一些名次，spa，mvvm，mvc之類的，

假如你的前端還是停留在切圖做頁面的層次，那麼曾經out的不行了，

所謂spa，就是單頁面使用，

所謂單頁面使用就是，進入的時分只加載一個主頁面，然後其他你看到的跳轉頁面，都是以div的方式展示，

拿framework7來說，就是經過AJAX加載不同的html文件中的html片段然後展示，

單頁面的最大益處是：加載快，頁面之間跳轉可以做出各種效果，普通的href跳轉是能干為力的。

前端mvc

能夠有經歷的人員曾經想到了，你加載的url都是index.html，然後這個url不變化，只是加載各種div頁面，

那麼問題來了？當用戶要直接訪問about.html的時分怎樣做，由於你只要一個index.html的url，

spa普通是經過#分隔外加路由完成的，例如訪問about.html的時分url為index.html#about之類的，

所以說一個完善spa框架，路由局部是必不可少的，

或許說前幾年的spa大火，激起了一波前端mvc框架，例如backbone，angularjs等，

mvvm

假如細心想想，那是不是又會有一個問題，spa的主html+其他div的形式帶來一個問題，

普通的href跳轉的方式，服務器前往的是曾經渲染號的html+data的一個全體，例如JSP，

但是spa的形式，經過AJAX懇求獲取的是一段html代碼片段，然後再次AJAX懇求data，

那麼你到手的是html和data，並不是html+data的全體，

這個時分將data渲染到html最普通的方式就是js或許jq一個一個設置，想想都頭大，

處理這個問題的就是js template，也就是js模版，例如juicer這個模版效果：

大大放慢了data整合html的進程。

js template是一個data到html的單向數據綁定，而mvvm就是雙向數據綁定。

結

1.spa

如今前端的迅猛開展，spa功不可沒，雖然如今spa絕對不那麼火了。

2.phonegap過時？

有人和我說phonegap他12年就聽說了，不是早過時了麼，

phonegap火的時分，對應的ui最佳伙伴是jquery ui，體積大效果差，外加硬件跟不上，

這些才是phonegap被诟病的緣由，而並不是phonegap自身不好，

phonegap，hbuilder這類工具只是一個打包工具，將你的html+css+js打包正app，只是做了這個事情，

只需hybirdapp還存在一天，phonegap做為打包工具就不會過時，

而且目前手機硬件下去了，phonegap+spa的方式應該也是一種不錯的體驗。

轉載：http://uikoo9.com/book/chapterDetail/105

【（一）半小時開發一個APP】的相關資料介紹到這裡，希望對您有所幫助！ 提示：不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦！