標籤： itcss3/javascripthtml5webapp手機網站搭建 |
分類： 前端製做之微信技巧篇 |
隨着微信的愈來愈大衆化，微信的使用程度也愈來愈高。隨之，產生了一種新的推廣模式，即微信推廣。在這個微信的大平臺上會衍生出許許多多的推廣手段。而移動前端做爲服務於手機用戶的手機網頁技術，也不可避免的加入進來。javascript
一些客戶不只僅知足於本身的網站能夠在手機瀏覽器上完美的展示出來，同時還要求能夠在微信中進行普遍推廣。這就要求移動前端的製做者在製做移動端網站的過程當中，還要考慮是否兼容微信的推廣。css
就製做技術而言，若是能夠完美的在手機瀏覽器中顯示，那麼在微信推廣裏也能夠完美顯示。由於微信中調用的網頁引擎就是你手機支持的網頁引擎。但在微信中顯示的網頁和在手機瀏覽器中顯示的網頁仍是有一些細微的差異，這些細微的差異則決定了一些使用小技巧的可能。html
微信對手機網頁的支持不是百分之百的，它由於自身業務發展的須要，對網站中的a標籤進行了二次封裝定義。一些使用在a標籤的js代碼，在某些特定狀況下不產生效果了。而有些a標籤則莫名的產生了一些問題。前端
我舉2個例子來講明：html5
例子1：<a href='tel:400-4000-0000' >XXX<java
Sencha Touch是個重量級的框架，是基於extjs寫的, 它的使用原理全是封裝好的方法，包括頁面佈局和版塊。全是js方法生成。換句話說HTML頁面結構文檔中之間是沒有任何前端代碼結構的。這個也算是該框架的一大特色吧。jquery
該框架優勢是兼容性很廣，Android和IOS上均可以良好的運行。在佈局上，手機、平板電腦均可以兼容。但其缺點也較明顯。過於封閉，調試起來很麻煩。須要有至關水平的前端技術才能使用。上手較慢，另外，運行速度和流暢度上，同比於jquery mobile、jqmobi、jqtouch差了一些。前端水平通常者，不建議使用該框架！css3
這個框架我使用的很少。平時偶爾拿來練練手而已，沒有實際太多的項目開發的使用經驗，對該框架的使用程度而言，我只是停留在初級階段，對它沒有進行很深刻的研究和學習。所以本文權當是該框架的入門文章。只對該框架的進行簡單的介紹便可。想經過該篇文檔對Sencha Touch框架的使用水平有質的飛躍的話,請選擇專業的教程進行系統的學習，謝謝。web
言歸正傳，下面對該框架進行簡單的介紹，同時我已經認爲你的電腦上已經下載了該框架的總體文件包了。如下爲代碼：
標籤： css3/javascripthtml5webapp手機網站搭建移動前端 |
分類： 前端製做之自適應製做篇 |
隨着移動前端的手機屏幕分辨率愈來愈多，自適應設計製做顯得愈來愈重要。如何自適應屏高和屏寬是每一個設計和製做人員共同須要考慮的事情。設計人員須要考慮N多分辨率的狀況，而製做人員則須要考慮如何自適應佈局等等。瀏覽器
我先從設計的角度來闡述這個問題，首先要考慮如何進行自適應設計。這個須要和製做人員進行溝通後決定，若是製做人員採用響應式佈局（稍後會介紹此佈局）的製做方案的話，則須要設計人員根據不一樣的屏寬來設計不一樣的效果圖以便提供給制做人員進行響應式佈局製做。若是製做人員採用高寬最大化（稍後會介紹此佈局）來進行佈局製做的話，則須要設計人員提供一個最合理的分辨率設計效果圖來適應主流的全部分辨率屏幕的手機。
1、響應式佈局
相應式佈局的核心內容其實就是使用CSS3引入的Media Query模塊。它的意思就是，自動探測屏幕寬度，而後加載相應的CSS文件。
&l
首先，咱們先熟悉一下jQTouch的結構代碼：
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>jQTouch β</title>
<style type='text/css' media='screen'>
@import 'css/jqtouch.css';
</style>
<script src='js/jquery-1.4.2.min.js' type='text/javascript' charset='utf-8'></script>
<script src='js/jqtouch.js' type='application/x-javascript' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
var jQT = new $.jQTouch({
上文中，提到了許多的移動前端框架，此次主要介紹jqMobi框架。jqMobi也是輕量級框架、它的語言基於jquery語言。並對其進行了簡化，更有利於在移動設備上進行應用，而且速度很流暢。上手很容易。
首先，咱們要先部署jqMobi的環境，如下是代碼：
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>jqmobi精簡版本</title>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
<meta name='apple-mobile-web-app-capable' content='yes' />
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
<link rel='stylesheet' type='text/css' href='css/jq.ui.css' title='default'/>
<script type='text/javascript' charset='utf-8' src='js/jq.mobi.js'></script>
<script type='text/javascript' charset='utf-8' src='js/jq.debug.js'></script
爲了更好的提高用戶體驗，移動端逐漸出了許多的移動端的框架，好比Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。這些框架都有優缺點，不一樣的框架應用在不一樣的項目中。現簡單闡述一下各框架的優缺點：
1、Sencha Touch框架是一個重量級的框架、它上手較難，代碼複雜，而且須要較強的程序基礎才能學習，最開始的時候由於一個項目，想使用Sencha Touch框架，後來工期實在太緊張，根本沒時間學習它並使用。因此最後轉投其餘框架。這個框架兼容性很高，運行起來的速度通常，須要長時間的學習且須要水平較高的程序基礎才行。因此不太適合前端製做人員的使用。我會在之後的機會單開一篇關於它的使用demo。
2、JQTouch是一個輕量級框架、純jquery寫法，上手比較容易，代碼容易理解，加載速度也很快，缺點是配合的移動端效果插件較少，須要不少外部的插件相結合，另外，個別插件還須要解決與框架之間的兼容問題。它的最大的一個弊端就是可利用和變通的佈局較少。
3、Jquery-moblie也是一個輕量級框架、純jquery寫法，上手容
標籤： css3/javascripthtml5webapp手機網站搭建移動前端 |
分類： 前端製做之javascript篇 |
在互聯網中，通常用戶都是經過鼠標點擊、鼠標懸停、鼠標離開等執行一些前端的事件，可是在移動前端，用戶倒是經過手指來進行操做。從而衍生出移動前端的手勢事件。鼠標中的click事件雖然也能夠在移動前端進行觸發，但這個事件在移動端會有大約半秒中的延遲。因此通常都不採用。
在移動端的手勢事件通常有四種狀況：
touchstart: 手指放到屏幕上的時候觸發前三者應用很普遍，第四個應用較少。至今所作的項目中，第四項還沒涉及過。若是有人用過，能夠拿出來分享一下。
前三者能夠當作是用戶操做的一個過程。它們通常都是結合在一塊兒使用。我舉個360°旋轉的例子，經過代碼詳細說明一下。
<!DOCTYPE html>
<html>
<meta charset='utf-8'/>
<meta name='viewport' content='width=48
標籤： css3/javascripthtml5webapp手機網站搭建移動前端 |
分類： 前端製做之javascript篇 |
javascript(簡稱js)語言在移動前端應用很廣。能夠說必不可少，許多效果都是和js相關的。包括如今移動端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。這些都是基於js而進行編寫的。這篇暫時不討論這些框架。之後會慢慢介紹其中的一兩個框架的具體使用方法。這篇主要討論一下部分經常使用的js事件在移動端的使用。舉幾個例子：
一、隱藏地址導航欄：
<script type='text/javascript'>
// 該函數由Simon Willison編寫,它只有一個參數,該參數表示被調用的函數名(在頁面加載完畢時執行的函數的名字)
function addLoadEvent(func) {
var oldon1oad = window.on1oad;
if (typeof window.on1oad != 'function') {
window.on1oad = func;
}
else {
&
標籤： css3/javascripthtml5webapp手機網站搭建移動前端 |
分類： 前端製做之LINK標籤篇 |
上文的meta標籤中，提到了部分功能要結合link標籤進行使用。下面詳細的解釋一下移動端的link標籤。link標籤主要是存放CSS文件的地方，同時還有一些專屬的移動端設置在這裏體現。結合如下代碼進行說明：
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='viewport' content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' />
<meta http-equiv='Cache-Control' content='no-store' />
<meta name='apple-mobile-web-app-status-bar-style' content='black'/>
<meta name='apple-mobile-web-app-capable' content='yes' />
<link rel='apple-touch-startup-image' href='images/start.jpg'/>
<link rel='apple-touch-icon' href='images/iphone.png' /><link rel='apple-touch-icon' sizes='72x72' href='images/ipad.png' /><link rel='apple-touch-icon' sizes='114x114' href='images/iphone4.png' /><link rel='stylesheet' type='text
