標簽： itcss3/javascripthtml5webapp手機網站搭建 |
分類： 前端制作之微信技巧篇 |
隨着微信的越來越大眾化，微信的使用程度也越來越高。隨之，產生了一種新的推廣模式，即微信推廣。在這個微信的大平台上會衍生出許許多多的推廣手段。而移動前端作為服務於手機用戶的手機網頁技術，也不可避免的加入進來。
一些客戶不僅僅滿足於自己的網站可以在手機瀏覽器上完美的展現出來，同時還要求可以在微信中進行廣泛推廣。這就要求移動前端的制作者在制作移動端網站的過程中，還要考慮是否兼容微信的推廣。
就制作技術而言，如果可以完美的在手機瀏覽器中顯示，那么在微信推廣里也可以完美顯示。因為微信中調用的網頁引擎就是你手機支持的網頁引擎。但在微信中顯示的網頁和在手機瀏覽器中顯示的網頁還是有一些細微的差別，這些細微的差別則決定了一些使用小技巧的可能。
微信對手機網頁的支持不是百分之百的，它因為自身業務發展的需要，對網站中的a標簽進行了二次封裝定義。一些使用在a標簽的js代碼，在某些特定情況下不產生效果了。而有些a標簽則莫名的產生了一些問題。
我舉2個例子來說明：
例子1：<a href='tel:400-4000-0000' >XXX<
Sencha Touch是個重量級的框架，是基於extjs寫的, 它的使用原理全是封裝好的方法，包括頁面布局和版塊。全是js方法生成。換句話說HTML頁面結構文檔中之間是沒有任何前端代碼結構的。這個也算是該框架的一大特點吧。
該框架優點是兼容性很廣，Android和IOS上都可以良好的運行。在布局上，手機、平板電腦都可以兼容。但其缺點也較明顯。過於封閉，調試起來很麻煩。需要有相當水平的前端技術才能使用。上手較慢，另外，運行速度和流暢度上，同比於jquery mobile、jqmobi、jqtouch差了一些。前端水平一般者，不建議使用該框架！
這個框架我使用的不多。平時偶爾拿來練練手而已，沒有實際太多的項目開發的使用經驗，對該框架的使用程度而言，我只是停留在初級階段，對它沒有進行很深入的研究和學習。因此本文權當是該框架的入門文章。只對該框架的進行簡單的介紹即可。想通過該篇文檔對Sencha Touch框架的使用水平有質的飛躍的話,請選擇專業的教程進行系統的學習，謝謝。
言歸正傳，下面對該框架進行簡單的介紹，同時我已經認為你的電腦上已經下載了該框架的整體文件包了。以下為代碼：
<!DOCTYPE html
標簽： css3/javascripthtml5webapp手機網站搭建移動前端 |
分類： 前端制作之自適應制作篇 |
隨着移動前端的手機屏幕分辨率越來越多，自適應設計制作顯得越來越重要。如何自適應屏高和屏寬是每個設計和制作人員共同需要考慮的事情。設計人員需要考慮N多分辨率的情況，而制作人員則需要考慮如何自適應布局等等。
我先從設計的角度來闡述這個問題，首先要考慮如何進行自適應設計。這個需要和制作人員進行溝通后決定，如果制作人員采用響應式布局（稍后會介紹此布局）的制作方案的話，則需要設計人員根據不同的屏寬來設計不同的效果圖以便提供給制作人員進行響應式布局制作。如果制作人員采用高寬最大化（稍后會介紹此布局）來進行布局制作的話，則需要設計人員提供一個最合理的分辨率設計效果圖來適應主流的所有分辨率屏幕的手機。
一、響應式布局
相應式布局的核心內容其實就是使用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等等。這些框架都有優缺點，不同的框架應用在不同的項目中。現簡單闡述一下各框架的優缺點：
一、Sencha Touch框架是一個重量級的框架、它上手較難，代碼復雜，並且需要較強的程序基礎才能學習，最開始的時候因為一個項目，想使用Sencha Touch框架，后來工期實在太緊張，根本沒時間學習它並使用。所以最后轉投其他框架。這個框架兼容性很高，運行起來的速度一般，需要長時間的學習且需要水平較高的程序基礎才行。所以不太適合前端制作人員的使用。我會在以后的機會單開一篇關於它的使用demo。
二、JQTouch是一個輕量級框架、純jquery寫法，上手比較容易，代碼容易理解，加載速度也很快，缺點是配合的移動端效果插件較少，需要很多外部的插件相結合，另外，個別插件還需要解決與框架之間的兼容問題。它的最大的一個弊端就是可利用和變通的布局較少。
三、Jquery-moblie也是一個輕量級框架、純jquery寫法，上手容
標簽： css3/javascripthtml5webapp手機網站搭建移動前端 |
分類： 前端制作之javascript篇 |
在互聯網中，一般用戶都是通過鼠標點擊、鼠標懸停、鼠標離開等執行一些前端的事件，但是在移動前端，用戶卻是通過手指來進行操作。從而衍生出移動前端的手勢事件。鼠標中的click事件雖然也可以在移動前端進行觸發，但這個事件在移動端會有大約半秒中的延遲。所以一般都不采用。
在移動端的手勢事件一般有四種情況：
touchstart: 手指放到屏幕上的時候觸發touchmove: 手指在屏幕上移動的時候觸發
touchend: 手指從屏幕上拿起的時候觸發
touchcancel: 系統取消touch事件的時候觸發。
前三者應用很廣泛，第四個應用較少。至今所做的項目中，第四項還沒涉及過。如果有人用過，可以拿出來分享一下。
前三者可以看成是用戶操作的一個過程。它們一般都是結合在一起使用。我舉個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事件在移動端的使用。舉幾個例子：
1、隱藏地址導航欄：
<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