android js交互 | 易学教程

H5与Native交互之JSBridge技术

阅读更多关于 H5与Native交互之JSBridge技术

一、原理篇下面分别介绍IOS和Android与Javascript的底层交互原理 IOS 在讲解原理之前，首先来了解下iOS的UIWebView组件，先来看一下苹果官方的介绍： You can use the UIWebView class to embed web content in your application. To do so, you simply create a UIWebView object, attach it to a window, and send it a request to load web content. You can also use this class to move back and forward in the history of webpages, and you can even set some web content properties programmatically. 上面的意思是说UIWebView是一个可加载网页的对象，它有浏览记录功能，且对加载的网页内容是可编程的。说白了UIWebView有类似浏览器的功能，我们使用可以它来打开页面，并做一些定制化的功能，如可以让js调某个方法可以取到手机的GPS信息。但需要注意的是，Safari浏览器使用的浏览器控件和UIwebView组件并不是同一个

黑科技在此！移动开发者必须了解的跨平台开发工具

阅读更多关于黑科技在此！移动开发者必须了解的跨平台开发工具

跨平台一直是老生常谈的话题，cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放，颇有一股推倒原生开发者的势头。本文将对当下跨平台移动开发的现状、实现原理、框架的选择等进行深度解析。为什么我们需要跨平台开发？本质上，跨平台开发是为了增加代码复用，减少开发者对多个平台差异适配的工作量，降低开发成本，提高业务专注的同时，提供比web更好的体验。通俗了说就是：省钱、偷懒。本篇主要以react-native、weex、flutter，结合资讯展望，深入聊聊当前跨平台移动开发的实现原理、现状与未来。至于为什么只讲它们，因为对比ionic、phoneGap，它们更于 “naive”。一、原理与特性目前移动端跨平台开发中，大致归纳为以下几种情况： react native、weex均使用Java作为编程语言，目前Java在跨平台开发中，可谓占据半壁江山，大有“一统天下”的趋势。 kotlin-native开始支持 iOS 和 Web 开发，（kotlin已经成为android的一级语言）也想尝试“一统天下”。 flutter是Google跨平台移动UI框架，Dart作为谷歌的亲儿子，毫无疑问Dart成为flutter的编程语言，如下图，作为巨头新生儿，在flutter官网也可以看出，flutter同样“心怀天下

Android之WebView学习

阅读更多关于 Android之WebView学习

WebView常用方法 WebSettings 在使用WebView前我们都要进行相关的配置，常见的操作如下： WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true); //支持javascript settings.setUseWideViewPort(true); //设置webview推荐使用的窗口，使html界面自适应屏幕 settings.setLoadWithOverviewMode(true); //缩放至屏幕的大小 settings.setAllowFileAccess(true); //设置可以访问文件 // settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM); //设置中等像素密度，medium=160dpi settings.setSupportZoom(true); //设置支持缩放 settings.setLoadsImagesAutomatically(true); //设置自动加载图片 // settings.setBlockNetworkImage(true); //设置网页在加载的时候暂时不加载图片 // settings.setAppCachePath(""); //设置缓存路径

Android-webview和js互相调用

阅读更多关于 Android-webview和js互相调用

Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以，App和H5页面相结合就显得尤为重要。而android和H5都不可能每次都是独立存在的，而是相互影响也相互的调用，获取信息等，例如，H5页面要获取App中的用户的基本信息，或者App端要操作H5页面等，下面来看看这两是怎么交互的。先来看一下项目的整体架构（Android studio中的项目）整个项目的结构就是这样的，里面最主要的就是assets下面的js_webView.html文件和代码中的WebViewJsActivity，其中项目里面的MainActivity只是做了个跳转而已，跳转到WebViewJsActivity。就这样。下面上代码：(js_webView.html) html里面的代码也比较简单，整个html中就一个Button，点击这个Button的时候去执行javascript中的 jsCallAndroid() 方法。网页中有关 javascript 的代码也比较简单，整个 js 就2个方法，一个是 jsCallAndroid() ，一个是

Android-webview和js互相调用

阅读更多关于 Android-webview和js互相调用

Android 和 H5 都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以，App和H5页面相结合就显得尤为重要。而android和H5都不可能每次都是独立存在的，而是相互影响也相互的调用，获取信息等，例如，H5页面要获取App中的用户的基本信息，或者App端要操作H5页面等，下面来看看这两是怎么交互的。先来看一下项目的整体架构（Android studio中的项目）整个项目的结构就是这样的，里面最主要的就是assets下面的js_webView.html文件和代码中的WebViewJsActivity，其中项目里面的MainActivity只是做了个跳转而已，跳转到WebViewJsActivity。就这样。下面上代码：(js_webView.html) html里面的代码也比较简单，整个html中就一个Button，点击这个Button的时候去执行javascript中的 jsCallAndroid() 方法。网页中有关 javascript 的代码也比较简单，整个 js 就2个方法，一个是 jsCallAndroid() ，一个是 androidCallJs() 。看方法名就知道了

android原生和H5交互(转)

阅读更多关于 android原生和H5交互(转)

