H5調(diào)用Android和ios原生方法(react)

混合開發(fā)中需要web需要和原生交互方式。

專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)回民免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

原生需要寫方法來讓H5調(diào)用，H5在window中獲取方法。

ios殼中方法全部放在webkit.messageHandlers對象中，前端調(diào)用只需要

Android中調(diào)用方法，直接在window中調(diào)用安卓給的對象

H5調(diào)用原生方法后，原生怎么回調(diào)給H5?

跟原生一樣，H5需要寫好方法，讓原生調(diào)用，這里調(diào)用就是原生直接調(diào)用了H5的方法，當然這個方法是要全局的方法，在window對象中的。

在react中寫原生調(diào)用的方法，需要在調(diào)用的組件中componentDidMount里面添加方法：

原生方法可能多個地方使用，每次都去判斷系統(tǒng)，然后分別調(diào)用不同方法很麻煩，不是前端該有范兒。應(yīng)該在一個文件中統(tǒng)一處理，其他頁面只需要調(diào)用處理好的方法就好。

例如獲取當前設(shè)備號，原生封裝好方法后，統(tǒng)一在一個文件中處理：

這樣在其他頁面就可以直接使用getDeviceId就可以得到得到設(shè)備號，才不管你是哪個系統(tǒng)呢。

android為什么要用h5做界面

H5開發(fā)安卓界面需要注意以下三點：

（上）包括Android設(shè)備多分辨率的問題，Android中構(gòu)建HTML5應(yīng)用程序基礎(chǔ)

（中）包括Android與JS之間的互動，Android處理JS的警告對話框等，Android中的調(diào)試

（下）包括本地儲存在Android中的應(yīng)用，地理位置的應(yīng)用，離線應(yīng)用的構(gòu)建

進入正題

● Android設(shè)備多分辨率的問題

Android瀏覽器默認預覽模式瀏覽 會縮小頁面 WebView中則會以原始大小顯示

Android瀏覽器和WebView默認為mdpi。hdpi相當于mdpi的1.5倍 ldpi相當于0.75倍

三種解決方式：1 viewport屬性 2 CSS控制 3 JS控制

1 viewport屬性放在HTML的meta中

html代碼：

span style="font-size: x-small;" head

titleExmaple/title

meta name=”viewport” content=”width=device-width,user-scalable=no”/

/head/span

meta中viewport的屬性如下：

span style="font-size: x-small;" meta name="viewport"

content="

height = [pixel_value | device-height] ,

width = [pixel_value | device-width ] ,

initial-scale = float_value ,

minimum-scale = float_value ,

maximum-scale = float_value ,

user-scalable = [yes | no] ,

target-densitydpi = [dpi_value | device-dpi |

high-dpi | medium-dpi | low-dpi]

"

/

/span

2 CSS控制設(shè)備密度

為每種密度創(chuàng)建獨立的樣式表（注意其中的webkit-device-pixel-ratio 3個數(shù)值對應(yīng)3種分辨率）

html代碼：

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /

3 JS控制

Android瀏覽器和WebView支持查詢當前設(shè)別密度的DOM特性

window.devicePixelRatio 同樣值有3個（0.75,1,1.5對應(yīng)3種分辨率）

JS中查詢設(shè)備密度的方法

js代碼：

if (window.devicePixelRatio == 1.5) {

alert("This is a high-density screen");

} else if (window.devicePixelRation == 0.75) {

alert("This is a low-density screen");

}

Android中構(gòu)建HTML5應(yīng)用

使用WebView控件 與其他控件的使用方法相同 在layout中使用一個WebView標簽

WebView不包括導航欄，地址欄等完整瀏覽器功能，只用于顯示一個網(wǎng)頁。

android嵌入h5，怎么交互

Android和H5之間的交互

hybrid App開發(fā)也不是什么新鮮事了，其中native和h5之間的交互則是必不可少的。Android中是如何和H5交互的？

1、webView加載頁面

我們都知道在Android中是通過webView來加載html頁面的，根據(jù)HTML文件所在的位置不同寫法也不同：

//例如：加載assets文件夾下的test.html頁面

