移動h5開發資源整理

時間 2019-11-07

標籤移動 h5 開發資源整理欄目無線简体版

原文原文鏈接

移動h5開發資源整理

這2年來，移動h5開發逐漸成爲一種主流，也不斷趨向於成熟。硬件和瀏覽器的不斷更新，曾經的瀏覽器兼容也再也不是開發者的噩夢。javascript

接觸h5開發一年多，從最初的新手到如今，陸陸續續遇到過不少坑。這裏把想到的一些經驗與資源羅列出來，給剛入h5的同窗帶來一些幫助。該文章會持續更新。php

內容比較多，能夠點擊下方『懸浮菜單按鈕』進行選擇須要閱讀的章節。css

基礎知識

新手建議看看下面的在線教程。html

html,css,JavaScript,jQuery在線教程：
w3school在線教程：http://www.w3school.com.cn/
菜鳥教程：http://www.runoob.com/前端

參考手冊：
jQuery：http://hemin.cn/jq/
css：http://css.doyoe.com/java

h5頁面基本組成

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> </body>

meta viewport模板

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>標題</title> <link rel="stylesheet" href="index.css"> </head> <body> 這裏開始內容 </body> </html>

以上支持響應式佈局設計。jquery

有用的js類庫

jQuery

這個必須學會的。
在線教程：http://www.w3school.com.cn/jquery/index.asp
在線手冊：http://hemin.cn/jq/android

Zepto

Zepto和jQuery基本是同樣的，只是因爲其體積更小，適合移動端使用。若是你會用jquery，那麼你也會用zepto。注意，zepto並無實現jQuery的全部功能，這也就意味着jQuery的插件Zepto不能直接拿來用。ios

注意：
Zepto默認構建包含如下模塊：
Core, Ajax, Event, Form, IE.

也就是意味着下列模塊可能須要本身加入或從新編譯進去：
detect、fx、fx_methods、assets、data、deferred、callbacks、selector
、touch、gesture、stack、ios3。

underscore

爲JavaScript提供了不少好用的方法，能夠當工具函數庫使用。

Underscore提供了100多個函數,包括經常使用的: map, filter, invoke — 固然還有更多專業的輔助函數,如:函數綁定, JavaScript模板功能,建立快速索引, 強類型相等測試, 等等.

API參考：http://www.css88.com/doc/underscore/

backbone

前端的MVC框架。Backbone.js爲複雜WEB應用程序提供模型(models)、集合(collections)、視圖(views)的結構。

初學者瞭解便可。

API參考：http://www.css88.com/doc/backbone/

KISSY

官網說是一款強大的JavaScript框架。實質就是類jQuery+UI組件，淘寶網本身用的。感興趣的能夠了解了解。
http://docs.kissyui.com/

前端UI框架

想要快速構建一個網站或應用，尤爲在初入移動端開發，對移動端佈局、響應式不熟悉的時候，使用已有的UI框架能夠節省不少時間。網上有不少開源的UI框架。

如何選擇呢？
一、組件小(CSS+JS 總大小最好200KB之內)
二、提供經常使用組件：如表單、按鈕、對話框、toast等。最好還有日曆、時間選擇、TAB標籤、Popup、操做表、路由可供使用。
三、支持響應式。必須的。

下面推薦幾款供使用。曾經都使用過。

移動端：
FrozenUI：http://frozenui.github.io/
SUI Mobile：http://m.sui.taobao.org/
weui：https://github.com/weui/weui

缺陷與優勢：FrozenUI缺乏日曆、時間選擇、操做表、路由等組件，但體積很小，使用簡單。SUI路由很差用，體積偏大。這兩款均依賴Zepto。weui目前僅提供CSS組件，沒有集成JS。

Web端：
Bootstrap：http://www.bootcss.com/
ZUI：http://zui.sexy/#/

缺陷與優勢：Bootstrap算是頗有名的了。WEB建站必備，是不少人接觸的第一個UI框架，建議學會。直接使用Bootstrap3版本便可。後臺管理可使用ZUI。

js插件

彈出層

artDialog 4.1.7
http://lab.seaning.com/

layer（jQuery彈出層插件）
http://layer.layui.com/

layer.mobile
http://layer.layui.com/mobile/

