Web程序員開發App系列
- Web程序員開發App系列 - 認識HBuilder
- Web程序員開發App系列 - 申請蘋果開發者賬號
- Web程序員開發App系列 - 調試Android和iOS手機代碼
- Web程序員開發App系列 - 開發我的第一個App
- 待續
目錄
前言
好久沒寫博客啦，2年前進入一個創業型公司，由於太忙，再加上家里有又多了個小寶貝，一直沒時間寫博客，現在待的公司雖然人不多，但有幾位技術牛人，而且我自己在這里也能發揮長處，這兩年也學了不好東西，半年前公司一個項目需要做一個App，但是招開發App的人就不太合適，我剛進公司就用 jQuery.Mobile 開發過一個手機的網頁版，但是最后發現很多問題，暫停的開發，最后同事發現了一個用Html開發，然后用在線平台打包Android和IOS的工具，也就是我下面要介紹的 HBuilder，經過幾天的研究，發現可以嘗試一下，結果一個月的開發終於完成了，為什么半年前花一個月的時間開發完成了，我現在才來寫博客？原因嘛。。。被蘋果IOS系統卡主了，具體原因我將在后面的博客中講述，由於東西較多，我講分幾篇博客寫
什么是HBuilder
DCloud 即數字天堂(北京)網絡技術有限公司，DCloud 開發了一套App發布、調試、網頁開發工具、HTML5前端框架等，能把我們開發的Html靜態文件打包成一個App，工具名稱就叫HBuilder，首先到官網去下載 http://www.dcloud.io/ 里面還有很多幫助文檔和論壇，各位可以去看看介紹，我這里只介紹我自己的開發過程，此工具號稱最好用的前端開發工具，不過使用起來確實很好用，只不過我用 Visual Studio習慣了，有時候還是需要用VS輔助一下
准備工作
首先去官網把 HBuilder 下載下來，http://www.dcloud.io/ ，是個解壓包，都不需要安裝，放到你指定的位置就行，有Windows版和Mac版，兩者版本操作都差不多，只是一個是調試Android的，一個是調試IOS的，基本上調試一個版本就可以了，因為最后發布出去的App都一樣，很少有不一樣的情況，我在開發中遇到了一個不一樣的情況就是Android對Url不區分大小寫，而IOS就區分，導致IOS引用的文件不加載，由於此工具開發出來的是完全靜態的Html文件，只有javascript代碼，所以需要后台開發做支撐，我這里選用了MVC作為數據后台，差點忘了，需要調試IOS你還需要一台Mac電腦，O(∩_∩)O~
打開HBuilder
我的第一個App
首先你可以創建一個例子來完整的試試效果，不必着急寫后台代碼，HBuilder 提供了2個例子，一個是登錄，一個是MUI介紹，MUI是DCloud 開發的前端框架，你也可以使用其他的框架，我們來創建一個MUI的例子，
點擊 文件-新建-移動App，在彈出框中輸入項目名稱，選擇下面的 Hello mui 實例
這個時候你就可以把手機插上電腦，見證奇跡的時刻，點擊 運行-手機運行，
你會發現什么都沒有， W(￣_￣)W，別急，Android手機需要用手機助手安裝驅動，這個簡單，但是iPhone就需要安裝插件和下載iTunes了，你會發現iPhone很難伺候呀，呵呵，確實iPhone更難的還在后面呢，Windows下你可以把App植入到iPhone，但是網頁代碼不能調試，需要Mac版的才可以哦
點擊 工具-插件安裝 ，選擇IOS連接插件，點擊安裝，再安裝iTunes
再次點擊手機運行，發現手機出現啦，又一次見證奇跡的時刻到了，點擊你要調試的手機
然后會在你桌面出現一個 HBuilder 的App，Android的用戶可以直接打開，但是iPhone的用戶先點擊App，會提出一行提示，按照提示操作一下就可以進入了
哇，我開發的第一個App，O(∩_∩)O~
配置源代碼管理
我們公司使用的TFS源代碼管理，HBuilder 支持TFS和SVN，我這里只介紹TFS的配置，其他的大家可以自己研究
點擊 工具-插件安裝，在彈出框中我們可以看到有SVN的插件，但是這里我需要TFS，點擊 瀏覽Eclipse插件市場，搞Java的人對Eclipse應該很熟悉吧
在市場中搜索TFS，找到第一個就是的哦，點擊Install，然后等待下載，后面就是下一步下一步就可以了
重啟 HBuilder 后發現找不到 TFS配置的話，請點擊 視圖-顯示視圖-其他...
找到團隊資源管理器，點擊確定，下面的操作就和在VS中配置一樣了
連接公司的TFS服務器
在你自己項目上右鍵-版本管理-共享項目...，在彈出框選擇自己的項目目錄就可以啦
最后就可以看到我們熟悉的菜單啦
