2. 程式人生 > >前端開發APP，從HBuilder開始~

前端開發APP，從HBuilder開始~

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

感謝分享 

http://blog.csdn.net/uikoo9/article/details/43451377

內容簡介

介紹目前前端人員開發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。

不談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

相關推薦

前端開發APP，從HBuilder開始~

感謝分享  http://blog.csdn.net/uikoo9/article/details/43451377 內容簡介 介紹目前前端人員開發app的幾種方法，具體介紹hbuilder開發app，一扇贊新的大門~ 無所不能的js 最開始js僅僅侷限於網頁

現代前端開發路線圖：從零開始，一步步成為前端工程師

編者按：很多人都想學程式設計。但是苦於沒有具體的步驟和指導。比如想找份前端開發的工作，卻不知道應該先學習什麼再學習什麼，也不知道該選擇什麼樣的工具。因為經常被人問到類似的問題，全棧開發者Kamran Ahmed索性在github上制訂了一份現代前端開發的路線圖，並且用一篇文章

前端開發app，關於apicloud與dcloud的我的一些看法

這幾個月，學習了一些新技術，利用前端做了幾個移動端app，也曾學過一點java和android開發，對比了一下，發現用前端開發app和原生開發app相比，學習成本和時間真的小很多，很方便。 第一次做的app，用的是apicloud。覺得用這個平臺開

開發一款即時通訊App，從這幾步開始

聯系 多功能 數據監控 live 裁剪 ren vertica super 聯系人 歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐幹貨哦~ 本文由騰訊雲視頻發表於雲+社區專欄 關註公眾號“騰訊雲視頻”，一鍵獲取 技術幹貨 | 優惠活動 | 視頻方案 “晚上去哪吃

寫給初學大資料的你，從零開始學習大資料開發的完整學習路線

最近很多人都想學習大資料開發，但是卻不知道如何開始學習，今天專門整理了一份針對大資料初學者的大資料開發學習路線。 下面分十個章節來說明大資料開發要學習的內容： 網際網路科技發展蓬勃興起，人工智慧時代來臨，抓住下一個風口。為幫助那些往想網際網路方向轉行想學習，卻因為時間不夠，資源不足而放棄的人。我自

3，從零開始搭建SSHM開發框架（整合Spring MVC）

目錄 本專題部落格已共享在(這個可能會更新的稍微一些) 1.修改pom.xml，增加spring-mvc 的依賴 <project xmlns="http://maven.apache.org/POM/4.

使用Hbuilder開發App，打包App

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

2017年前端開發Angular.JS從入門到上手企業開發視頻

angular入門 angular學習 angular文後附錄下載鏈接：課時名稱1體驗angular2ng-init初始化變量3獲取應用程序4控制器定義作用域5使用事件6顯隱頁面7插值表達式8插值過濾器9filter過濾器10日期過濾器11新聞日期案例12字符串過濾器13數字過濾器14數組過濾器15自定義過濾

學習筆記GAN001:生成式對抗網絡，只需10步，從零開始到調試

sar quest 從零開始 http demo pip lib download mark 生成式對抗網絡(gennerative adversarial network,GAN)，目前最火的非監督深度學習。一個生成網絡無中生有，一個判別網絡推動進化。學技術，不先著急看書

[深度學習]實現一個博弈型的AI，從五子棋開始（1）

com class svm 顏色 display 深度 images += have 好久沒有寫過博客了，多久，大概8年？？？最近重新把寫作這事兒撿起來……最近在折騰AI，寫個AI相關的給團隊的小夥伴們看吧。 搞了這麽多年的機器學習，從分

事務的學習，從jdbc開始：jdbc對事務的支持與實現

如何實現 ransac 阻止 事務隔離 完成後 value 事務提交 val ack 　　在使用spring對項目進行開發時，所有的事務都是由spring來管理的。這樣一來我們就可以不需要操心事務，可以專心的處理業務代碼。 　　但是，事務的底層究竟是如何實現的呢？那就從j

Windows環境下，從零開始搭建Nodejs+Express+Ejs框架（一）---安裝nodejs

直接 分享圖片 完成 info pre download png 安裝包 get 第一步，安裝nodejs https://nodejs.org/en/download/ 這個是nodejs的官網，由於操作系統是win7 64位的，所以，我下載的是node-v8.11.1-

Windows環境下，從零開始搭建Nodejs+Express+Ejs框架（二）---安裝Express，ejs

所有 nod 環境 安裝目錄 關於 str 列表 ima 執行 安裝Express，ejs的前提是一定要先安裝nodejs，具體安裝方法請查看 http://www.cnblogs.com/tfiremeteor/p/8973105.html 安裝Express和ejs的前

【免費公開課】7月31日晚8點，韓立剛老師帶你走進IT運維，從零開始成長為IT專家~

計算 sof 數據 系統 初中 eight 路線 ESS 數據庫設計 直播主題：如何從零開始成長為IT運維專家直播時間：7月31日晚8點-9點主講講師介紹：51CTO金牌講師：韓立剛<<點擊進入講師主頁河北師大軟件學院網絡教研室主任，河北地質大學客座教授，微軟認

改變弱口令威脅，從意識開始

準備 打開 搜索 文本編輯器 目錄服務器 and disable adding method 密碼策略和工作單 本部分介紹密碼策略設置，並提供一個工作單，以幫助您定義符合要求的密碼策略。 註 – 要使用默認的密碼策略，請參見管理默認密碼策略。 密碼策略設置 在目錄服

身為前端開發工程師，你需要了解的搜尋引擎優化SEO.

網站url網站建立具有良好描述性、規範、簡單的url，有利於使用者更方便的記憶和判斷網頁的內容，也有利於搜尋引擎更有效的抓取您的網站。網站設計之初，就應該有合理的url規劃。 處理方式： 1.在系統中只使用正常形式url，不讓使用者接觸到非正常形式的url。 2.不把session id、統計程式碼等不必

身為前端開發工程師，你需要了解的搜索引擎優化SEO.

ide 收藏 htm des 頻道 最適 主題 開發工程師 用戶 網站url網站創建具有良好描述性、規範、簡單的url，有利於用戶更方便的記憶和判斷網頁的內容，也有利於搜索引擎更有效的抓取您的網站。網站設計之初，就應該有合理的url規劃。 處理方式： 1.在系統中只使用正

前端小團隊建設（實用前端開發規範，推薦收藏）

一、命名規則（英文-直譯） 1、檔案命名 資料夾/檔案的命名統一用小寫 保證專案有良好的可移植性，可跨平臺  2、檔案引用路徑 因為檔案命名統一小寫，引用也需要注意大小寫問題 3、js變數 3.1 變數 命名方式：小駝峰 命名規範：字首名詞 命名建議：語

Java面試，從我開始

Java面試，從我開始 基本資料型別 short 16位 2位元組 int 32位 4位元組 long 64位 8位元組 char 16位 2位元組 byte 8位 1位元組 boolean 1位 1位元組 float 32位 4位元組 double 64位 8位元組 do g

大資料技術學習路線，有信心能堅持學習的朋友，從現在開始吧

如果你看完有信心能堅持學習的話，那就當下開始行動吧！ 一、大資料技術基礎 1、linux操作基礎 linux系統簡介與安裝 linux常用命令–檔案操作 linux常用命令–使用者管理與許可權 linux常用命令–系統管理 linux常用命令–免密登陸