扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
混合开发中需要web需要和原生交互方式。
专注于为中小企业提供网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业回民免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
原生需要写方法来让H5调用，H5在window中获取方法。
ios壳中方法全部放在webkit.messageHandlers对象中，前端调用只需要
Android中调用方法，直接在window中调用安卓给的对象
H5调用原生方法后，原生怎么回调给H5?
跟原生一样，H5需要写好方法，让原生调用，这里调用就是原生直接调用了H5的方法，当然这个方法是要全局的方法，在window对象中的。
在react中写原生调用的方法，需要在调用的组件中componentDidMount里面添加方法：
原生方法可能多个地方使用，每次都去判断系统，然后分别调用不同方法很麻烦，不是前端该有范儿。应该在一个文件中统一处理，其他页面只需要调用处理好的方法就好。
例如获取当前设备号，原生封装好方法后，统一在一个文件中处理：
这样在其他页面就可以直接使用getDeviceId就可以得到得到设备号，才不管你是哪个系统呢。
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之间的交互
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
楼主是一名前端开发攻城狮，应公司要求在原有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
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网