整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
從HTML5霸氣上線以來(lái)，便迅速占領(lǐng)了數(shù)百萬(wàn)開(kāi)發(fā)者的使用高地，知名企業(yè)猶如Google、Facebook以及亞馬遜等紛紛從 Adobe Flash 轉(zhuǎn)移到了 HTML5。于是在移動(dòng)時(shí)代來(lái)臨之際，HTML5也順勢(shì)成為開(kāi)發(fā)者們的重點(diǎn)遷徙對(duì)象，成功引領(lǐng)潮流。然而在開(kāi)發(fā)的過(guò)程中，并不是每個(gè)開(kāi)發(fā)者都能將細(xì)微之處做到極致，那如何才能讓你的H5在汪洋大海中獨(dú)樹(shù)一幟呢？本文將分享幾個(gè)妙招，讓你的開(kāi)發(fā)更完美。
單頁(yè)內(nèi)容控制
移動(dòng)端H5活動(dòng)頁(yè)面經(jīng)常需要分享到社交App（如微信、QQ等）中，而用移動(dòng)設(shè)備查看頁(yè)面時(shí)會(huì)發(fā)現(xiàn)，微信瀏覽器中有頂部導(dǎo)航欄，但QQ內(nèi)置瀏覽器里不止有頂部導(dǎo)航，底部也有操作欄（safari瀏覽器也一樣），這些都會(huì)占用設(shè)計(jì)稿顯示區(qū)域。
為了避免打開(kāi)的web與瀏覽器導(dǎo)航欄發(fā)生沖突，一般會(huì)使用多媒體自適應(yīng)的形式，根據(jù)屏幕像素的不同，向上的間距也要相應(yīng)進(jìn)行變化，而我們?cè)O(shè)計(jì)常用尺寸是750 x 1334 / 640 x 1136，因此在設(shè)計(jì)環(huán)節(jié)就需要考慮單頁(yè)內(nèi)容，頁(yè)面底部要預(yù)留一定的空白，這樣在微信或QQ中才不會(huì)被遮住。
如下圖（QQ內(nèi)置瀏覽器）：頁(yè)面設(shè)計(jì)尺寸為 750 x 1334，頂部占用 150px，底部占用 110px，共占用了 260px，因此設(shè)計(jì)稿內(nèi)容應(yīng)控制在 1334-260=1074px 的高度內(nèi)。編寫代碼時(shí)，使用 Chrome 瀏覽器模擬設(shè)備大小，將該尺寸（750*1074）存下來(lái)，用于實(shí)時(shí)查看移動(dòng)端頁(yè)面效果。
H5頁(yè)面窗口調(diào)整
根據(jù)HTML5 “一次開(kāi)發(fā)，多處兼容”的特性，能夠橫跨多種平臺(tái)和設(shè)備，而利用 meta 標(biāo)簽對(duì)頁(yè)面進(jìn)行縮放，使得我們可以直接根據(jù)設(shè)計(jì)稿來(lái)進(jìn)行頁(yè)面的編寫，不用再進(jìn)行單位的換算等等，在此注意調(diào)整頁(yè)面窗口，禁止用戶縮放就能省去很多不必要的麻煩。
識(shí)別錯(cuò)誤源頭并更改
在做移動(dòng)端的web開(kāi)發(fā)的時(shí)候； iOS 上的Safari總會(huì)把長(zhǎng)串?dāng)?shù)字識(shí)別為電話號(hào)碼，文字變成藍(lán)色，點(diǎn)擊還會(huì)彈出菜單提示用戶是否撥打電話。別的地方倒也罷了，如果在用戶名中出現(xiàn)數(shù)字（例如手機(jī)注冊(cè)新浪微博的話用戶名就是“手機(jī)用戶xxxxxxxx”），這種版式會(huì)讓你的app瞬間掉價(jià)，按照下列方式便可避免。
禁用后，如果想要頁(yè)面識(shí)別電話功能，做法如下。
同理，Android平臺(tái)中也會(huì)無(wú)故出現(xiàn)對(duì)郵箱地址的識(shí)別，將telephone 換成email就OK了。
圓圖邊框設(shè)置
在安卓的開(kāi)發(fā)平臺(tái)上，當(dāng)圓形圖片使用 border 時(shí)，邊框就任性的變形了（如上圖所示）
這時(shí)只需要給 img 外嵌套一個(gè)元素，為其使用圓角，問(wèn)題就解決了。
實(shí)現(xiàn)打電話&發(fā)短信
1.打電話
2.發(fā)短信
測(cè)試二維碼圖片
有時(shí)候掃描二維碼之后，會(huì)跳轉(zhuǎn)至某個(gè)地址，不幸的話微信或者QQ會(huì)對(duì)這個(gè)地址進(jìn)行溫馨提醒，如下圖所示：
這樣會(huì)阻止部分用戶繼續(xù)訪問(wèn)，從而無(wú)法很好的將用戶引導(dǎo)到活動(dòng)想要推廣的產(chǎn)品/品牌頁(yè)面，如 App 的下載頁(yè)面等。因此二維碼的掃描測(cè)試不能少。
舉個(gè)例子，如果二維碼掃描結(jié)果是應(yīng)用的下載地址的話，可以使用應(yīng)用寶的微下載地址來(lái)生成二維碼，這是不會(huì)被“溫馨提醒”的。
微信二維碼
一般會(huì)碰到下面兩個(gè)問(wèn)題
1）同一個(gè)頁(yè)面里要是有兩個(gè)二維碼，長(zhǎng)按掃描總是只能掃出 左側(cè)/第一個(gè) 二維碼。
解決：可視區(qū)域內(nèi)只能出現(xiàn)一個(gè)二維碼。
2）使用 meta 標(biāo)簽縮放頁(yè)面后長(zhǎng)按二維碼圖片無(wú)反應(yīng)。
解決：使用了以下代碼之后，就能長(zhǎng)按識(shí)別二維碼了~
Retina 顯示屏
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣物理尺寸的屏幕上，蘋果設(shè)備的2倍retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè),在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺(jué)稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍，在此給出的前端的應(yīng)對(duì)方案是：
設(shè)計(jì)稿切出來(lái)的圖片長(zhǎng)寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來(lái)的1/2
// 例如圖片寬高為：200px*200px，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來(lái)的1/2，例如視覺(jué)稿40px的字體，使用樣式的寫法為20px.css{font-size:20px;}
禁止IOS和Android用戶選中文字
禁止IOS和Android用戶選中文字，只需按照下列方法即可。
改變placeholder顏色值
如何改變webkit表單輸入框placeholder的顏色值呢？來(lái)試試下面的方法。
此外，HTML5開(kāi)放的標(biāo)準(zhǔn)支持，還有助于為碎片化的移動(dòng)設(shè)備、不同的屏幕尺寸、差異化的平臺(tái)和操作系統(tǒng)開(kāi)發(fā)應(yīng)用。注意到了上面這些問(wèn)題，應(yīng)該能讓你的水平提高一個(gè)level,但是，小編無(wú)法測(cè)試所有的手機(jī)型號(hào)，無(wú)法盡善盡美。
本文轉(zhuǎn)載自寶原科技。
來(lái)越多的開(kāi)發(fā)者熱衷于使用html5+JavaScript開(kāi)發(fā)移動(dòng)Web App。不過(guò)，HTML5 Web APP的出現(xiàn)能否在未來(lái)取代移動(dòng)應(yīng)用，就目前來(lái)說(shuō)，還是個(gè)未知數(shù)。那么，有什么辦法，既可以使用HTMl5開(kāi)發(fā)應(yīng) 用，又可以將其簡(jiǎn)單封裝成APK文件呢？
一、Android SDK中的WebView
1.在要Activity中實(shí)例化WebView組件：WebView webView=new WebView(this);
2.調(diào)用WebView的loadUrl()方法，設(shè)置WevView要顯示的網(wǎng)頁(yè)：
? 互聯(lián)網(wǎng)用：webView.loadUrl("http://www.qietu.com");
? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中
3.調(diào)用Activity的setContentView( )方法來(lái)顯示網(wǎng)頁(yè)視圖
4.用WebView點(diǎn)鏈接看了很多頁(yè)以后為了讓W(xué)ebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點(diǎn)擊系統(tǒng)回退剪鍵，整個(gè)瀏覽器會(huì)調(diào)用finish()而結(jié)束自身，而不是回退到上一頁(yè)面
5.需要在AndroidManifest.xml文件中添加權(quán)限，否則會(huì)出現(xiàn)Web page not available錯(cuò)誤。
? <uses-permission android:name="android.permission.INTERNET" />
缺點(diǎn)：如果是載入的是普通網(wǎng)頁(yè)，沒(méi)有什么問(wèn)題，但如果是html5,封裝后，在android2.3以上才能正常訪問(wèn)，android2.2及以下，SDK中的WebView還沒(méi)完全支持HTML5
下面是具體例子：
MainActivity.java
??? package com.android.webview.activity; ?
??? import android.app.Activity; ?
??? import android.os.Bundle; ?
??? import android.view.KeyEvent; ?
??? import android.webkit.WebView; ?
??? public class MainActivity extends Activity { ?
??????? private WebView webview; ?
??????? @Override
??????? public void onCreate(Bundle savedInstanceState) { ?
??????????? super.onCreate(savedInstanceState); ?
??????????? //實(shí)例化WebView對(duì)象 ?
??????????? webview=new WebView(this); ?
??????????? //設(shè)置WebView屬性，能夠執(zhí)行Javascript腳本 ?
??????????? webview.getSettings().setJavaScriptEnabled(true); ?
??????????? //加載需要顯示的網(wǎng)頁(yè) ?
??????????? webview.loadUrl("http://www.qietu.com/"); ?
??????????? //設(shè)置Web視圖 ?
??????????? setContentView(webview); ?
??????? } ?
??????? @Override
??????? //設(shè)置回退 ?
??????? //覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法 ?
??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?
??????????? if ((keyCode==KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?
??????????????? webview.goBack(); //goBack()表示返回WebView的上一頁(yè)面 ?
??????????????? return true; ?
??????????? } ?
??????????? return false; ?
??? }
在AndroidManifest.xml文件中添加權(quán)限
??? <?xml version="1.0" encoding="utf-8"?>
??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"
????????? package="com.android.webview.activity"
????????? android:versionCode="1"
????????? android:versionName="1.0">
??????? <uses-sdk android:minSdkVersion="10" />
??????? <application android:icon="@drawable/icon" android:label="@string/app_name">
??????????? <activity android:name=".MainActivity"
????????????????????? android:label="@string/app_name">
??????????????? <intent-filter>
??????????????????? <action android:name="android.intent.action.MAIN" />
??????????????????? <category android:name="android.intent.category.LAUNCHER" />
??????????????? </intent-filter>
??????????? </activity>
??????? </application>
??????? <uses-permission android:name="android.permission.INTERNET"/>
??? </manifest>
二、使用PhoneGap
??? PhoneGap是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開(kāi)發(fā)平臺(tái)。它使開(kāi)發(fā)者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系 人，聲音和振動(dòng)等，此外PhoneGap擁有豐富的插件，可以以此擴(kuò)展無(wú)限的功能。PhoneGap是免費(fèi)的，但是它需要特定平臺(tái)提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，
詳細(xì)方法請(qǐng)見(jiàn)：http://phonegap.com/start#android
優(yōu)點(diǎn)：在Eclipse中加入SDK，編程自由，完美適應(yīng)不同設(shè)備屏幕大小，適合高手使用。
缺點(diǎn)：沒(méi)有使用布局，直接加載網(wǎng)頁(yè)，不能添加廣告。
----------------
切圖網(wǎng)（qietu.com）最早將psd轉(zhuǎn)html服務(wù)模式帶到國(guó)內(nèi)，并首個(gè)提供響應(yīng)式、webapp前端開(kāi)發(fā)的公司。專注web前端開(kāi)發(fā)技術(shù)，關(guān)注用戶體驗(yàn)，加我們公眾微信賬號(hào)：qietuwang（長(zhǎng)按復(fù)制）
子創(chuàng)意，關(guān)注前沿科技和創(chuàng)業(yè)資訊，提供專業(yè)的互聯(lián)網(wǎng)開(kāi)發(fā)，產(chǎn)品設(shè)計(jì)，媒體運(yùn)營(yíng)支撐服務(wù)和咨詢。如有需求歡迎朋友們合作和咨詢。
更多資訊，點(diǎn)擊上方【訂閱】，訂閱橘子創(chuàng)意。
一、 摘要
今天給大家介紹有關(guān)HTML5移動(dòng)開(kāi)發(fā)APP開(kāi)發(fā)框架,這里主要給大家介紹10款移動(dòng)APP開(kāi)發(fā)框架,下一篇文章將給大家具體演示一下如何用這些框架來(lái)搭建一個(gè)移動(dòng)APP應(yīng)用.
十款移動(dòng)APP開(kāi)發(fā)框架:
1.jquery mobile框架
2.bootstrap框架
3.ionic框架
4.Mobile Angular UI框架
5.Intel XDK框架
6.Appcelerator Titanium框架
7.Sencha Touch框架
8.Kendo UI框架
9.PhoneGap框架
10.mui框架
1.jquery mobile框架
jQuery Mobile是jQuery 在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile 不僅會(huì)給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。
2.bootstrap框架
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。
它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開(kāi)發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。
Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開(kāi)源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的Breaking News都使用了該項(xiàng)目。
國(guó)內(nèi)一些移動(dòng)開(kāi)發(fā)者較為熟悉的框架，如WeX5前端開(kāi)源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來(lái)。
3.ionic框架
Ionic 是一個(gè)強(qiáng)大的 HTML5 應(yīng)用程序開(kāi)發(fā)框架，可以幫助您使用 Web 技術(shù)，比如 HTML、CSS 和 Javascript 構(gòu)建接近原生體驗(yàn)的移動(dòng)應(yīng)用程序。
Ionic 主要關(guān)注外觀和體驗(yàn)，以及和你的應(yīng)用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動(dòng)應(yīng)用程序開(kāi)發(fā)。
4.Mobile Angular UI框架
Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的響應(yīng)式移動(dòng)開(kāi)發(fā)HTML5框架。
Mobile Angular UI的關(guān)鍵字有：
1.Bootstrap 3
2.AngularJS
Bootstrap 3 Mobile組件，比如switches, overlays和sidebars，這些都是bootstrap中沒(méi)有的。
AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate
響應(yīng)式媒體查詢是將bootstrap作為單獨(dú)的文件，你只需要包含你所需要的東西。
Mobile Angular UIu并不包含任何jQuery依賴，你需要做的只是通過(guò)一些AngularJS指令創(chuàng)建友好的用戶體驗(yàn)。
5.Intel XDK框架
Intel發(fā)布了其首個(gè)版本基于web的編程工具，可幫助開(kāi)發(fā)者為Android和iOS開(kāi)發(fā)移動(dòng)應(yīng)用。
這款免費(fèi)的軟件名為Intel XDK，實(shí)際上這是今年2月份Intel收購(gòu)的AppMobi軟件的重新包裝后的版本，所以并非新鮮事物。開(kāi)發(fā)者可用此軟件開(kāi)發(fā)基于HTML5的應(yīng)用，并 用于移動(dòng)設(shè)備中。
6.Appcelerator Titanium框架
Titanium 是一個(gè)跟手機(jī)平臺(tái)無(wú)關(guān)的開(kāi)發(fā)框架，用來(lái)開(kāi)發(fā)具有本地應(yīng)用效果的Web應(yīng)用。當(dāng)前主要支持 iPhone 和 Android 手機(jī)。
主要提供的API包括：
2D/3D animations
Geo-location, compass, and maps
Augmented reality features
Social app authentication and native client support for email
SOAP or REST API calls
Audio, video, and image capture and playback
Taps into local filesystem and SQL lite databases
Accesses photo gallery or address data
橘子創(chuàng)意，關(guān)注前沿科技和創(chuàng)業(yè)資訊，提供專業(yè)的互聯(lián)網(wǎng)開(kāi)發(fā)，產(chǎn)品設(shè)計(jì)，媒體運(yùn)營(yíng)支撐服務(wù)和咨詢。如有需求歡迎朋友們合作和咨詢。
更多資訊，搜索微信公眾號(hào)juzimedia，關(guān)注橘子創(chuàng)意。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