SweetAlert：漂亮的alert美化插件
http://www.wufangbo.com/sweet-alert/

pickadate.js響應式時間選擇器（依賴jQuery）
https://github.com/amsul/pickadate.js

layDate - js日期控件與時間插件官方講解
http://laydate.layui.com/

圖片畫廊&放大

baguetteBox.js響應式畫廊插件(純JS)
http://www.cnblogs.com/52fhy/p/4836463.html

圖片懶加載

lazyload.js: http://www.cnblogs.com/52fhy/p/5344182.html
jquery.lazyload.js: http://www.appelsiini.net/projects/lazyload

圖標字體（iconfont）

在作移動端項目中,常常會用到不少小圖標，如首頁、分享、回覆、贊、返回等，這些Icon（圖標）通常都是純色的。

咱們通常有三種方式來展現這些圖標：
一、每一個圖標對應一張圖片，經過設置圖片的大小完成；
二、將全部圖標放在一張圖片上，經過background-position屬性進行偏移；
三、圖標字體解決方案：將圖標作成字體。

優缺點非分析:
一、方案1每一個圖標都會被加載一次，增大服務器壓力；圖片放大會模糊；
二、方案2圖片僅會加載一次，但難點是設置好位移；不方便新增圖標；圖片放大會模糊；
三、方案3是這兩年新起的方案，不考慮舊瀏覽器的狀況下，能夠解決上述全部缺點：圖標矢量化，不會模糊；在一個字體文件內，不會屢次請求；能夠方便的添加新的圖標。

想深刻了解的同窗能夠看下面資源：

圖標字體化淺談
http://www.cnblogs.com/52fhy/p/5296545.html

圖標字體資源彙總

iconfont可在線編輯，可導入導出
https://icomoon.io/app/#/select

阿里icon font字庫：圖標不少
http://www.iconfont.cn/

阿里媽媽M2UX的一個icon font字體圖標字庫
http://fontello.com/

Font Awesome, 爲 Bootstrap 而創造的圖標字體
http://www.bootcss.com/p/font-awesome/

自動化集成

grunt

使用grunt合併壓縮js、css文件 :
http://www.cnblogs.com/52fhy/p/4954107.html

gulp

gulp.js - 基於流的自動化構建工具
http://www.gulpjs.com.cn/

一點 | gulp詳細入門教程
http://www.ydcss.com/archives/18

其它

手機拍照和上傳圖片

<input type="file">的accept 屬性

<!-- 選擇照片 --> <input type="file" capture="camera" accept="image/*" name="image" id="file"> <!-- 選擇視頻 --> <input type="file" accept="video/*">

使用總結：
加了capture屬性後h5有拍照功能

ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認外觀醜陋

去除瀏覽器按鈕默認樣式

發如今安卓和電腦上正常的按鈕到蘋果手機上不正常了，後來發現是瀏覽器有默認樣式。禁止就好了。

input {     -webkit-appearance: none; }

隱藏滾動條

能夠不顯示滾動條但頁面依舊能夠滾動。僅webkit內核瀏覽器中有效(Chrome,Safari)。嫌滾動條很差看的同窗能夠試試。

::-webkit-scrollbar{     width: 0px }

字體單位font-size選擇px仍是rem

px: 這個是絕對大小，咱們通常使用px來設置咱們的文本，由於他比較穩定和精確。

em: 相對大小，相對於父元素的值，計算公式：須要轉換的像素值 / 父元素的font-size = em值

rem: 相對大小，W3C官網描述是font size of the root element，即rem是相對於根元素。

對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可。
對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備。

詳細請閱讀：
CSS3中REM使用詳解
http://www.w3cways.com/1713.html

jQuery on()方法代替live()方法動態綁定事件

從 jQuery 1.7 開始，再也不建議使用 .live() 方法。請使用 .on()代替來添加事件處理。使用舊版本的用戶，應該優先使用 .delegate() 來替代 .live()。

手冊裏說建議使用 .on()代替.live() 方法，可是沒有給出例子。

以前項目中用.on()來測試結果發現，竟然動態生成的標籤點擊了沒反應，而.live() 方法卻可以支持。後來才發現，jQuery 使用.on()綁定動態生成的元素時，不能直接用該對象操做，而是選擇其非動態生成的父節點而後再找到自己才能達到效果。例如：