mWebView.loadUrl("")

//例如：加載網(wǎng)頁

mWebView.loadUrl("")

如果只是這樣調(diào)用mWebView.loadUrl()加載的話,那么當你點擊頁面中的鏈接時，頁面將會在你手機默認的瀏覽器上打開。那如果想要頁面在App內(nèi)中打開的話，那么就得設(shè)置setWebViewClient：

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

mWebView.loadUrl(url);

return true;

}

}

});

2、Android本地通過Java調(diào)用HTML頁面中的JavaScript方法

想要調(diào)用js方法那么就必須讓webView支持

WebSettings webSettings = mWebView.getSettings();

//設(shè)置為可調(diào)用js方法

webSettings.setJavaScriptEnabled(true);

若調(diào)用的js方法沒有返回值，則直接可以調(diào)用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法；若有返回值時我們可以調(diào)用mWebView.evaluateJavascript()方法：

mWebView.evaluateJavascript("sum(1,2)", new ValueCallbackString() {

@Override

public void onReceiveValue(String value) {

Log.e(TAG, "onReceiveValue value=" + value);

}

});

js代碼如下：

script type="text/javascript"

function sum(a,b){

return a+b;

}

function do(){

document.getElementById("p").innerHTML="hello world";

}

/script

2、js調(diào)用Android本地Java方法

在Android4.2以上可以直接使用@JavascriptInterface注解來聲明，下面是在一個本地Java方法

public class JsInteration {

@JavascriptInterface

public String back() {

return "hello world";

}

}

定義完這個方法后再調(diào)用mWebView.addJavascriptInterface()方法：

mWebView.addJavascriptInterface(new JsInteration(), "android");

那么在js中怎么來調(diào)用呢？

script type="text/javascript"

function s(){

//調(diào)用Java的back()方法

var result =window.android.back();

document.getElementById("p").innerHTML=result;

}

/script

4、攔截HTML頁面中的點擊事件

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

//判斷url攔截事件

if (url.equals("")) {

Log.e(TAG, "shouldOverrideUrlLoading: " + url);

startActivity(new Intent(MainActivity.this,Main2Activity.class));

return true;

} else {

mWebView.loadUrl(url);

return false;

}

}

});

以上就是Java調(diào)用js方法以及js調(diào)用Java方法的實現(xiàn)交互方式中的一種。下面給出完整代碼：

mainActivity

public class MainActivity extends AppCompatActivity {

public static final String TAG = "MainActivity";

private WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webView);

mWebView.loadUrl("");

WebSettings webSettings = mWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

mWebView.addJavascriptInterface(new JsInteration(), "android");

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

if (url.equals("")) {

Log.e(TAG, "shouldOverrideUrlLoading: " + url);

startActivity(new Intent(MainActivity.this,Main2Activity.class));

return true;

} else {

mWebView.loadUrl(url);

return false;

}

}

});

}

//Android調(diào)用有返回值js方法

@TargetApi(Build.VERSION_CODES.KITKAT)

public void onClick(View v) {

mWebView.evaluateJavascript("sum(1,2)", new ValueCallbackString() {

@Override

public void onReceiveValue(String value) {

Log.e(TAG, "onReceiveValue value=" + value);

}

});

}

public class JsInteration {

@JavascriptInterface

public String back() {

return "hello world";

}

}

}

test.html

!DOCTYPE html

html

head

title/title

script type="text/javascript"

function sum(a,b){

return a+b;

}

function s(){

var result =window.android.back();

document.getElementById("p").innerHTML=result;

}

/script

/head

body

button onclick="s()"調(diào)用本地方法/button

a href=""點擊/a

p id="p"/p

/body

/html

android 打包H5（親測有效-AgentWeb）

android 打包H5

樓主是一名前端開發(fā)攻城獅，應(yīng)公司要求在原有H5網(wǎng)站的基礎(chǔ)上開發(fā)一版APP，又不想招人，只能讓樓主攻克難關(guān)了，經(jīng)過度娘一番搜索，找到一款適合使用的插件 AgentWeb，使用方法非常簡單，下面就一步一步操作：

