如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
首先在wxml中定義image
注意其中的animation屬性，image就由它來實現動畫。
而{{animation}}我們在js的data中定義
data: {
animation: \'\'
},
相關代碼
var _animation;
var _animationIndex
const _ANIMATION_TIME = 500;
pages {
...
onShow: function () {
_animation =wx.createAnimation({
duration:_ANIMATION_TIME,
timingFunction: \'linear\',//linear,ease,ease-in,ease-in-out,ease-out,step-start,step-end
delay: 0,
transformOrigin:\'50% 50% 0\'
})
},
/**
* 實現image旋轉動畫，每次旋轉 120*n度
*/
rotateAni: function (n){
_animation.rotate(120* (n)).step()
this.setData({
animation:_animation.export()
})
},
/**
* 開始旋轉
*/
startAnimationInterval:function () {
var that = this;
that.rotateAni(++_loadImagePathIndex); // 進行一次旋轉
_animationIntervalId =setInterval(function () {
that.rotateAni(++_loadImagePathIndex);
}, _ANIMATION_TIME); // 沒間隔_ANIMATION_TIME進行一次旋轉
},
/**
* 停止旋轉
*/
stopAnimationInterval:function () {
if (_animationIntervalId> 0) {
clearInterval(_animationIntervalId);
_animationIntervalId= 0;
}
},
}
微信自帶的Animation可以實現一次動畫，然后可以通過setInterval來達到不斷旋轉的目的，在使用時，控制startAnimationInterval和stopAnimationInterval即可。
微信小程序視頻教程，盡在即速學院。
在使用animation時，會發現有時候出現旋轉速度很快或者反向旋轉再正向旋轉的清空，這都是由于rotate的值設置有問題。
1、rotate的值應該是上一次結束時的值，
2、如果設置了全局變量，記得在oncreate時初始化，不然第二次打開同一頁面會有問題。
注意事項：
這里為什么不直接給_animation.rotate(120 * (n)).step()設置一個足夠大的值，原因有兩點：
1、我們需要便利的控制開始和停止，
2、animation在小程序進入后臺后，會持續運行，占用手機內存和cpu，而小程序依賴于微信，在iphone上會導致微信被終止運行
微信小程序被給予的能量是無窮的，在小程序發展逐漸成熟的當下，小程序開發能實現的需求越來越完善。最近小程序中有一個圖片旋轉的需求，在微信小程序上是可以通過切換多張圖片達到旋轉的效果，但微信小程序自帶的API中帶有這么一個動畫組件，因此小程序制作旋轉動畫可以使用image+Animation來實現。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為 Flex 布局。
.box{ display: flex;}
行內元素也可以使用 Flex 布局。
.box{ display: inline-flex;}
Webkit 內核的瀏覽器display: -webkit-flex;
設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
容器屬性：
flex-direction：（排列方向橫向還是縱向）（默認值）：主軸為水平方向，起點在左端。
row
row-reverse
column
column-reverse
flex-wrap：（如何換行）
nowrap
wrap
wrap-reverse
flex-flow：（flex-direction和flex-wrap簡稱，默認值為）row nowrap
flex-start（默認值）：左對齊
flex-end
center
space-between
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
align-items：（縱向對齊方式）
flex-start：交叉軸的起點對齊。
flex-end
center
baseline
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
align-content：（多根軸線的對齊方式）
flex-start
flex-end
center
space-between
space-around
stretch（默認值）：軸線占滿整個交叉軸。
box屬性：
order：（排列順序）
數值越小，排列越靠前，默認為0。
flex-grow：（剩余空間分配，box放大比例，默認為0，即如果存在剩余空間，也不放大）
flex-shrink：（box縮小比例，默認為1，即如果空間不足，該項目將縮?。?br style="box-sizing:border-box;outline:0px;word-break:break-all;" />
flex-basis：（box占據的寬度或高度）
align-self：（單個box的對齊方式，與其他box對齊方式）
一、什么是BFC
BFC(block formatting context）：簡單來說，BFC 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。
中文常譯為塊級格式化上下文。是 W3C CSS 2.1 規范中的一個概念， 從樣式上看，具有 BFC 的元素與普通的容器沒有什么區別，但是從功能上，具有 BFC 的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器沒有的一些特性,它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。
二、如何觸發 BFC
上面介紹了 BFC 的定義，那么如何觸發 BFC 呢？
滿足下面任一條件的元素，會觸發為 BFC ：
1、浮動元素，float 除 none 以外的值
2、絕對定位元素，position（absolute，fixed）
3、display 為以下其中之一的值 inline-blocks，table-cells，table-captions
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
三、BFC布局與普通文檔流布局區別
普通文檔流布局規則
1.浮動的元素是不會被父級計算高度
2.非浮動元素會覆蓋浮動元素的位置
3.margin會傳遞給父級
4.兩個相鄰元素上下margin會重疊
BFC布局規則
1.浮動的元素會被父級計算高度（父級觸發了BFC）
2.非浮動元素不會覆蓋浮動元素位置（非浮動元素觸發了BFC）
3.margin不會傳遞給父級（父級觸發了BFC）
4.兩個相鄰元素上下margin會重疊（給其中一個元素增加一個父級，然后讓他的父級觸發BFC）
下面來說一下BFC的實際使用場景
場景1：解決子盒子都浮動時 父盒子高度不參與計算問題
<style>
.far {
border: 10px solid pink;
width: 300px;
}
.child {
border: 10px solid yellowgreen;
width:100px;
height: 100px;
float: left;
}
.far{
overflow: hidden;
}
</style>
<body>
<div class="far">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
根據overflow 除了 visible 以外的值（hidden，auto，scroll）就會觸發BFC的原則 計算BFC高度時 ，floatbox也參與其中。
場景2：box垂直方向的距離 會由margin來決定 相鄰兩個盒子之間margin會重疊 ，這就是margin上下間值合并的原因
<style>
p {
color: pink;
background: #fcc;
width: 200px;
height:100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p></p>
<p></p>
</body>
要解決這個問題我們可以在p外面包裹一層容器，并觸發該容器生成一個BFC。那么兩個P便不屬于同一個BFC，就不會發生margin重疊了,解決代碼如下。
<style>
.box {
overflow: hidden;
}
p {
background: green;
width: 200px;
height: 200px;
margin: 100px;
}
</style>
<body>
<p></p>
<div class="box">
<p></p>
</div>
</body>
場景3：實現左側固定右側自適應等類似布局
<style>
.out{
border: 1px solid red;
height: 200px;
}
.left{
width: 200px;
height: 150px;
background-color: green;
float: left;
}
.right{
background-color: pink;
height: 250px;
overflow: hidden;
}
</style>
<body>
<div class="out">
<div class="left"></div>
<div class="right"></div>
</div>
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們都知道，three.js庫里面內置了很多著色器通道對象供我們渲染場景，本文將對EffectComposer、RenderPass、FilmPass這三個通道進行學習和實現：
1.RenderPass這個通道會在當前場景（scene）和攝像機（camera）的基礎上渲染出一個新場景，新建：
2.FilmPass這個通道通過掃描線和失真模擬電視屏幕效果，實現的效果超有時代感，新建：
3.EffectComposer可以理解為著色器通道容器，著色器通道按照先后順序添加進來并執行，新建：
本文實現的demo基于three.js_r86(請自行下載)，代碼所用js文件和圖片都在下載的那個包里面，請讀者自行引用。
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
實現效果：
代碼：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
[html] view plain copy
單選框和復選框在網頁表單中應用十分廣泛，但是瀏覽器默認自帶的單選框和復選框樣式不僅不統一，而且大多都比較簡單丑陋。本文給大家介紹了一些基于CSS3的個性化單選框和復選框，一些選中動畫是基于jQuery的，你可以挑選喜歡的單選框和復選框應用到自己的網頁中去，非常方便。
1、jQuery超級個性化的單線框和復選框
今天要分享的也是一個非常個性化的單選框和復選框插件，顏色你可以自己定義。
2、CSS3漂亮的自定義Checkbox復選框 9款迷人樣式
今天我們來分享一款9款樣式迷人的CSS3漂亮的自定義checkbox復選框。這幾款復選框樣式很豐富，使用起來也比較方便。
3、CSS3自定義美化復選框Checkbox組合
今天我們要來分享一組非常漂亮的CSS3自定義復選框checkbox，每一個checkbox都有其各自的特點。有幾款checkbox在選中的情況下還會出現動畫效果，非常不錯的CSS3自定義美化checkbox組合。
4、jQuery實現美化版的單選框和復選框
今天這款是利用jQuery實現的美化版單選框和復選框，樣式風格非常簡潔清爽，是一款很不錯的jQuery按鈕插件。
5、純CSS3 3D按鈕 按鈕酷似牛奶般剔透
CSS3按鈕一般都可以設計的非常漂亮，利用投影、漸變等CSS3屬性可以把按鈕渲染的十分動感。今天分享的這款CSS3按鈕外觀非常特別，它看上去酷似晶瑩剔透的牛奶，而且在點擊按鈕時出現3D效果的動畫，按鈕按下時，按鈕會輕輕的彈動一下，非常逼真。
6、HTML5/CSS3開關按鈕 立體3D按鈕
今天介紹的這款HTML5/CSS3開關切換按鈕是利用純CSS3的，代碼非常簡單，3D效果也還可以。
7、CSS3自定義發光Radiobox單選框
今天我們要來分享一款CSS3實現的自定義發光radiobox單選框插件，該radiobox選中時也有滑塊的動畫。
8、CSS3實現自定義Checkbox動畫
今天我們要再來分享一款CSS3自定義checkbox，而且這款checkbox還帶有動畫效果，當你選中checkbox的時候，會以動畫的方式打上一個大大的勾。
以上就是8個非常個性化的CSS3單/復選框，希望對你有所幫助。
本文鏈接：http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
include指令標記用于把JSP文件，HTML網文文件等文件靜態嵌入當前JSP網頁中，語法如下:
靜態嵌入就是“先包含后處理”在編譯階段完成對文件嵌入，即先將當前JSP頁面與被嵌入文件合并成一個新的JSP頁面
eg：
動態嵌入就是“先處理后包含”在運行階段完成對文件嵌入，即在把JSP頁面轉譯為JAVA文件時，并不合并兩個頁面。
eg：
運行結果：
總結：靜態嵌入中嵌入頁面與原頁面合并了，動態嵌入則還沒有。
動態嵌入與靜態嵌入相比較，動態嵌入執行速度稍慢，但是靈活性較高。
一.include指令標記
[html] view plain copy
[html] view plain copy
運行結果如下：
[html] view plain copy
二.include動作標記：
動作標記是將JSP等文件動態嵌入當前JSP網頁中，語法如下：
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
收集了一些比較常用的JavaScript函數。
1、字符串長度截取函數
function cutstr(str,len){
var temp,icount = 0,patrn = /[^x00-\xff]/,strre=" ";
for(var i= 0;i<str.length;i++) {
if (icount<len-1){
temp =str.substr(i,1);
if (patrn.exec(temp)==null){
icount =icount+1
}else {
icount =icount+2
}
strre+=temp
} else {
break;
}
}
returen strre+"...";
}
2、替換全部
String.prototype.replaceAll = function(s1,s2) {
return this.replace(new RegExp(s1,"gm"),s2);
}
3、清除空格
function trim = function() {
var reExtraSpace = /^\s*(.*?)\s+$/;
return this.replace(reExtraSpace,"$1");
}
4、清除左空格/右空格
function ltrim(s){
return s.replace(/^(\s*| *)/,"");
}
function rtrim(s) {
return s.replace(/(\s*| *)$/,"");
}
5、判斷是否以某個字符串開頭
String.prototype.startWith = function(s) {
return this.indexOf(s)==0;
}
6、判斷是否以某個字符串結束
String.prototype.endWith = function(s) {
var d = this.length - s.length;
return (d >= 0 && this.lastIndexOf(s)==d);
}
7、轉義HTML標簽
function HtmlEncode(text) {
return text.replace(/&/g,'&').replace(/\"/g,' " ').replace(/</g,'<').replace(/>/g,'>');
}
8、時間日期格式轉換
Date.prototype.Format = function(formatStr){
var str = formatStr;
var week =['日','一','二','三','四','五','六']；
str = str.replace(/yyyy|YYYY/,this.getFullYear());
str = str.replace(/yy|YY,(this.getYear()%100)>9?(this.getYear()%100).toString():'0'+(this.getYear()%100));
str = str.replace(/MM/,(this.getMonth()+1)>9?(this.getMonth()+1).toString():'0'+this.getMonth()+1));
str = str.replace(/w|W/g,week[(this.getDay()];
str = str.replace(/dd|DD/,(this.getDate()>9?this.getDate().toString():'0'+this.getDate());
str = str.replace(/d|D/g,this.getDate());
str = str.replace(/hh|HH/,this.getHours()>9?(this.getHours().toString():'0'+this.getHours());
str = str.replace(/h|H/g,this.getHours());
str = str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0'+this.getMinutes());
str = str.replace(/m/g,this.getMinutes());
str = str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0'+this.getgetSeconds());
str = str.replace(/s|S/g,this.getSeconds());
return str;
}
9、判斷是否為數字類型
function isDigit (value){
var patrn = /^[0-9]*$/;
if (patrn.exec(value) == null || value=="" ) {
return false;
} else {
return true;
}
}
10、設置cookie
function setCookie(name,value,Hours){
var d =new Date();
var offset =8;
var utc = d.getTime()+(d.getTimezoneOffset()*60000);
var nd = utc+(3600000*offset);
var exp = new Date(nd);
exp.setTime(exp.getTime()+Hours*60*60*1000);
document.cookie = name+"="+escape(value)+";domain=360doc.com;"
}
獲取cookie值
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if (arr!=null){
return unescape(arr[2]);
}else {
return null;
}
}
11、加入收藏夾
function AddFavorite(sURL,sTitle) {
try{
window.external.addFavorite(sURL,sTitle);
}catch(e){
try{
window.sidebar.addPanel(sTitle,sURL,"");
}catch(e){
alert("加入收藏夾失敗，請使用Ctrl+D進行添加");
}
}
}
12、設為首頁
function setHomepage(){
if(document.all){
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://w3cboy.com')
}else if (window.sidebar){
if(window.netscape){
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
}catch(e){
alert("該操作被瀏覽器拒絕，如果想啟用該功能，請在地址欄內輸入about:config，然后將
項 signed.applets.codebase_principal_support 值該為true");
}
}
var prefs = Components.classes['@mozilla.org/preferences- service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage', 'http://w3cboy.com');
}
}
13、加載樣式文件
function LoadStyle(url) {
try {
document.createStyleSheet(url);
}
catch(e) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink);
}
}
14、返回腳本內容
function evalscript(s) {
if(s.indexOf('<script') == -1) return s;
var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
var arr = [];
while(arr = p.exec(s)) {
var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1) {
appendscript(arr1[1], '', arr1[2], arr1[3]);
} else {
p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
}
return s;
}
15、清除腳本內容
function stripscript(s) {
return s.replace(/<script.*?>.*?<\/script>/ig, '');
}
16、動態加載腳本文件
function appendscript(src, text, reload, charset) {
var id = hash(src + text);
if(!reload && in_array(id, evalscripts)) return;
if(reload && $(id)) { $(id).parentNode.removeChild($(id));
}
evalscripts.push(id);
var scriptNode = document.createElement("script");
scriptNode.type = "text/javascript";
scriptNode.id = id;
scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);
try {
if(src) {
scriptNode.src = src;
scriptNode.onloadDone = false;
scriptNode.onload = function () {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
};
scriptNode.onreadystatechange = function () {
if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {
scriptNode.onloadDone = true; JSLOADED[src] = 1;
}
};
} else if(text){
scriptNode.text = text;
}
document.getElementsByTagName('head')[0].appendChild(scriptNode);
} catch(e) {}
}
17、返回按ID檢索的元素對象
function $(id) {
return !id ? null : document.getElementById(id);
}
18、跨瀏覽器綁定事件
function addEventSamp(obj,evt,fn){
if(!oTarget){
return;
} if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}else{
oTarget["on" + sEvtType] = fn;
}
}
19、跨瀏覽器刪除事件
function delEvt(obj,evt,fn){ if(!obj){
return;
} if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(oTarget.attachEvent){
obj.attachEvent("on" + evt,fn);
}else{
obj["on" + evt] = fn;
}
}
20、元素添加on方法
Element.prototype.on = Element.prototype.addEventListener;
NodeList.prototype.on = function (event, fn) {、
[]['forEach'].call(this, function (el) {
el.on(event, fn);
});
return this;
};
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.背景介紹
我們為什么要選擇合適的網頁設計單位
隨著Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。
網頁設計單位是涉及到我們布局的效果，使用不同的單位會對最終的demo，會有影響。
現在都是要求響應式設計，需要適配各種設備，電腦，手機，平板。如果單位不合適，可能在這個設備顯示良好，那個設備就會打亂布局。
所以需要我們選擇合適的單位來進行開發，設計。
2.知識剖析
1、px
px就是pixel的縮寫，意為像素。px就是設備或者圖片最小的一個點，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。
是我們網頁設計常用的單位，也是基本單位。通過px可以設置固定的布局或者元素大小，缺點是沒有彈性。
特點是1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。
2、em
參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
特點是1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。
3、rem
rem是相對于根元素html，這樣就意味著，我們只需要在根元素確定一個參考值，可以設計HTML為大小為10px，到時設置1.2rem就是12px.以此類推。
優點是，只需要設置根目錄的大小就可以把整個頁面的成比例的調好。
4、%
一般來說就是相對于父元素的，
1、對于普通定位元素就是我們理解的父元素 2、對于position: absolute;的元素是相對于已定位的父元素 3、對于position: fixed;的元素是相對于ViewPort（可視窗口），
5、vw
css3新單位，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那10vw就是120px
舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
6、vh
css3新單位，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那10vh就是120px
舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。
7、vm
css3新單位，相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm 舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。
兼容性太差 ，現在基本上沒人用，我試了一下Chrome就用不了。
3.常見問題
假如使用em來設置文字大小要注意什么？
4.解決方案
注意父元素的字體大小，因為em是根據父元素的大小來設置的。比如同樣是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.
特別是在多重div嵌套里面更要注意。
5.擴展思考
css還有哪些長度單位？
in:寸
cm:厘米
mm:毫米
t:point，大約1/72寸
pc:pica，大約6pt，1/6寸
6.更多問題
1.pc pt ch一般用在什么場景?
這些我們網頁設計基本上用不到，在排版上會有用處。
2.如何使 1rem=10px
在設置HTML{font-size：62.5%；}即可
3.如果父元素沒有指定高度，那么子元素的百分比的高度是多少？
會按照子元素的實際高度，設置百分比已經沒有效果了。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
關于UI界面的切圖命名規范，U妹覺得關鍵是在于團隊能夠有一個統一的規則，所以這里只介紹一種通用的命名規則，當然大家也可以根據自己的實際情況去制定，這里只提供一種方法與思路，僅供參考。
規范的命名方式可以提高開發人員的的開發效率和整個開發團隊的友好合作。U妹覺得要盡可能用最少的字符而又能完整的表達標識符的含義。
一、切圖命名英文縮寫的3個原則
1.較短的單詞可以通過去掉“元音”形成縮寫
2.較長的單詞可去單詞的頭部幾個字母形成縮寫
3.還有一些約定成俗的英文單詞縮寫
二、命名規則
模塊_類別_功能_狀態.png
U妹舉個例子：nav_button_search_default.png
釋義為：導航_按鈕_搜索_默認.png
啟動界面
啟動圖片 default.png
啟動logo default.png
如：default.png\defoult@2x.png\default-568@2x.png
登錄界面
登錄背景 login_bg.png
登錄logo login_logo.png
輸入框 login_input.png
輸入框選中狀態 login_input_pre.png
登錄按鈕 login_btn.png
登錄按鈕選中狀態 login_btn_pre.png
導航欄按鈕 (nav) 命名
nav_功能描述.png
如：nav_menu.png\nav_menu_pre.png（同按鈕選中前后兩種狀態命名 ）
按鈕命名（btn可重復使用按鈕)
一般 normal btn_xxx_normal.png
點擊 highlight btn_xxx_highlight.png
不能點擊 disabled btn_xxx_disable.png
按下 pressed btn_xxx_pressed.png
選中 selected btn_xxx_selected.png 做為復數選擇出現機會不高
btn_功能屬性或色彩均可.png
如：btn_blue.png\btn_blue.9.png 藍色按鈕
其他命名
圖標 icon_xxx.png
圖片 pic_xxx.png或是img_xxx.png
照片 pho_xxx.png
左側導航 命名 leftbar_功能描述.png
如：leftbar_info.png\leftbar_info_pre.png 個人中心
底部選項卡按鈕（TabBar）
命名 Tab_功能描述.png
如：tab_set.Png\nav_set_pre.png 設置
主頁命名
命名 home_功能屬性＋描述.png
如：home_menu_recommended.png 熱門推薦
ps：描述可用英文或拼間開頭字母組合等
列表頁命名規則
命名 List_功能屬性＋描述.png
如：list_menu_collect.png 列表頁收藏按鈕
UI文件命名規范常用詞
常用狀態
正常 normat
按下 pressed
選中 selected
禁用 disabled
已訪問 visited
懸停 hover
控件＆部件
控件：較獨立的可操作界面元素
部件：描述屬于某控件一部分
按鈕（可點） Btn
圖標 Icon不可點、非點擊主體、圖案部件
標記 Sign 列表
List 菜單 Menu
視圖 View
面板 Panel
薄板 Sheet
底部彈出菜單 欄 Bar
狀態欄 StatusBar
導航欄 NaviBar
標簽欄 TabBar
工具欄 ToolBar
切換開關 Switch
滑動器 Slider
單選框 Radio
復選框 CheckBox
背景 Bg
蒙版、遮罩 Mask
收藏 collect
評論 comment
廣告 ad
時間 time
音頻 audio
視頻 viedio
不喜歡 dilike
用戶 user
首頁 hone
排名 ranked
搜索 search
標志 logo
進度條 progress bar
默認圖片 def_
分隔圖片 seg_
選擇 sel_
關閉 close
返回 back
編輯 eidt
內容 content
左 中 右 left center right
提示信息 msg
個人資料 porfile
彈出 pop
刪除 delete
下載 download
登錄 login
注冊 regsiter
標題title
注釋 note
鏈接 link
圖片 image（img)
刷新 refresh
常用補充描述
頂部 Top
中間 Middle
底部 Bottom
第一 First
第二 Second
最后 Last
頁頭 Header
頁腳 Footer
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
出于安全考慮，瀏覽器有一個同源策略。瀏覽器中，異步請求的地址與目標地址的協議、域名和端口號三者與當前有不同，就屬于跨域請求。
限制跨域訪問是瀏覽器的一個安全策略，因為如果沒有這個策略，那么就有被跨站攻擊的危險。比如，攻擊者在自己的網站A放置一個表單，這個表單發起DELETE請求，刪除某個用戶在B網站上的個人資料。如果沒有同源策略保護，那么在同一個瀏覽器內，如果用戶已經登錄了B網站，這個刪除的請求就會被接受，導致在用戶不知情的情況下自己在B網站中的資料被刪除。
瀏覽器的同源策略提升了安全性，但是給需要在不同域名下開發的開發者帶來了跨域問題。
解決跨域的問題主要有：
jsonp和cors。jsonp是利用 script 標簽可以跨域加載的特性而創造出來的一種非正式的跨域解決方案。在實際開發中，推薦使用cors，即在服務端返回時加入允許跨域的請求頭，允許指定域名的跨域訪問。
千萬要小心！這種直接加 * 號的做法是相當危險的，千萬別這么做！
response.addHeader("Access-Control-Allow-Origin", "*");
正確的做法：
/**
* 使用Filter的方式解決跨域問題
*/ public class CorsFilter implements Filter { private static final List<String> ALLOW_ORIGINS = Config.getListString("allowOrigins", ","); private static final String REQUEST_OPTIONS = "OPTIONS"; @Override public void init(FilterConfig filterConfig) throws ServletException {
} @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
String orgHeader = request.getHeader(HttpHeaders.ORIGIN); if (orgHeader != null && ALLOW_ORIGINS.contains(orgHeader)) { // 允許的跨域的域名 response.addHeader("Access-Control-Allow-Origin", orgHeader); // 允許攜帶 cookies 等認證信息 response.addHeader("Access-Control-Allow-Credentials", "true"); // 允許跨域的方法 response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PATCH, PUT, HEAD"); // 允許跨域請求攜帶的請求頭 response.addHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With"); // 返回結果可以用于緩存的最長時間，單位是秒。-1表示禁用 response.addHeader("Access-Control-Max-Age", "3600"); // 跨域預檢請求，直接返回 if (REQUEST_OPTIONS.equalsIgnoreCase(request.getMethod())) { return;
}
}
filterChain.doFilter(request, response);
} @Override public void destroy() {
}
}
<filter> <filter-name>corsfilter</filter-name> <filter-class>com.bj58.crm.plus.filter.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>corsfilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> </filter-mapping>
http-util.js
let axios = require("axios"); let qs = require("qs");
axios.defaults.withCredentials = true;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; function post(url, param) { return axios.post(url, qs.stringify(param))
} function get(url, param) { axios.get(url, {params: param})
}
export default {
get,
post
};藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn