乾貨:Android原生代碼與HTML5的交互

編程語言 HTML5 軟件 WebKit 廣州中星 2017-05-23

在現在的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;

乾貨:Android原生代碼與HTML5的交互

相關推薦

推薦中...