092018-3

html 如何引入一個公共的頭部和底部

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

摘要： LINK[rel=import]其實有點類似于IFRAME，它引用的對象也是一個完整的文檔，而不是文檔片段，而且里面的SCRIPT也會執(zhí)行，對跨域的資源訪問同樣有同源策略的限制

html 靜態(tài)頁面中引用外部頁面沒那么方便，主要方法有：

asp語言和PHP語言

首先制作一個頭部文件head.asp，或者一個底部文件foot.asp。如主頁是index.asp，調(diào)用頭部代碼是在index.asp文件代碼的開始位置（第一個標記后面，

標記前面）增加如下代碼：

<!– #include file=”head.asp” –>

如果是PHP文件，文件名改為 head.php即可

 使用框架來實現(xiàn)

<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%"></iframe>

以前人們常常使用靜態(tài)frame框架來做首尾(一般不是iframe)。現(xiàn)在越來越少見了。主要因為設(shè)計網(wǎng)頁相對比較困難，而且還增加了連接數(shù),占用線程較多，速度慢，而且也不利于搜索引擎的對頭尾的收錄

 使用.js腳本來實現(xiàn)

建立一個head.js的文件，找一個html轉(zhuǎn)js的網(wǎng)站，然后把你頭部的html代碼轉(zhuǎn)化成js代碼，并放在head.js文件里面。然后在需要調(diào)用head文件代碼的地方添加

<script language="javascript" type="text/javascript" src="js/head.js"></script>

這個地方src="js/head.js"的路徑是你head.js文件的路徑

html轉(zhuǎn)換為JS:

document.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"); document.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">"); document.writeln("<head>"); document.writeln("<style>"); document.writeln("</style>"); document.writeln("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />"); document.writeln("<title></title>"); document.writeln(" <link href=\'head.css\' rel=\"stylesheet\" type=\"text/css\" />"); document.writeln("</head>"); document.writeln("<body >"); document.writeln(" <div class=\'miaov_head\'>"); document.writeln(" <ul>"); document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>"); document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>"); document.writeln(" </ul>"); document.writeln("</div>"); document.writeln(" "); document.writeln("</body>"); document.writeln("</html>"); document.writeln("");

以后無論在哪個頁面，想調(diào)用該頭部文件，直接插入head.js文件即可

這種方式的優(yōu)點是方便，便于修改。缺點是由于搜索引擎讀不懂javascript文件，頭部文件和尾部文件搜索引擎無法收錄，而且js文件過大會加重訪問者的瀏覽器負擔(dān)，影響訪問速度

 Behavior的download方式

最好能有一種方法，就像asp頁面包含其他頁面時那樣，用一小段包含語句就可以實現(xiàn)，不要將需要包含的內(nèi)容出現(xiàn)在本頁面內(nèi)，而是分割出去到另外一個自己的頁面

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(5215)

092018-3

css 圖片有間隔多個Img標簽之間的間隙

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

今天寫css時發(fā)現(xiàn)，圖片加起來剛好是900px的三張圖片，不能在一個900px寬容器放下，因為圖片之間有間隔，我猜是瀏覽器把兩個img標簽之間的空格當(dāng)成了空白節(jié)點。

在網(wǎng)上找到了幾個不錯的解決方法：

1.多個img標簽寫在一行

<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>

<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>

效果前：

效果后：

2.在img標簽的父級上寫：font-size:0;//這個在解決display：inline-block出現(xiàn)的問題也有幫助

<div style="font-size:0"> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>

效果：

3.使用display：block(img是內(nèi)聯(lián)元素)//要float一下才行

<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/>

效果:

4.使用letter-spacing屬性

<div style="letter-spacing:-800px"> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>

效果:
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(3352)

092018-3

前端性能優(yōu)化 —— 移動端瀏覽器優(yōu)化策略

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

摘要: 前端性能優(yōu)化是一個很寬泛的概念，本書前面的部分也多多少少提到一些前端優(yōu)化方法，這也是我們一直在關(guān)注的一件重要事情。配合各種方式、手段、輔助系統(tǒng)，前端優(yōu)化的最終目的都是提升用戶體驗，改善頁面性能，我們常常竭盡全力進行前端頁面優(yōu)化，但卻忽略了這樣做的效果和意義。先不急于探究前端優(yōu)化具體可以怎樣去做，先看看什么是前端性能，應(yīng)該怎樣去了解和評價前端頁面的性能。

相對于桌面端瀏覽器，移動端Web瀏覽器上有一些較為明顯的特點：設(shè)備屏幕較小、新特性兼容性較好、支持一些較新的HTML5和CSS3特性、需要與Native應(yīng)用交互等。但移動端瀏覽器可用的CPU計算資源和網(wǎng)絡(luò)資源極為有限，因此要做好移動端Web上的優(yōu)化往往需要做更多的事情。

首先，在移動端Web的前端頁面渲染中，桌面瀏覽器端上的優(yōu)化規(guī)則同樣適用，此外針對移動端也要做一些的優(yōu)化來達到更好的效果。需要注意的是，并不是移動端的優(yōu)化原則在桌面瀏覽器端就不適用，而是由于兼容性和差異性的原因，一些優(yōu)化原則在移動端更具代表性。

一、網(wǎng)絡(luò)加載類

1．首屏數(shù)據(jù)請求提前，避免JavaScript文件加載后才請求數(shù)據(jù)

為了進一步提升頁面加載速度，可以考慮將頁面的數(shù)據(jù)請求盡可能提前，避免在JavaScript加載完成后才去請求數(shù)據(jù)。通常數(shù)據(jù)請求是頁面內(nèi)容渲染中關(guān)鍵路徑最長的部分，而且不能并行，所以如果能將數(shù)據(jù)請求提前，可以極大程度上縮短頁面內(nèi)容的渲染完成時間。

2．首屏加載和按需加載，非首屏內(nèi)容滾屏加載，保證首屏內(nèi)容最小化

由于移動端網(wǎng)絡(luò)速度相對較慢，網(wǎng)絡(luò)資源有限，因此為了盡快完成頁面內(nèi)容的加載，需要保證首屏加載資源最小化，非首屏內(nèi)容使用滾動的方式異步加載。一般推薦移動端頁面首屏數(shù)據(jù)展示延時最長不超過3秒。目前中國聯(lián)通3G的網(wǎng)絡(luò)速度為338KB/s（2.71Mb/s），所以推薦首屏所有資源大小不超過1014KB，即大約不超過1MB。

3．模塊化資源并行下載

在移動端資源加載中，盡量保證JavaScript資源并行加載，主要指的是模塊化JavaScript資源的異步加載，例如AMD的異步模塊，使用并行的加載方式能夠縮短多個文件資源的加載時間。

4．inline首屏必備的CSS和JavaScript

通常為了在HTML加載完成時能使瀏覽器中有基本的樣式，需要將頁面渲染時必備的CSS和JavaScript通過<script>或<style>內(nèi)聯(lián)到頁面中，避免頁面HTML載入完成到頁面內(nèi)容展示這段過程中頁面出現(xiàn)空白。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>樣例</title>

<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

<style>

/* 必備的首屏CSS */

html, body{

margin: 0;

padding: 0;

background-color: #ccc;

}

</style>

</head>

<body>

</body>

5．meta dns prefetch設(shè)置DNS預(yù)解析

設(shè)置文件資源的DNS預(yù)解析，讓瀏覽器提前解析獲取靜態(tài)資源的主機IP，避免等到請求時才發(fā)起DNS解析請求。通常在移動端HTML中可以采用如下方式完成。



<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" >

6．資源預(yù)加載

對于移動端首屏加載后可能會被使用的資源，需要在首屏完成加載后盡快進行加載，保證在用戶需要瀏覽時已經(jīng)加載完成，這時候如果再去異步請求就顯得很慢。

7．合理利用MTU策略

