在現在的App當中,我們經常需要在原生界面中插入HTML5頁面,需要在兩者之間交互,也就是原生代碼和HTML5互調方法,一起來了解一下如何實現的吧!
1.原生代碼調用HTML5頁面方法
例如,app要調用HTML5頁面的changeColor(color)的方法,來改變HTML5頁面的顏色
1)HTML5
<script type="text/javascript">
2)Android
wvMain.getSettings().setJavaScriptEnabled(true); //開啟JavaScript支持
---------------分割線---------------
2.HTLM5頁面調用原生方法
例如,點擊HTML5頁面的文字,回調原生代碼中的callAndroidMethod方法
1)HTML5
<a onClick="baobao.callAndroidMethod(100,100,'ccc',true)">CallAndroidMethod</a>
除此之外,
html5代碼不完全整理
html5文件頭
<_meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no”>
<_meta name=”format-detection” content=”telephone=no”>
第二句是給蘋果手機把數字都識別成手機號的功能的禁用代碼,蘋果數字都當成手機號撥打很噁心。
css部分
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點擊時的藍色外邊框和灰色半透明背景*/
}
注意下面這句非常有用,不寫這句代碼蘋果手機下默認的圓角,代碼重置css也無效。
button,input,optgroup,select,textarea {
-webkit-appearance:none; /*去掉webkit默認的表單樣式*/
}
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點擊時的藍色外邊框和灰色半透明背景*/
}
body {
-webkit-text-size-adjust: 100%!important; /*禁止IOS調整字體大小*/
}
打電話,發短信、發郵件
<_a href=”tel:020-10086″>打電話給:020-10086
<_a href=”sms:10086″>發短信給: 10086
<_a href=”mailto:[email protected]”>發送郵件: [email protected]
css省略號:
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
備註:注意css 已經能夠實現多行省略號,但是隻能webkit用所以沒太大意義不說。
css三角形
border-width: 10px 10px 10px 0; //左箭頭
border-color: transparent #fff;
border-style: solid;
width: 0;
盒模型代碼簡寫
盒模型外邊距(margin)、內邊距(padding)和邊框(border)設置上下左右四個方向的邊距是按照順時針方向設置的:上右下左。
拿margin示例:
margin:10px 15px 12px 14px;/*上設置為10px、右設置為15px、下設置為12px、左設置為14px*/
1、如果top、right、bottom、left的值相同,如下面代碼:
margin:10px 10px 10px 10px;
可縮寫為:
margin:10px;
2、如果top和bottom值相同、left和 right的值相同,如下面代碼:
margin:10px 20px 10px 20px;
可縮寫為:
margin:10px 20px;