第一步

使用android studio 創(chuàng)建一個android應(yīng)用程序 ：

IDE左上角 File-New-New Project:

第二步 引入

打開項目下app — build.gradle ,添加

implementation ‘com.just.agentweb:agentweb:4.0.2’

implementation ‘com.just.agentweb:download:4.0.2’

implementation ‘com.just.agentweb:filechooser:4.0.2’

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'com.android.support:appcompat-v7:28.0.0'

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.2'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

implementation 'com.just.agentweb:agentweb:4.0.2'

implementation 'com.just.agentweb:download:4.0.2'

implementation 'com.just.agentweb:filechooser:4.0.2'

}

第三步

打開 app===src=== main === java ===MainActivity文件：

package com.easefiel.myapplication;

import android.app.Activity;

import android.os.Bundle;

import android.view.Window;

import android.widget.LinearLayout;

import com.just.agentweb.AgentWeb;

public class MainActivity extends Activity {

private LinearLayout mldzChufanginfoWeblayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

? ? super.onCreate(savedInstanceState);

? ? requestWindowFeature(Window.FEATURE_NO_TITLE);

? ? setContentView(R.layout.activity_main);

? ? mldzChufanginfoWeblayout=(LinearLayout)findViewById(R.id.mldz_chufanginfo_weblayout) ;

? ? AgentWeb mAgentWeb = AgentWeb.with(this)//傳入Activity

? ? ? ? ? ? .setAgentWebParent(mldzChufanginfoWeblayout, new LinearLayout.LayoutParams(-1, -1))//傳入AgentWeb 的父控件 ，如果父控件為 RelativeLayout ， 那么第二參數(shù)需要傳入 RelativeLayout.LayoutParams

? ? ? ? ? ? .useDefaultIndicator()// 使用默認進度條

? ? ? ? ? ? .createAgentWeb()//

? ? ? ? ? ? .ready()

? ? ? ? ? ? .go("");

}

}

有爆紅哦，不要著急，我們一步一步來操作。

第四步

打開 app===src=== main = res=layout文件：

創(chuàng)建xml文件 文件名自定義：

接下來添加內(nèi)容：

?xml version="1.0" encoding="utf-8"?

LinearLayout xmlns:android=""

xmlns:app=""

xmlns:tools=""

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.easefiel.myapplication.MainActivity"

LinearLayout

? ? android:orientation="vertical"

? ? android:id="@+id/mldz_chufanginfo_weblayout"

? ? android:layout_width="match_parent"

? ? android:layout_height="match_parent"/LinearLayout

/LinearLayout

要特別注意一點 android:id 的值一定要和MainActivity 中的ID一致，不然會報錯；

第五步

配置 AndroidManifest.xml 文件：

首先添加權(quán)限：

uses-permission android:name="android.permission.INTERNET" /

uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /

uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /

uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /

uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /

uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /

uses-permission android:name="android.permission.READ_PHONE_STATE" /

uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /

uses-permission android:name="android.permission.CAMERA" /

uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" /

可以根據(jù)自己的功能，添加對應(yīng)的權(quán)限；

第六步

更改應(yīng)用名稱、LOGO、啟動頁

應(yīng)用名稱

還是在AndroidManifest.xml 文件下，找到：

application

? ? android:allowBackup="true"

? ? android:icon="@mipmap/ic_launcher"http://應(yīng)用圖標

? ? android:label="@string/app_name" //應(yīng)用名稱

? ? android:roundIcon="@mipmap/ic_launcher_round"http://啟動頁

? ? android:supportsRtl="true"

? ? android:theme="@style/AppTheme"

? ? activity android:name=".MainActivity"

? ? ? ? intent-filter

? ? ? ? ? ? action android:name="android.intent.action.MAIN" /

? ? ? ? ? ? category android:name="android.intent.category.LAUNCHER" /

? ? ? ? /intent-filter

? ? /activity

/application

本文題目：h5android,h5android不能上傳多張圖片
文章出自：http://chinadenli.net/article48/dsisdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、動態(tài)網(wǎng)站、外貿(mào)建站、商城網(wǎng)站、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)