通常情況下，我們認為TCP網(wǎng)絡(luò)傳輸?shù)淖畲髠鬏攩卧∕aximum Transmission Unit，MTU）為1500B，即網(wǎng)絡(luò)一個RTT（Round-Trip Time，網(wǎng)絡(luò)請求往返時間）時間內(nèi)可以傳輸?shù)臄?shù)據(jù)量最大為1500字節(jié)。因此，在前后端分離的開發(fā)模式中，盡量保證頁面的HTML內(nèi)容在1KB以內(nèi)，這樣整個HTML的內(nèi)容請求就可以在一個RTT時間內(nèi)請求完成，最大限度地提高HTML載入速度。

二、緩存類

1．合理利用瀏覽器緩存

除了上面說到的使用Cache-Control、Expires、Etag和Last-Modified來設(shè)置HTTP緩存外，在移動端還可以使用localStorage等來保存AJAX返回的數(shù)據(jù)，或者使用localStorage保存CSS或JavaScript靜態(tài)資源內(nèi)容，實現(xiàn)移動端的離線應(yīng)用，盡可能減少網(wǎng)絡(luò)請求，保證靜態(tài)資源內(nèi)容的快速加載。

2．靜態(tài)資源離線方案

對于移動端或Hybrid應(yīng)用，可以設(shè)置離線文件或離線包機制讓靜態(tài)資源請求從本地讀取，加快資源載入速度，并實現(xiàn)離線更新。關(guān)于這塊內(nèi)容，我們會在后面的章節(jié)中重點講解。

3．嘗試使用AMP HTML

AMP HTML可以作為優(yōu)化前端頁面性能的一個解決方案，使用AMP Component中的元素來代替原始的頁面元素進行直接渲染。



<video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster="path/poster.jpg">

<div fallback>

<p>Your browser doesn’t support HTML5 video</p>

</div>

<source type="video/mp4" src="foo.mp4">

<source type="video/webm" src="foo.webm">

</video>



<amp-video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster= "path/poster.jpg">

<div fallback>

<p>Your browser doesn’t support HTML5 video</p>

</div>

<source type="video/mp4" src="foo.mp4">

<source type="video/webm" src="foo.webm">

</amp-video>

三、圖片類

1．圖片壓縮處理

在移動端，通常要保證頁面中一切用到的圖片都是經(jīng)過壓縮優(yōu)化處理的，而不是以原圖的形式直接使用的，因為那樣很消耗流量，而且加載時間更長。

2．使用較小的圖片，合理使用base64內(nèi)嵌圖片

在頁面使用的背景圖片不多且較小的情況下，可以將圖片轉(zhuǎn)化成base64編碼嵌入到HTML頁面或CSS文件中，這樣可以減少頁面的HTTP請求數(shù)。需要注意的是，要保證圖片較小，一般圖片大小超過2KB就不推薦使用base64嵌入顯示了。

.class-name {

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');

}

3．使用更高壓縮比格式的圖片

使用具有較高壓縮比格式的圖片，如webp等。在同等圖片畫質(zhì)的情況下，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸，節(jié)省網(wǎng)絡(luò)流量。

<img src="http://cdn.domain.com/path/photo.webp" alt="webp格式圖片">

4．圖片懶加載

為了保證頁面內(nèi)容的最小化，加速頁面的渲染，盡可能節(jié)省移動端網(wǎng)絡(luò)流量，頁面中的圖片資源推薦使用懶加載實現(xiàn)，在頁面滾動時動態(tài)載入圖片。

<img data-src="http://cdn.domain.com/path/photo.jpg" alt="懶加載圖片">

5．使用Media Query或srcset根據(jù)不同屏幕加載不同大小圖片

在介紹響應(yīng)式的章節(jié)中我們了解到，針對不同的移動端屏幕尺寸和分辨率，輸出不同大小的圖片或背景圖能保證在用戶體驗不降低的前提下節(jié)省網(wǎng)絡(luò)流量，加快部分機型的圖片加載速度，這在移動端非常值得推薦。

6．使用iconfont代替圖片圖標

