2. 程式人生 > >介紹hbuilder開發打包app

介紹hbuilder開發打包app

阿新 • • 發佈：2019-01-17

無所不能的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。

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

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

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

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

可以說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效果

寫業務邏輯

如題

程式碼和圖片（簡單示例）

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

檔案結構：

QQ截圖20150203160618.jpg

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

頁面程式碼：

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

  1. <head>
  2.     <metacharset="utf-8">
  3.     <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  4.     <title>hello world</title>
  5.     <linkrel="stylesheet"href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
  6.     <scriptsrc="http://cdn.staticfile.org/jquery/2.0.1/jquery.js"></script>
  7.     <scriptsrc="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
  8.     <scripttype="text/javascript">
  9.         function helloworld(){  
  10.             alert("hello world!")  
  11.         }  
  12.         document.addEventListener('plusready', function(){  
  13.             alert("welcome to Html5plus!");  
  14.         });  
  15.     </script>
  16. </head>

body部分，普通的頁面

  1. <body>
  2.     <divdata-role="page">
  3.         <divdata-role="header">
  4.             <h1>首頁</h1>
  5.         </div>
  6.         <divrole="main"class="ui-content">
  7.             <p>一些主體內容在這裡。。</p>
  8.             <form>
  9.                 <fieldsetdata-role="controlgroup">
  10.                     <label>
  11.                         <inputtype="radio"name="radio-choice-v-2"value="one"checked="checked">第一個  
  12.                     </label>
  13.                     <label>
  14.                         <inputtype="radio"name="radio-choice-v-2"value="two">第二個  
  15.                     </label>
  16.                     <label>
  17.                         <inputtype="radio"name="radio-choice-v-2"value="three">第三個  
  18.                     </label>
  19.                 </fieldset>
  20.             </form>
  21.         </div>
  22.         <divdata-role="footer">
  23.             <h4>uikoo9.com</h4>
  24.         </div>
  25.     </div>
  26. </body>

除錯

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

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

效果

QQ截圖20150203161848.jpg

打包

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

QQ截圖20150203162006.jpg

心動了嗎？

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

更多

相關推薦

介紹hbuilder開發打包app

無所不能的js 最開始js僅僅侷限於網頁上一些效果，操作網頁內容等， 但是nodejs把js帶入了後端，也就是伺服器端，從此前端人員可以涉及後端，前後通吃， native.js（以及其他js，稍候介紹）把js帶入了移動端，從此前端人員前後移動通吃。 前端涉及app的兩種方式 適應移動端的網頁 大家都很熟

使用HBuilder開發移動APP：ajax呼叫介面資料

既然要做APP，與介面互動式少不了的，除非只是想做一個純靜態的APP。所以html5+的環境準備好後，我最先開始研究的就是如何與介面互動。 使用HBuilder新建示例教程後，裡面會有一個ajax(網路請求)的列子，檔案目錄是examples/ajax.html。看了下這個檔

hbuilder 開發5+ APP採坑記錄

開發一款APP產品需要在安卓和蘋果2大平臺釋出，同時開發團隊也需要有安卓和IOS。 HTML5 Plus移動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App可以通過擴充套件的JS API任意呼叫手機的原生能力，實現

HBuilder開發詞典app（四）--呼叫有道api完成翻譯功能

這一節也比較簡單，就是建一個textarea獲取使用者輸入的值，然後呼叫有道api進行翻譯，最後展現在相應位置，需要注意的是，點選頭部的翻譯按鈕自動跳轉到翻譯頁面，並且底部欄點亮樣式會隨之改變： <!DOCTYPE html> <html&g

hbuilder開發移動app視訊教程,mui視訊教程,html5視訊教程1-李磊-專題視訊課程

hbuilder開發移動app視訊教程,mui視訊教程,html5視訊教程1—12653人已學習 課程介紹        本課程為基於MUI的混合模式app開發系列課程的MUI基礎課程部分，主要介紹了MUI的各種控制元件的基本使用。讓大學在實際操作中掌握MUI的基礎控制元件應

HBuilder開發App教程03-定制圖標，啟動頁以及打包

頂部 版本 默認 升級 clas art app名稱 支付 新版 helloworld 上次說到了helloworld。你應該已經能夠新建項目。真機調試了， 這次來說說圖標的定制，啟動頁的定制以及打包。 圖標定制 假設不定制圖標的話，默認會是博文頂部圖表的樣子，

移動web：原生開發打包，嵌入h5頁面 webApp：全部都是H5開發的應用 混合APP：使用第三方開發平臺從apicloud，appcan，hbuilder等開發，cordova技術打包 原生APP：就是eclipse開發或者studio等工具開發

