前端開發APP,從HBuilder開始~
感謝分享
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效果
寫業務邏輯
如題
程式碼和圖片(簡單示例)
文字說再多感覺也不是很大,下面來程式碼和圖片,
檔案結構:
你沒有看錯,僅僅需要一個html頁面,加一些js,css,這個例子使用的jquery mobile
頁面程式碼:
head部分,僅僅引入一些必須的js和css
- <head>
- <metacharset="utf-8">
- <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- <title>hello world</title>
- <linkrel="stylesheet"href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
- <scriptsrc="http://cdn.staticfile.org/jquery/2.0.1/jquery.js"></script>
- <scriptsrc="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
- <scripttype="text/javascript">
- function helloworld(){
- alert("hello world!")
- }
- document.addEventListener('plusready', function(){
- alert("welcome to Html5plus!");
- });
- </script>
- </head>
body部分,普通的頁面
- <body>
- <divdata-role="page">
- <divdata-role="header">
- <h1>首頁</h1>
- </div>
- <divrole="main"class="ui-content">
- <p>一些主體內容在這裡。。</p>
- <form>
- <fieldsetdata-role="controlgroup">
- <label>
- <inputtype="radio"name="radio-choice-v-2"value="one"checked="checked">第一個
- </label>
- <label>
- <inputtype="radio"name="radio-choice-v-2"value="two">第二個
- </label>
- <label>
- <inputtype="radio"name="radio-choice-v-2"value="three">第三個
- </label>
- </fieldset>
- </form>
- </div>
- <divdata-role="footer">
- <h4>uikoo9.com</h4>
- </div>
- </div>
- </body>
除錯
手機連線電腦,然後在hbuilder下執行——手機執行——在裝置上執行,
就直接可以在手機上看效果了
效果
打包
在hbuilder中髮型——app打包,然後交給雲端去打包,打包好後會自動下載,例如
心動了嗎?
現在,如果你會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常用命令–免密登陸