在頁面中盡可能使用iconfont來代替圖片圖標，這樣做的好處有以下幾個：使用iconfont體積較小，而且是矢量圖，因此縮放時不會失真；可以方便地修改圖片大小尺寸和呈現(xiàn)顏色。但是需要注意的是，iconfont引用不同webfont格式時的兼容性寫法，根據(jù)經(jīng)驗推薦盡量按照以下順序書寫，否則不容易兼容到所有的瀏覽器上。

@font-face {

font-family: iconfont;

src: url("./iconfont.eot");

src: url("./iconfont.eot?#iefix") format("eot"),

url("./iconfont.woff") format("woff"),

url("./iconfont.ttf") format("truetype");

}

7．定義圖片大小限制

加載的單張圖片一般建議不超過30KB，避免大圖片加載時間長而阻塞頁面其他資源的下載，因此推薦在10KB以內(nèi)。如果用戶上傳的圖片過大，建議設(shè)置告警系統(tǒng)，幫助我們觀察了解整個網(wǎng)站的圖片流量情況，做出進一步的改善。

四、腳本類

1．盡量使用id選擇器

選擇頁面DOM元素時盡量使用id選擇器，因為id選擇器速度最快。

2．合理緩存DOM對象

對于需要重復(fù)使用的DOM對象，要優(yōu)先設(shè)置緩存變量，避免每次使用時都要從整個DOM樹中重新查找。

// 不推薦

$('#mod .active').remove('active');

$('#mod .not-active').addClass('active');

// 推薦

let $mod = $('#mod');

$mod.find('.active').remove('active');

$mod.find('.not-active').addClass('active');

3．頁面元素盡量使用事件代理，避免直接事件綁定

使用事件代理可以避免對每個元素都進行綁定，并且可以避免出現(xiàn)內(nèi)存泄露及需要動態(tài)添加元素的事件綁定問題，所以盡量不要直接使用事件綁定。

// 不推薦

$('.btn').on('click', function(e){

console.log(this);

});

// 推薦

$('body').on('click', '.btn', function(e){

console.log(this);

});

4．使用touchstart代替click

由于移動端屏幕的設(shè)計，touchstart事件和click事件觸發(fā)時間之間存在300毫秒的延時，所以在頁面中沒有實現(xiàn)touchmove滾動處理的情況下，可以使用touchstart事件來代替元素的click事件，加快頁面點擊的響應(yīng)速度，提高用戶體驗。但同時我們也要注意頁面重疊元素touch動作的點擊穿透問題。

// 不推薦

$('body').on('click', '.btn', function(e){

console.log(this);

});

// 推薦

$('body').on('touchstart', '.btn', function(e){

console.log(this);

});

5．避免touchmove、scroll連續(xù)事件處理

需要對touchmove、scroll這類可能連續(xù)觸發(fā)回調(diào)的事件設(shè)置事件節(jié)流，例如設(shè)置每隔16ms（60幀的幀間隔為16.7ms，因此可以合理地設(shè)置為16ms）才進行一次事件處理，避免頻繁的事件調(diào)用導(dǎo)致移動端頁面卡頓。

// 不推薦

$('.scroller').on('touchmove', '.btn', function(e){

console.log(this);

});

// 推薦

$('.scroller').on('touchmove', '.btn', function(e){

let self = this;

setTimeout(function(){

console.log(self);

}, 16);

});

6．避免使用eval、with，使用join代替連接符+，推薦使用ECMAScript 6的字符串模板

這些都是一些基礎(chǔ)的安全腳本編寫問題，盡可能使用較率的特性來完成這些操作，避免不規(guī)范或不安全的寫法。

7．盡量使用ECMAScript 6+的特性來編程

ECMAScript 6+一定程度上更加安全，而且部分特性執(zhí)行速度更快，也是未來規(guī)范的需要，所以推薦使用ECMAScript 6+的新特性來完成后面的開發(fā)。

五、渲染類

1．使用Viewport固定屏幕渲染，可以加速頁面渲染內(nèi)容

一般認為，在移動端設(shè)置Viewport可以加速頁面的渲染，同時可以避免縮放導(dǎo)致頁面重排重繪。在移動端固定Viewport設(shè)置的方法如下。