$("p").live("click", function(){     $(this).after("<p>Another paragraph!</p>"); });

這裏的p標籤是動態生成的，直接使用.on()是沒辦法觸發.click事件的。但這樣是能夠的：

$(document).on("click",'p', function(){     $(this).after("<p>Another paragraph!</p>"); });

選擇父節點document再找到動態生成的p標籤。

動態引入js文件

var oHead = document.getElementsByTagName('head')[0];  var oScript= document.createElement("script");  oScript.type = "text/javascript";  oScript.src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js";  oHead.appendChild(oScript);

動態建立meta屬性

var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'initialwidth=device-width,initial-scale=1'); document.getElementsByTagName('head')[0].appendChild(meta);

CSS設置文字省略隱藏

.ellipsis_txt {     display: -webkit-box;     -webkit-line-clamp: 2;     overflow: hidden;     word-break: break-all;     text-overflow: ellipsis;     -webkit-box-orient: vertical; }

-webkit-line-clamp: 2;表示最多顯示2行文字。

另一種，默認顯示一行：

.ellipsis{     overflow: hidden;     text-overflow: ellipsis;     display: inline-block;     width: 95%; }

必須是塊級元素，必須指定寬度。

元素float後，父元素沒有高度問題

在CSS裏定義瞭如CLASS類這樣的浮動後，你會發現父div名box沒有高度，因此又時候你可能感受到父div的margin沒有效果，這種狀況下，你只須要給父div加個overflow:hidden就能夠了，譬如

.box{overflow:hidden}

fixed定位與虛擬鍵盤衝突問題

移動端裏輸入框input獲取焦點得時，虛擬鍵盤會把fixed元素頂上去。

使用媒體查詢解決：

@media (max-height: 400px) {    .footer {     display: none;   } }

div之間的空隙？

當兩個div緊挨着的時候沒有空隙，中間有空格或換行就有了空隙，這是爲何？

使用 display: inline-block 會致使元素之間有空隙
解決方法：父元素設置 font-size: 0;

微信不支持支付寶方法

使用iframe。在alipay_submit.class.php文件中增長一個方法：

/** * 使用iframe嵌入支付寶支付 * @date: 2016年2月17日 下午12:50:05 * @author: YJC */ function buildRequestUrl($para_temp, $method, $button_name) {     //待請求參數數組     $para = $this->buildRequestParaToString($para_temp);     $url = $this->alipay_gateway_new. $para;      $sHtml = '<head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/> </head>';     $sHtml .= '<iframe src="'.$url.'" width="100%" height="100%" frameborder="0"></iframe>';     return $sHtml; }

注意這裏的$this->alipay_gateway_new是http://wappaygw.alipay.com/service/rest.htm。

而後調用時將默認的buildRequestForm改成buildRequestUrl方法便可。
可是有個問題，咱們設置的callback頁面（通常是訂單詳情，顯示支付成功與否的頁面），這時候也在iframe裏面，咱們須要跳出。方法是：
在callback頁面增長一段js代碼;

if(top.location!=self.location)top.location=self.location;

就能夠了。

持續更新中。。。

做者：飛鴻影~

出處：http://52fhy.cnblogs.com/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

移動h5開發資源整理

移動h5開發資源整理

基礎知識

h5頁面基本組成

meta viewport模板

有用的js類庫

jQuery

Zepto

underscore

backbone

KISSY

前端UI框架

js插件

彈出層

表單驗證

幻燈片

編輯器

聯想輸入(自動補全)

日期選擇

圖片畫廊&放大

圖片懶加載

圖標字體（iconfont）

圖標字體資源彙總

自動化集成

grunt

gulp

其它

手機拍照和上傳圖片

去除瀏覽器按鈕默認樣式

隱藏滾動條

字體單位font-size選擇px仍是rem

jQuery on()方法代替live()方法動態綁定事件

動態引入js文件

動態建立meta屬性

CSS設置文字省略隱藏

元素float後，父元素沒有高度問題

fixed定位與虛擬鍵盤衝突問題

div之間的空隙？

微信不支持支付寶方法