使用Hbuild打包APP

最後更新：2018-09-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：class stat 功能個人 view ipa edit 引入實現

內容簡介

介紹目前前端人員開發app的幾種方法，具體介紹hbuilder開發app，一扇贊新的大門~

無所不能的js

最開始js僅僅局限於網頁上一些效果，操作網頁內容等，

但是nodejs把js帶入了後端，也就是伺服器端，從此前端人員可以涉及後端，前後通吃，

native.js（以及其他js，稍候介紹）把js帶入了移動端，從此前端人員前後移動通吃。

前端涉及app的兩種方式適應移動端的網頁

大家都很熟悉的bootstrap，和現在剛出來的amazeui就是這種方法的代表，

說的簡單點就是對移動端做了適配，是的配置樣式組件都適合移動端展示，

我的個人網站（uikoo9.com）就是使用bootstrap3做的，手機瀏覽效果也很好。

缺陷：畢竟不是app，不管怎麼樣也沒辦法取代app的便捷和功能強大。

js+html+css+打包技術

比較有名的就是phonegap了，國內的是hbuilder，

大概的意思是html負責頁面內容，js負責效果以及調用原生app方法，ui架構負責樣式，

最後打包成apk或者ipa。

hbuilder（http://www.dcloud.io/）

不談phonegap，不適用國內國情，

是的，你沒有看錯，這是一個開發的ide，其實就是對eclipse進行了深度定製。

特點是快速鍵比較多，支援移動app開發（h5+方式）。

h5+（http://www.html5plus.org/#home）

終於說到正題了，這個就是之前提到的打包技術，

可以說nodejs將js帶到後端，h5+將js帶到移動端。

原理

上面說過的原理，再次說一遍：

html負責頁面，也就是的內容和架構；

js負責調用方法，也就是調用一些移動端原生；

ui負責樣式，比較有名的bootstrap，amazeui，jQuery mobile，mui

ui比較

上面說的幾個ui，做下簡單比較，僅代表個人觀點，

amazeui，功能和bootstrap重複，官方解釋是對中文排版做了最佳化，個人覺得有點多餘，bootstrap就很好。

bootstrap，適合移動端瀏覽網頁適配，移動端瀏覽效果不錯，但是還是網頁。

jquery mobile，專門對移動端做定製，看起來就像手機應用一樣，js+css（300k），國外的，不推薦，有坑。

mui，這個是推薦的，比較了jqmobile和mui，顯然mui效果樣式好點，估計也會有坑，但是支援國產吧。

前端搞app搭建開發環境

不需要搭建iOS和Android的開發環境，只需要下載hbuilder（估計需要Java環境支援），

選定ui

目前推薦mui，效果不錯

寫事件

通過js調用原生方法實現app效果

寫商務邏輯

如題

代碼和圖片（簡單樣本）

文字說再多感覺也不是很大，下面來代碼和圖片，

檔案結構：

你沒有看錯，僅僅需要一個html頁面，加一些js，css，這個例子使用的jquery mobile

頁面代碼：

head部分，僅僅引入一些必須的js和css

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>hello world</title>



    <link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>

    <script src="http://cdn.staticfile.org/jquery/2.0.1/jquery.js"></script>

    <script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script type="text/javascript">

        function helloworld(){

            alert("hello world!")

        }

        document.addEventListener(‘plusready‘, function(){

            alert("welcome to Html5plus!");

        });

    </script>

</head>

body部分，普通的頁面

[html]

<body>

    <div data-role="page">

        <div data-role="header">

            <h1>首頁</h1>

        </div>



        <div role="main" class="ui-content">

            <p>一些主體內容在這裡。。</p>

            <form>

                <fieldset data-role="controlgroup">

                    <label>

                        <input type="radio" name="radio-choice-v-2" value="one" checked="checked">第一個

                    </label>

                    <label>

                        <input type="radio" name="radio-choice-v-2" value="two">第二個

                    </label>

                    <label>

                        <input type="radio" name="radio-choice-v-2" value="three">第三個

                    </label>

                </fieldset>

            </form>

        </div>



        <div data-role="footer">

            <h4>uikoo9.com</h4>

        </div>

    </div>

</body>

調試

手機串連電腦，然後在hbuilder下運行——手機運行——在裝置上運行，

就直接可以在手機上看效果了

效果

打包

在hbuilder中髮型——app打包，然後交給雲端去打包，打包好後會自動下載，例如

心動了嗎？

現在，如果你會html+js+css，那你只需要一個hbuilder就可以開發app了，通吃android和ios

原文連結：http://blog.csdn.net/uikoo9/article/details/43451377

使用Hbuild打包APP

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More