使用Hbuilder進行混合App開發

摘要： App，泛指我們談論的iOS與Android上執行的應用程式（主要是這兩大平臺）。目前App的開發主要有以下幾種形式： 1、Native App：原生應用。即使用應用平臺的開發語言開發的App，例如Android系統使用Java，iOS系統使用的object-c等。 2、Hybrid ...

App，泛指我們談論的iOS與Android上執行的應用程式（主要是這兩大平臺）。目前App的開發主要有以下幾種形式：

1、Native App：原生應用。即使用應用平臺的開發語言開發的App，例如Android系統使用Java，iOS系統使用的object-c等。

2、Hybrid App：混合開發App，即使用原生與HTML5+JS相互呼叫的一種開發模式，把HTML5頁面放進一個原生容器中，通過JS API實現呼叫系統原生功能。這種模式能夠實現一次編寫，多端執行的跨平臺開發，大大降低App的開發成本。

3、Web App：不屬於嚴格意義上的App，純粹使用HTML5+JS開發，基於HTML5的API實現功能。

現在有許多混合App開發的框架，使得具備HTML5+JS知識的前端工程師，能夠通過簡單的學習，具備編寫App的能力。

這邊主要介紹HbuilderX的 5+ App 這個框架，這個框架是國產的，雖然槽點也挺多，但是對於國內開發者還是比較友好的，有對應的論壇以及註釋完整的demo。

開發App有如下幾個優點：

1、能夠隨心所欲的使用系統的API，實現個性化的需求，例如推送、後臺常駐服務等。

2、提供更好的體驗，無需所有的資源都從網路載入。可以呼叫其他App為自己的服務提供更好的支援，例如地圖、支付。

3、避免依附於其他平臺遭到封殺。

那麼我們從哪裡開始？

工欲善其事必先利其器，首先先熟悉一下我們要使用到的工具。

Hbuilder：一款支援多種語言的IDE編輯器，也是在5+App開發中的主要工具，用Hbuilder可以進行真機執行除錯以及打包。

接著先熟悉基本思路：

所謂5+App，就是把HTML頁面放在本地，無需每次載入，從而提升體驗。每個HTML頁面單獨使用一個webview載入。（webview可以理解為瀏覽器中的標籤頁，在瀏覽器中，HTML5都是在同一個標籤頁中操作，對於例如後退就會重新載入上一頁，造成卡頓延遲的感受，如果是每個頁單獨出來的話，感受就不一樣了，就會很順暢，不會有重新載入的情況。）

用Hbuilder新建一個專案，選擇5+App

然後把你的HTML檔案放到專案資料夾中，就開啟了你的5+App征程了。

兩個必做的事情：

1、所有的location.href 、a跳轉都改為plus.webview.open(url)。這樣可以使用webview開啟頁面，避免後退過載。

2、有需要重新整理的地方都加上下拉重新整理控制元件。

其他優化詳見：

http://ask.dcloud.net.cn/article/25

常見問題：

這是我學習5+App開發的時候遇到的問題，相信新手也會遇到，我把答案貼在這裡，方便大家查閱。

1、5+App可以上App Store嗎？

親測可以，詳情見蘋果稽核指南。如果被拒絕蘋果都會指出違背了哪條準則，並給出建議。

2、使用官方原生tabbar模板，在iOS上點選tabbar無反應？

這個問題我搜索過，沒有答案。最終自己解決了。官方那個模板的話，繪製tabbar的程式碼是寫在manifest.json裡面的。iOS中獲取不到這個原生控制元件導致的問題。解決辦法是直接在index.html裡面繪製tabbar。

var nview = util.drawNative('tabbar', {
"bottom": "0px",
"left": "0",
"height": "60px",
"width": "100%",
"backgroundColor": "#fff"
}, [{
"tag": "font",
"id": "indexIcon",
"text": "\ue61f",
"position": {
"top": "10px",
"left": "0",
"width": "25%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/ic_tabbar.ttf",
"align": "center",
"size": "24px"
}
},
{
"tag": "font",
"id": "indexText",
"text": "首頁",
"position": {
"top": "30px",
"left": "0",
"width": "25%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},
{
"tag": "font",
"id": "newsIcon",
"text": "\ue63b",
"position": {
"top": "10px",
"left": "25%",
"width": "25%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/ic_tabbar.ttf",
"align": "center",
"size": "24px"
}
},
{
"tag": "font",
"id": "newsText",
"text": "附近",
"position": {
"top": "30px",
"left": "25%",
"width": "25%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},
{
"tag": "font",
"id": "contactIcon",
"text": "\ue622",
"position": {
"top": "10px",
"left": "50%",
"width": "25%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/ic_tabbar.ttf",
"align": "center",
"size": "24px"
}
},
{
"tag": "font",
"id": "contactText",
"text": "購物車",
"position": {
"top": "30px",
"left": "50%",
"width": "25%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},
{
"tag": "font",
"id": "newwindowIcon",
"text": "\ue621",
"position": {
"top": "10px",
"left": "75%",
"width": "25%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/ic_tabbar.ttf",
"align": "center",
"size": "24px"
}
},
{
"tag": "font",
"id": "newwindowText",
"text": "我的",
"position": {
"top": "30px",
"left": "75%",
"width": "25%",
"height": "24px"
},
"textStyles": {
"align": "center",
"size": "10px"
}
},
{
"tag": "rect",
"id": "tabBorder",
"position": {
"top": "0",
"left": "0",
"width": "100%",
"height": "1px"
},
"rectStyles": {
"color": "#ccc"
}
}
])

其他問題都可以在論壇上搜索得到，如果有其他問題可以留言，如果我知道的話，我就回答並補充在這篇文章中。