<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2．避免各種形式重排重繪

頁面的重排重繪很耗性能，所以一定要盡可能減少頁面的重排重繪，例如頁面圖片大小變化、元素位置變化等這些情況都會導(dǎo)致重排重繪。

3．使用CSS3動畫，開啟GPU加速

使用CSS3動畫時可以設(shè)置transform: translateZ(0)來開啟移動設(shè)備瀏覽器的GPU圖形處理加速，讓動畫過程更加流暢。

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

4．合理使用Canvas和requestAnimationFrame

選擇Canvas或requestAnimationFrame等更的動畫實現(xiàn)方式，盡量避免使用setTimeout、setInterval等方式來直接處理連續(xù)動畫。

5．SVG代替圖片

部分情況下可以考慮使用SVG代替圖片實現(xiàn)動畫，因為使用SVG格式內(nèi)容更小，而且SVG DOM結(jié)構(gòu)方便調(diào)整。

6．不濫用float

在DOM渲染樹生成后的布局渲染階段，使用float的元素布局計算比較耗性能，所以盡量減少float的使用，推薦使用固定布局或flex-box彈性布局的方式來實現(xiàn)頁面元素布局。

7．不濫用web字體或過多font-size聲明

過多的font-size聲明會增加字體的大小計算，而且也沒有必要的。

六、架構(gòu)協(xié)議類

1．嘗試使用SPDY和HTTP 2

在條件允許的情況下可以考慮使用SPDY協(xié)議來進行文件資源傳輸，利用連接復(fù)用加快傳輸過程，縮短資源加載時間。HTTP 2在未來也是可以考慮嘗試的。

2．使用后端數(shù)據(jù)渲染

使用后端數(shù)據(jù)渲染的方式可以加快頁面內(nèi)容的渲染展示，避免空白頁面的出現(xiàn)，同時可以解決移動端頁面SEO的問題。如果條件允許，后端數(shù)據(jù)渲染是一個很不錯的實踐思路。后面的章節(jié)會詳細介紹后端數(shù)據(jù)渲染的相關(guān)內(nèi)容。

3．使用Native View代替DOM的性能劣勢

可以嘗試使用Native View的MNV開發(fā)模式來避免HTML DOM性能慢的問題，目前使用MNV的開發(fā)模式已經(jīng)可以將頁面內(nèi)容渲染體驗做到接近客戶端Native應(yīng)用的體驗了。

關(guān)于頁面優(yōu)化的常用技術(shù)手段和思路主要包括以上這些，盡管列舉出很多，但仍可能有少數(shù)遺漏，可見前端性能優(yōu)化不是一件簡簡單單的事情，其涉及的內(nèi)容很多。大家可以根據(jù)實際情況將這些方法應(yīng)用到自己的項目當(dāng)中，要想全部做到幾乎是不可能的，但做到用戶可接受的原則還是很容易實現(xiàn)的。

于此同時我們要清楚的是，在我們做到了優(yōu)化的同時也付出了很大的代價，這也是前端優(yōu)化的一個問題。理論上這些優(yōu)化都是可以實現(xiàn)的，但是作為工程師我們也要明白懂得權(quán)衡。優(yōu)化提升了用戶體驗，使數(shù)據(jù)加載更快，但是項目代碼卻可能打亂，異步內(nèi)容要拆分出來，首屏的一個雪碧圖可能要分成兩個，頁面項目代碼維護成本成倍增加，項目結(jié)構(gòu)也可能變得混亂。

所以前期在設(shè)計構(gòu)建、組件的解決方案時要解決好異步的自動處理問題。任何一部分優(yōu)化都可以做得很深入，但不一定都值得，在優(yōu)化的同時也要盡量考慮性價比，這才是我們作為一名前端工程師處理前端優(yōu)化時應(yīng)該具有的正確思維。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(2995)

092018-3

微信小程序知識體系梳理

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

小程序介紹

17年一月9號，小程序剛發(fā)布的時候，個人很幸運的成為第一批吃螃蟹的人，當(dāng)然也是第一批采坑的人。

