JS怎样调用Android本地原生方法

JavaScript021

JS怎样调用Android本地原生方法,第1张

在android中调用本地js文件里的方法并得到返回值其方法如下:

Android中内置了WebKit模块,而该模块的Java层视图类就是WebView,所有需要使用Web浏览器功能的Android都需要创建该视图类对象显示和处理请求的网络资源。目前WebKit支持Http、Https、Ftp和JavaScript请求。下面是在Android中调用JavaScript方法以及如何在js中调用本地方法。

1、在Assets下放一个简单的html文件jstest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd">

<HTML>

<HEAD>

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" />

<META http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<script>

function showMsg(){

alert("hello world!")

}

function showMsgInAndroid(){

myjs.showMsg('hello in android!')

}

</script>

</HEAD>

<BODY>

<span>测试js使用</span>

<button id='btntest' onclick='showMsgInAndroid()'>调用android方法</button>

</BODY>

</HTML>

2、布局文件main.xml

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

<RelativeLayout

android:id="@+id/rl_main"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android"

>

<WebView

android:id="@+id/wv_test"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_above="@+id/btn_showmsg"/>

<Button

android:id="@+id/btn_showmsg"

android:layout_width="200dip"

android:layout_height="40dip"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:text="调用html中js方法"/>

</RelativeLayout>

3、然后是Activity,MainActivity.java

package com.harold.jstest

import com.harold.base.JSKit

import android.app.Activity

import android.os.Bundle

import android.os.Handler

import android.view.View

import android.view.View.OnClickListener

import android.webkit.WebChromeClient

import android.webkit.WebView

import android.widget.Button

public class MainActivity extends Activity {

private WebView mWebView

private Button btnShowInfo

private JSKit js

private Handler mHandler = new Handler()

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState)

setContentView(R.layout.main)

//初始化控件

mWebView = (WebView) findViewById(R.id.wv_test)

btnShowInfo = (Button) findViewById(R.id.btn_showmsg)

//实例化js对象

js = new JSKit(this)

//设置参数

mWebView.getSettings().setBuiltInZoomControls(true)

//内容的渲染需要webviewChromClient去实现,设置webviewChromClient基类,解决js中alert不弹出的问题和其他内容渲染问题

mWebView.setWebChromeClient(new WebChromeClient())

mWebView.getSettings().setJavaScriptEnabled(true)

//把js绑定到全局的myjs上,myjs的作用域是全局的,初始化后可随处使用

mWebView.addJavascriptInterface(js, "myjs")

mWebView.loadUrl("file:///android_asset/jstest.html")

btnShowInfo.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

mHandler.post(new Runnable() {

@Override

public void run() {

//调用 HTML 中的javaScript 函数

mWebView.loadUrl("javascript:showMsg()")

}

})

}

})

}

}

4、最后是绑定全局js的类JSKit.java

package com.harold.base

import android.widget.Toast

import com.harold.jstest.MainActivity

public class JSKit {

private MainActivity ma

public JSKit(MainActivity context) {

this.ma = context

}

public void showMsg(String msg) {

Toast.makeText(ma, msg, Toast.LENGTH_SHORT).show()

}

}

例子比较简单,代码里都加了注释,这里就不多说了,本示例用的本地的html,如果访问网络中的网页,别忘记在AndroidManifest.xml中加权限

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

一、对于Android和ios我们要执行不同的操作,下面是判断系统的js代码

// alert(ismobile(1))1表示Android,0表示ios

function ismobile(test){

var u = navigator.userAgent, app = navigator.appVersion

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){

if(window.location.href.indexOf("?mobile")&lt0){

try{

if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){

return '0'

}else{

return '1'

}

}catch(e){}

}

}else if( u.indexOf('iPad') &gt-1){

return '0'

}else{

return '1'

}

}

二、js调用app端函数,下面是js代码

if(ismobile(1)==1){

Android.setTypeActivity(id,type,href)

}else{

jsToios(id,type,href)

}

setTypeActivity是Android端定义的函数,jsToios是ios端定义的函数,括号里是js端传递的参数。

三、至于js端怎样获取app端的数据,只需在js端提供给app端函数名字,在通知app端调用即可

四、还有一种方法可以不通过app的方法将数据传递给另一个页面,那就是通过URL的方式

在本页面将数据拼接在ip后面

在另外一个页面通过下面方法获取URL后的参数

function GetRequest() {

var url = location.search//获取url中"?"符后的字串

var theRequest = new Object()

if (url.indexOf("?") != -1) {

var str = url.substr(1)

strs = str.split("&")

for(var i = 0i <strs.lengthi ++) {

theRequest[strs[i].split("=")[0]]=decodeURIComponent(strs[i].split("=")[1])

}

}

return theRequest

}

// 获取URL参数

var Request = new Object()

Request = GetRequest()

var name

name = Request['name']

JS调用Android原生方法,参数须是Java的内置类型:int、String等,若是JavaScript对象,需字符串化,否则Android无法正确接收;

JS调用Android原生方法,返回值是内置类型:int、String等,JS能够正确接收。若是Java自定义类型,则JS接收不到正确数据;

JS可以通过Android原生方法的返回值获取内置类型的参数,如String

若需要互传复杂类型的对象,双方须以String对媒介,以各自语言的Json工具类进行相互转化;