H5调用Android和ios原生方法(react)

混合开发中需要web需要和原生交互方式。

专注于为中小企业提供网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业回民免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

原生需要写方法来让H5调用，H5在window中获取方法。

ios壳中方法全部放在webkit.messageHandlers对象中，前端调用只需要

Android中调用方法，直接在window中调用安卓给的对象

H5调用原生方法后，原生怎么回调给H5?

跟原生一样，H5需要写好方法，让原生调用，这里调用就是原生直接调用了H5的方法，当然这个方法是要全局的方法，在window对象中的。

在react中写原生调用的方法，需要在调用的组件中componentDidMount里面添加方法：

原生方法可能多个地方使用，每次都去判断系统，然后分别调用不同方法很麻烦，不是前端该有范儿。应该在一个文件中统一处理，其他页面只需要调用处理好的方法就好。

例如获取当前设备号，原生封装好方法后，统一在一个文件中处理：

这样在其他页面就可以直接使用getDeviceId就可以得到得到设备号，才不管你是哪个系统呢。

android为什么要用h5做界面

H5开发安卓界面需要注意以下三点：

（上）包括Android设备多分辨率的问题，Android中构建HTML5应用程序基础

（中）包括Android与JS之间的互动，Android处理JS的警告对话框等，Android中的调试

（下）包括本地储存在Android中的应用，地理位置的应用，离线应用的构建

进入正题

● Android设备多分辨率的问题

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控制设备密度

为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应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支持查询当前设别密度的DOM特性

window.devicePixelRatio 同样值有3个（0.75,1,1.5对应3种分辨率）

JS中查询设备密度的方法

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中构建HTML5应用

使用WebView控件 与其他控件的使用方法相同 在layout中使用一个WebView标签

WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页。

android嵌入h5，怎么交互

Android和H5之间的交互

hybrid App开发也不是什么新鲜事了，其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的？

1、webView加载页面

我们都知道在Android中是通过webView来加载html页面的，根据HTML文件所在的位置不同写法也不同：

//例如：加载assets文件夹下的test.html页面

mWebView.loadUrl("")

//例如：加载网页

mWebView.loadUrl("")

如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时，页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话，那么就得设置setWebViewClient：

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

mWebView.loadUrl(url);

return true;

}

}

});

2、Android本地通过Java调用HTML页面中的JavaScript方法

想要调用js方法那么就必须让webView支持

WebSettings webSettings = mWebView.getSettings();

//设置为可调用js方法

webSettings.setJavaScriptEnabled(true);

若调用的js方法没有返回值，则直接可以调用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法；若有返回值时我们可以调用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调用Android本地Java方法

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

public class JsInteration {

@JavascriptInterface

public String back() {

return "hello world";

}

}

定义完这个方法后再调用mWebView.addJavascriptInterface()方法：

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

那么在js中怎么来调用呢？

script type="text/javascript"

function s(){

//调用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调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码：

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调用有返回值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()"调用本地方法/button

a href=""点击/a

p id="p"/p

/body

/html

android 打包H5（亲测有效-AgentWeb）

android 打包H5

楼主是一名前端开发攻城狮，应公司要求在原有H5网站的基础上开发一版APP，又不想招人，只能让楼主攻克难关了，经过度娘一番搜索，找到一款适合使用的插件 AgentWeb，使用方法非常简单，下面就一步一步操作：

第一步

使用android studio 创建一个android应用程序 ：

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 ， 那么第二参数需要传入 RelativeLayout.LayoutParams

            .useDefaultIndicator()// 使用默认进度条

            .createAgentWeb()//

            .ready()

            .go("");

}

}

有爆红哦，不要着急，我们一步一步来操作。

第四步

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

创建xml文件 文件名自定义：

接下来添加内容：

?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 文件：

首先添加权限：

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" /

可以根据自己的功能，添加对应的权限；

第六步

更改应用名称、LOGO、启动页

应用名称

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

application

    android:allowBackup="true"

    android:icon="@mipmap/ic_launcher"//应用图标

    android:label="@string/app_name" //应用名称

    android:roundIcon="@mipmap/ic_launcher_round"//启动页

    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://kswjz.com/article/dsisdhp.html