小程序是基于微信的一種應(yīng)用，使用微信自定義的組件，讓我們使用JavaScript的方式，達到匹配原生應(yīng)用的效果。小程序的一大優(yōu)勢就是，你只要有個微信，你就能搜索你所需要的點餐、買票、旅游等一些日常需求的小程序，而且——用完即毀、無需下載。

小程序開發(fā)所需要的技能

小程序是最適合前端開發(fā)人員，你所需的知識僅僅是JavaScript、css、html的基本知識，如果你有其他單頁面應(yīng)用的開發(fā)經(jīng)驗，那小程序會很快上手，但是這都不是必須的。

小程序的知識體系的梳理

項目整體架構(gòu)

app.js 小程序的啟動js文件。

app.json 小程序的全局json配置文件。同時也可以進行pages配置、底部tab切換的配置等等。

app.wxss 小程序的全局樣式。

pages 小程序的相關(guān)頁面。在app.json中配置了pages，pages文件夾就會自動出現(xiàn)對應(yīng)的頁面。

pages

js 是小程序的邏輯部分。
wxss 小程序的對應(yīng)page的布局，也就是局部樣式。相當(dāng)于web網(wǎng)頁的css。
wxml 頁面布局。相當(dāng)于web網(wǎng)頁的html。
json 小程序的局部頁面配置。

小程序路由

1、push路由
wx.navigateTo({
url:’/pages/index/index’
});

2、替換路由
wx.redirectTo({
url:”/pages/index/index”
});

3、路由回退
wx.navigateBack({
delta: 1
});

4、tab切換
wx.switchTab({
url:’相關(guān)頁面路徑’
});

5、路由清理替換
wx.reLaunch({
url:’新的頁面路徑’
});

小程序路由傳參

wx.navigateTo({
url: “/pages/index/index?id=”+inputValue
});
就會把inputValue的值傳遞過去。在相應(yīng)的界面的onLoad周期函數(shù)的options中接收。

//index.js
onLoad: function(options){
console.log(options.id);
}

小程序界面交互（Toast、Modal）

Toast分三種：sucess、loading、none；
Modal：title、content屬性是必須要的。
modal還有一些其他的屬性，比如確認按鈕的顯示。

小程序page的生命周期

onLoad——初始化加載一次
onReady——頁面初次渲染完成
onShow——監(jiān)聽頁面顯示
onHide——監(jiān)聽頁面隱藏
onUnload——監(jiān)聽頁面卸載

生命周期函數(shù)的本質(zhì)：給開發(fā)人員一個觸發(fā)時機的暴露的接口。在這樣的時機下，我們可以做什么？

小程序如何更改data

vue中：this.message = ‘hello world’;
小程序中：
this.setData({
message: ‘hello world’
})

小程序分享功能

使用onShareAppMessage函數(shù)可以實現(xiàn)分享轉(zhuǎn)發(fā)功能。
onShareAppMessage: function(){
return {
title:’圖吧同行’,
path:’/pages/index/index’,
desc:’描述信息’
}
}

登錄功能

小程序的登錄是一個項目的核心邏輯。分為三步。

第一步：wx.login，獲取code。
第二步：把code發(fā)送給我們的后臺服務(wù)器，得到openId。
第三步：服務(wù)器把openId返回給你。你就知道每次是哪一個用戶登錄了小程序。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(3232)

092018-3

關(guān)于placeholder();

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

搜索框有一些提示信息比如“關(guān)鍵字”之類，不寫吧用戶可能不知道這個搜索框是用來做什么的，寫了吧點擊搜索之后默認就把這些提示信息提交給數(shù)據(jù)處理頁面處理去了，有點麻煩，而且也沒有必要再去數(shù)據(jù)庫查一次這個提示信息。

可以用jquery 的插件 placeholder來解決這個問題，這個插件使用也很簡單，在頁面引入這個插件， <script type="text/javascript" src="<%=basePath %>resources/scripts/jquery/jquery.placeholder.min.js"></script>（本人用的是miniui做的，所以引入的是jquery.placeholder.min.js）。