最近在左一个Android原生的H5混合开发的APP，之前还没有好好的总结一下Android原生和Ｈ5 之间交互的方法，这里来总结一下： 1、hybrid通信，主要就是前端的js和我们Android端的通信这是最基本JS和Java 的通信方式：这里我们分四块来讲：（1）、js调用android原生的代码（不传递参数）（2）、js调用android原生的代码（传递参数）（3）、android原生调用JS的代码（不传递参数）（4）、android原生调用JS的代码（传递参数）好的我们这里先来创建一个工程：在工程的main文件夹下创建一个文件夹assets ,然后把写好的H5页面放入该文件夹中，H5页面代码如下： < pre name = " code " class = " html " > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns = " http://www.w3.org/1999/xhtml " > < head > < meta http-equiv = " Content-Type " content = " text/html;

React-native 跨平台原理

阅读更多关于 React-native 跨平台原理

1、为什么React native 可以跨平台其实通过react native的架构图就明白了，下面我们就根据架构图来理解一下为什么react native可以实现跨平台：（1）、React：不同平台上编写基于React的代码，“Learn once, write anywhere”。（2）、Virtual DOM：相对Browser环境下的DOM而言，Virtual DOM是DOM在内存中的一种轻量级表达方式（原话是lightweight representation of the document），可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信。（3）、Web/iOS/Android：上层与用户交互的UI界面。 React-Native在JavaScript中抽象操作系统原生的UI组件，代替DOM元素来渲染，使用的是Android或iOS的本地控件，所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript，但由于JavaScript是即时编译的，也就是第一次使用时会将JavaScript代码编译成二进制文件，所以JavaScript得运行效率比较高。因此，React Native的运行效率要比基于HTML5、CSS等技术的PhoneGap、AppCan高很多

kotlin Android与JavaScript如何交互

阅读更多关于 kotlin Android与JavaScript如何交互

什么是JS交互：说的通俗一点就是前端一些调用不了原生代码的功能，或者在一些复杂页面和混排页面上，原生没有网页来得快，所以在实际项目中，很多情况下都是原生页面掺杂着webView 加载js的网页的，这就涉及到两者之间的交互以及传值问题。 Android调用JS方法：通过WebView的loadUrl()调用（API小于等于18使用）通过WebView的evaluateJavascript()调用（API大于18使用） JS调用Android方法：通过WebView的addJavascriptInterface() 通过WebViewClient的shouldOverrideUrlLoading()回调拦截url 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()方法由于方法二和方法三使用方法复杂，大多数同学使用的都是方法一，但是方法一存在严重漏洞，这里不做过多介绍。 Android调用Js方法 1、把需要测试的js代码放到src/main/asserts文件夹下，测试代码如下 2、配置wevView属性，并写一个测试按钮进行点击监听由于是测试，我把js代码文件放到了asserts进行加载测试，实际项目中是加载的链接，道理都一样

Android混合开发之WebView与Javascript交互

阅读更多关于 Android混合开发之WebView与Javascript交互

前言：为了加快开发效率，目前公司一些功能使用H5开发，这里难免会用到Js与Java函数互相调用的问题，这个Android是提供了原生支持的，不过存在安全隐患，今天我们来学习一种安全方式来满足Js与java互相调用的需求。它就是WebViewJavascriptBridge。学习动机：先看下之前的解决办法： Android混合开发之WebView与Javascript交互最近棒棒安全的一个市场推广来我们公司推广他们的产品，当时也没太引起我的注意，后来这个市场推广人员把我们的app的进行了他们的安全验证，然后发给我一份检测报告，关于WebView的检测内容大致如下：其实目前公司采用H5的业务都是相对不是很重要的一些业务，而且安全性要求相对比较低，不过作为技术负责人的我，觉得现在很有必要尽快寻找一个相对安全的方式来解决这个问题，算是未雨绸缪吧。经过搜过资料寻找的解决办法就是使用WebViewJavascriptBridge来实现Js与Java的互相调用。 WebViewJavascriptBridge介绍： WebViewJavascriptBridge是WebView和Js交互通信的桥梁，用作者的话来说就是实现java和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得开发者更方便的让js和native灵活交互

WebView性能、体验分析与优化

阅读更多关于 WebView性能、体验分析与优化

在App开发中，内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用，也可以冠冕堂皇的突破苹果对热更新的封锁。然而便利性的同时，WebView的性能体验却备受质疑，导致很多客户端中需要动态更新等页面时不得不采用其他方案。以发展的眼光来看，功能的动态加载以及三端的融合将会是大趋势。那么如何克服WebView固有的问题呢？我们将从性能、内存消耗、体验、安全几个维度，来系统的分析客户端默认WebView的问题，以及对应的优化方案。性能对于WebView的性能，给人最直观的莫过于：打开速度比native慢。是的，当我们打开一个WebView页面，页面往往会慢吞吞的loading很久，若干秒后才出现你所需要看到的页面。这是为什么呢？对于一个普通用户来讲，打开一个WebView通常会经历以下几个阶段：交互无反馈到达新的页面，页面白屏页面基本框架出现，但是没有数据；页面处于loading状态出现所需的数据如果从程序上观察，WebView启动过程大概分为以下几个阶段：如何缩短这些过程的时间，就成了优化WebView性能的关键。接下来我们逐一分析各个阶段的耗时情况，以及需要注意的优化点。 WebView初始化当App首次打开时，默认是并不初始化浏览器内核的；只有当创建WebView实例的时候，才会创建WebView的基础框架。

订阅 android js交互