项目中需要使用android与js的混编来开发app。

下面就介绍一下吧。

有时候我们需要用js调用native控件,要想实现这个功能,我们需要做的就只有三步:

1.允许webview执行js脚本

2.向js暴露方法

3.访问网页

下面是代码部分:

java:

 package com.bdyx.founder.jsnativedemo;

 import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast; public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.wv);
setWebView();
}
private void setWebView(){
//允许JavaScript执行
webView.getSettings().setJavaScriptEnabled(true);
//向js传递对象
webView.addJavascriptInterface(new ShowToast(),"toastandroid");
//不会node的小伙伴可以保存到assets
//webView.loadUrl("file:///android_asset/index.html");
//访问网页
webView.loadUrl("http://192.168.253.1:8000/");
}
public final class ShowToast {
//Html调用此方法传递数据,注解一定要留着否则会出错
@JavascriptInterface
public void show() {
Toast.makeText(MainActivity.this,"调用",Toast.LENGTH_LONG).show();
}
}
}

html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>weifengzz</title>
<script type="text/javascript">
function showToast() {
window.toastandroid.show();
}
</script>
</head>
<body>
<h1>本例子是点击按钮调用android代码</h1>
<input type="button" name="" value="点击调用" onclick="javascript:showToast()"/> </body>
</html>

其实就是这么简单!

项目已经传到github上了

https://github.com/weifengzz/JSWidthAndroidNative

Android与JS混编(js调用java)的更多相关文章

  1. 解析android framework下利用app_process来调用java写的命令及示例

    解析android framework下利用app_process来调用java写的命令及示例 在android SDK的framework/base/cmds目录下了,有不少目录,这些目的最终都是b ...

  2. 深入了解android平台的jni---本地多线程调用java代码

    一.jni调用java对象     JNI提供的功能之一是在本地代码中使用Java对象.包括:创建一个java类对象和通过函数传递一个java对象.创建一个java类对象,首先需要得到得到使用Find ...

  3. Android JNI之C/C++层调用JAVA

    转载请声明:原文转自:http://www.cnblogs.com/xiezie/p/5930032.html 从C/C++层调用JAVA层代码步骤: 1. 在JAVA类中创建java方法和本地方法 ...

  4. Android与JS混编(js调用android相机)

       参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...

  5. Android与JS混编(js调用android相机扫描二维码)

    参考demo http://www.cnblogs.com/mythou/p/3280023.html        项目源码: https://github.com/weifengzz/Androi ...

  6. Android与JS混编(多图选择器)

       github: https://github.com/weifengzz/AndroidJSSelectImg

  7. [Android] 解析android framework下利用app_process来调用java写的命令及示例

    reference to :http://bbs.9ria.com/thread-253058-1-1.html 在android SDK的framework/base/cmds目录下了,有不少目录, ...

  8. swift与OC混编之调用函数

    在桥接头文件里#import oc的.h文件,整个swift工程都能使用该oc文件,在.h里暴露的方法都能被该工程使用 //oc文件 TestOC.h #import @interface TestO ...

  9. Flutter学习笔记(30)--Android原生与Flutter混编

    如需转载,请注明出处:Flutter学习笔记(30)--Android原生与Flutter混编 这篇文章旨在学习如何在现有的Android原生项目上集成Flutter,实现Android与Flutte ...

随机推荐

  1. 刚安装的ios app 会带有教你功能使用的特效说明 做法

    这个功能使用说明是每次app更新或者第一次安装都需要显示的.你可以给每个需要显示的说明界面设置一个BOOL变量控制它是否显示.在applicationDidFinishLaunching的函数中判断a ...

  2. Sql Server添加用户

    1.sa用户登陆之后,在安全性中新建登录名 2.添加登录名,下面的默认数据库选择该用户可访问的默认数据库 3.服务器角色中选择public 4.用户映射中选择该用户可访问的数据库,数据库角色一般选择p ...

  3. C/C++中的拷贝构造函数和赋值构造函数

    代码: #include <iostream> #include <cstdio> using namespace std; class A{ public: A(){ cou ...

  4. 《APUE》读书笔记第十三章-守护进程

    守护进程 守护进程是生存期较长的一种进程,它们常常在系统自举时启动,仅在系统关闭时才终止.因为它们没有控制终端,所以说它们是在后台运行的.UNIX系统由很多守护进程,它们执行日常事务活动. 本章主要介 ...

  5. 练习使用css3实现3d按钮

    网上有很多漂亮的用css3实现的3d按钮,如'这个'.‘糖果色按钮’, 今天练习了一下,喏,下面这样,兼容性不好. 小黑子小虎子 3d效果和发光效果都是利用box-shadow,也经常利用伪元素:af ...

  6. laravel实现发送qq邮件

    首先修改config/mail.php 'from' => [ 'address' => 'hello@example.com', 'name' => 'Example', ], 修 ...

  7. vuex构建笔记本应用学习

    vuex:针对vue应用派生的专门管理应用state的工具,state可以理解为我们组件需要操作的data数据,都知道,vue构建spa应用的时候,随着组件规模的提升,各个子组件之间的通信如果采用子组 ...

  8. Codeforces 533B Work Group

    http://codeforces.com/problemset/problem/533/B 题目大意: 每个人有一个直接的领导,1是总裁,现在要找一个最大的集合,每个领导领导的人的数量都是偶数,问最 ...

  9. 查询Sqlserver 表结构信息 SQL

    SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号 = a.colorder, 字段名 = ...

  10. EXTJS4:在grid中加入合计行

    extjs4很方便的实现简单的合计(针对在不分页的情况下): 它效果实现在:Ext.grid.feature.Summary这个类中 Ext.define('TestResult', { extend ...