在html中的輸入框中如此設(shè)置

js代碼：

$(function(){
   $("input").placeholder();

   $("input").keydown(function(event) {
       //alert(event.keyCode);
       if(event.keyCode==13){
           login(); //轉(zhuǎn)到登錄的js方法
       }
   });
});

但是問題來了，firefox，IE下都能實這個效果，chrome和safari點擊后不會消失，得輸入東西之后才會消失。本人在CSS方面菜鳥一只，后來讓公司一位前段的同事去調(diào)試這個，最后在CSS里面加了一段：

input:focus::-webkit-input-placeholder,textarea:focus::

-webkit-input-placeholder{color:transparent;}

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(3133)

022018-3

學(xué)習(xí)解析XML(1）

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

什么是xml, xml有什么作用？

XML 是獨立于軟件和硬件的信息傳輸工具

XML 指可擴展標記語言（EXtensible Markup Language）。

XML 是一種很像HTML的標記語言。

XML 的設(shè)計宗旨是傳輸數(shù)據(jù)，而不是顯示數(shù)據(jù)。

XML 標簽沒有被預(yù)定義。您需要自行定義標簽。

XML 被設(shè)計為具有自我描述性。

XML 是 W3C 的推薦標準。

XML 和 HTML 之間的差異

XML 不是 HTML 的替代。

XML 和 HTML 為不同的目的而設(shè)計：

XML 被設(shè)計用來傳輸和存儲數(shù)據(jù)，其焦點是數(shù)據(jù)的內(nèi)容。

HTML 被設(shè)計用來顯示數(shù)據(jù)，其焦點是數(shù)據(jù)的外觀。

HTML 旨在顯示信息，而 XML 旨在傳輸信息

xml的用途:

XML 把數(shù)據(jù)從 HTML 分離

XML 簡化數(shù)據(jù)共享

XML 簡化數(shù)據(jù)傳輸

XML 簡化平臺變更

XML 使您的數(shù)據(jù)更有用

XML 用于創(chuàng)建新的互聯(lián)網(wǎng)語言

<?xml version="1.0" encoding="UTF-8"?> 聲明

以及根元素子元素以及定義根元素結(jié)尾

如例

聲明

<?xml version="1.0" encoding="UTF-8"?>

根元素

<note>

子元素

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

定義根元素結(jié)尾

命名的規(guī)范

所有的 XML 元素都必須有一個關(guān)閉標簽

XML 標簽對大小寫敏感、

XML 必須正確嵌套

XML 屬性值必須加引號

實體引用

XML 以 LF 存儲換行

在 Windows 應(yīng)用程序中，換行通常以一對字符來存儲：回車符（CR）和換行符（LF）。

在 Unix 和 Mac OSX 中，使用 LF 來存儲新行。

在舊的 Mac 系統(tǒng)中，使用 CR 來存儲新行。

XML 以 LF 存儲換行。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(2708)

首頁

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

一、網(wǎng)絡(luò)加載類

二、緩存類

三、圖片類

四、腳本類

五、渲染類

六、架構(gòu)協(xié)議類

小程序介紹

小程序開發(fā)所需要的技能

小程序的知識體系的梳理

項目整體架構(gòu)

pages

小程序路由

小程序路由傳參

小程序界面交互（Toast、Modal）

小程序page的生命周期

小程序如何更改data

小程序分享功能

登錄功能

XML 和 HTML 之間的差異

XML 把數(shù)據(jù)從 HTML 分離

XML 簡化平臺變更

XML 使您的數(shù)據(jù)更有用

XML 用于創(chuàng)建新的互聯(lián)網(wǎng)語言

所有的 XML 元素都必須有一個關(guān)閉標簽

XML 標簽對大小寫敏感、

XML 必須正確嵌套

XML 屬性值必須加引號

實體引用

XML 以 LF 存儲換行

分類

日歷

鏈接

個人資料

存檔

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

一、網(wǎng)絡(luò)加載類

五、渲染類

六、架構(gòu)協(xié)議類

小程序界面交互（Toast、Modal）

XML 標簽對大小寫敏感、