應用 手機 .com net ack 自動連接 pan 經驗 使用 論壇43213 移動端webApp兼容問題解決 談談App混合開發 Hybrid APP混合開發的一些經驗和總結 PhoneGap是一個采用HTML，CSS和JavaScript的技術，創建

使用Hbuilder開發App，打包App

工具Hbuilder是由DCloud推出的一款支援HTML5的Web開發IDE。支援開發檢視、邊改邊看模式、webview除錯模式、團隊同步檢視。也可以連線真機或使用模擬器直接執行。由於使用了MUI的一些元件，並且本次的執行環境定位於點餐商家介面的移動APP。真機的好處在於可

MUI+H5plus+HBuilder開發app（android，ios）介紹

前言 現在介紹一款只需要懂html+css+js就能開發app的框架，不需要懂原生語言，完全只需要前端web工程師就能獨立開發出android和ios的應用，且一套程式碼搞定，效率很高。（其實更省事可以wap，android和ios一套帶走，一下R閃秒3個平臺

Hbuilder開發app實戰-識歲01-actionsheet實例

build builder ace popu div 接口 一是 識別 cancel 前言 之前寫了HBuilder開發App入門-滴石。相信大家看完後應該能夠入門了， 之後會做一些簡單的app。把nativejs一些經常使用的功能都過一遍，這樣以後做app就沒什麽難

Hbuilder開發app時生成ios要的mobileprovision和p12文件步驟.

。。 hbuilder p12 mob req mobile 右擊 文件下載 鑰匙 1.在MAC電腦.鑰匙串串訪問->證書助理->從證書頒發機構請求證書，創建一個證書為certSigningRequest文件 2.在Apple Developer中的Certi

學用HBuilder開發App的看過來

專業 應用技術 移動 hbuilder 支持 當前 app開發 nbsp bsp 自己的嘔心瀝血之作吧，花了一年時間，系統介紹HTML5 App開發的相關技術。 越來越多的公司采用HTML5來快速開發移動跨平臺App，它支持當前市場流行的移

vue項目（webpack+mintui），使用hbuilder打包app

移動 兩個 應用名稱 開發 使用 發的 菜單 ani 安裝位置 一、配置config/index.js 本人沒有配置index.js文件，就開始進行了打包，結果最終效果是頁面空白，解決了空白，接著底部圖標（我是用的阿裏巴巴圖片）資源找不到。所以配置這步比較重要。 （1）頁面

vue項目 使用Hbuilder打包app 設置沈浸式狀態欄

status build ... 如果 imm 工作記錄 沈浸式 inf 技術分享 使用 Hbuilder新建好移動app項目後，mainfest.json這個文件裏的 plus裏設置 statusbar ..... "plus": { "statusba

vue專案 使用Hbuilder打包app 設定沉浸式狀態列

使用 Hbuilder新建好移動app專案後，mainfest.json這個檔案裡的 plus裡設定 statusbar ..... "plus": { "statusbar": { "immersed": true },

Hbuilder開發app實戰-識歲06-face++的js實現【完結】

前言 由於識歲app比較簡單，所以這節就完結吧， 當然還有一些可以優化完善的地方，但是個人興趣不是很大， 有想繼續完善的，原始碼在這裡：https://github.com/uikoo9/shisui face++ 在簡單的介紹下face++， 不久前，微軟推

Hbuilder開發app實戰-識歲05-Crypto.js實現各種js加密演算法

前言 js加密，應該說做js開發的很少接觸到這一塊，因為很多時候都是做加密，很少有前端做加密的， 很榮幸我接觸過兩次，找到了crypto.js，很好的東西，可以實現各種js加密。 吐槽 吐槽下前端做加密，一般來說前端做加密這需求是很少的，極少的， 我卻碰到了兩次，

Smobiler打包apk安裝包——C# 或.NET Smobiler例項開發手機app（六）

免責宣告：此文涉及“極光”、“高德”、“掌上川電”關鍵字。本人以傳遞知識的心態發表文章，若有侵權聯絡[email protected]即刪！ 目錄 一、 前言 二、建立應用 1、 註冊Smobiler的賬號 2、上傳資源 3、 連線專案 三、 應用打包

HBuilder開發APP（二）——網路請求

 mui框架中給我們封裝好了常用的Ajax函式，是基於XMLHttpRequest，支援GET、POST請求方式，支援返回json、xml、html、text、script資料型別。         mui

Hbuilder開發app實戰-識歲04-七牛雲上傳檔案的js實現

七牛雲上傳 七牛雲的上傳支援很多種語言，我用過的有java和js，個人感覺都比較方便， 當然java要比js方便一點吧，由於是app中要上傳到七牛雲，所以不可能使用java， 就看拉看七牛雲的js上傳，詳見這裡：http://developer.qiniu.com/docs/v6/api/o