webview系列：Html5页面和Native App怎么进行交互

混合开发的App（Hybrid App）就是在一个App中内嵌一个轻量级的浏览器，一部分原生的功能改为Html5来开发，这部分功能不仅能够在不升级App的情况下动态更新，而且可以在Android或iOS的App上同时运行，让用户的体验更好又可以节省开发的资源。

我觉得一个Hybrid开发的App中必须要要有的功能就是Html5页面和Native App怎么进行交互。比如，我点了一个Html 5页面上的一个按钮或链接，我能不能够跳转到Native App的某个页面；比如我点了Html 5页面上的分享按钮，我能不能调用Native App的分享功能；比如Html加载的时候能不能获取Native App的用户信息等等。

一般来讲，我所知道的两种主流的方式就是：

js调用Native中的代码
Schema：WebView拦截页面跳转

第2种方式实现起来很简单，但是一个致命的问题就是这种交互方式是单向的，Html5无法实现回调。如果需求变得复杂，假如Html5需要获取Native App中的用户信息，那么最好使用js调用的方式。例如我们通过淘宝客户端进入天猫的h5页面购物，在这种情况下，你就需要在webview页面获取登陆用户的信息。

一.方式1：js和Native进行交互

demo

webview相关页面配置

        WebSettings webSettings = mWebview.getSettings();//①设置WebView允许调用jswebSettings.setJavaScriptEnabled(true);webSettings.setDefaultTextEncodingName("UTF-8");//②将object对象暴露给Js,调用addjavascriptInterfacemWebview.addJavascriptInterface(new MyObject(TestWebViewActivity.this), "myObj");

静态页面

<html>
<head><title>Js调用Android</title>
</head><body>
<a href="xl://goods:8888/goodsDetail?goodsId=10011002">test scheme</a><input type="button" value="Toast提示" onclick="myObj.showToast('曹神前来日狗~');"/>
<input type="button" value="列表对话框" onclick="myObj.showDialog();"/>
</body>
</html>

MyObject

/*** Created by niehongtao on 16/10/9.*/
public class MyObject {private Context context;public MyObject(Context context) {this.context = context;}//将显示Toast和对话框的方法暴露给JS脚本调用@JavascriptInterfacepublic void showToast(String name) {Toast.makeText(context, name, Toast.LENGTH_SHORT).show();}@JavascriptInterfacepublic void showDialog() {new AlertDialog.Builder(context).setTitle("联系人列表").setIcon(R.mipmap.ic_launcher).setItems(new String[]{"基神", "B神", "曹神", "街神", "翔神"}, null).setPositiveButton("确定", null).create().show();}
}

可参考
Android基础入门教程——7.5.2 WebView和JavaScrip交互基础
http://blog.csdn.net/coder_pig/article/details/48392621
这个讲解的最为具体

二.方式2：Scheme：WebView拦截页面跳转

demo

点击网页里的超链接，跳转到原生页面

webviewActivity

package com.ht.fyforandroid.test.webview;import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;import com.ht.fyforandroid.R;
import com.ht.fyforandroid.base.BaseActivity;import butterknife.InjectView;/*** Created by niehongtao on 16/7/7.* 进行仿微信加载WebView显示进度条,直接调用start()方法进行跳转.*/
public class TestWebViewActivity extends BaseActivity {@InjectView(R.id.webview)WebView mWebview;@Overrideprotected int getLayoutId() {return R.layout.activity_webview;}@Overrideprotected void init(Bundle savedInstanceState) {TestWebViewActivity.super.mLoadingDialog.hideLoading();mWebview.loadUrl("file:///android_asset/test.html");mWebview.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {Uri uri = Uri.parse(url);if (uri.getScheme().equals("xl")) {startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));} else {view.loadUrl(url);}return true;}});}public static void startActivity(Context context) {Intent intent = new Intent(context, TestWebViewActivity.class);context.startActivity(intent);}@Overrideprotected void onDestroy() {super.onDestroy();if (mWebview != null) {mWebview.destroy();}}}

静态页面test.html

<html><body><a href="xl://goods:8888/goodsDetail?goodsId=10011002">test scheme</a>
</body></html>

需要跳转到的页面

配置信息

        <activity android:name=".test.scheme.Test1Activity"><!--要想在别的App上能成功调起App，必须添加intent过滤器--><intent-filter><!--协议部分，随便设置--><data
                    android:host="goods"android:path="/goodsDetail"android:port="8888"android:scheme="xl"/><!--下面这几行也必须得设置--><category android:name="android.intent.category.DEFAULT"/><action android:name="android.intent.action.VIEW"/><category android:name="android.intent.category.BROWSABLE"/></intent-filter></activity>

页面

package com.ht.fyforandroid.test.scheme;import android.os.Bundle;import com.ht.fyforandroid.R;
import com.ht.fyforandroid.base.BaseActivity;/*** Created by niehongtao on 16/10/8.*/
public class Test1Activity extends BaseActivity {@Overrideprotected int getLayoutId() {return R.layout.activity_test1;}@Overrideprotected void init(Bundle savedInstanceState) {}
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextView
        android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="scheme跳转测试"/></LinearLayout>

应用场景：

Android中的scheme是一种非常好的实现机制，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面；
通过scheme协议，服务器可以定制化告诉App跳转那个页面，可以通过通知栏消息定制化跳转页面，可以通过H5页面跳转页面等。
已经可以适应多数的应用场景

Html5页面和Native App怎么进行交互相关推荐

HTML5 页面制作工具
https://www.zhihu.com/question/30087283 HTML5 页面制作工具免费的基于 HTML 5 的 Web Apps 生成器工具网站 81 235 初页制作微信 ...
native app 、web app 和hybrid app
现在主流的应用程序可以分为三大类native app .web app 和hybrid app. 先简单介绍下这三类 1.Native App Native App是一种基于智能手机本地操作系统如iO ...
html5页面跳转方式,H5页面跳转的交互设计方法
今年做了大量的H5项目,遇到了很多坑,有自家的也有第三方的,在这个过程中get到了一些之前不具备的知识,所以这一篇,就简单分享一下这方面的话题吧. 一.传统的MPA 首先,说一个比较古老的东西,叫做M ...
HTML5来到，原生Native APP是否还有市场
业界很多主流的移动开发框架均源于PhoneGap.较著名的有Worklight.appMobi.WeX5等:其中WeX5为国内打造,完全Apache开源,在融合Phonegap的基础上,做了深度优化, ...
html5微信自动播放视频,科技常识：HTML5页面音视频在微信和app下自动播放的实现方法...
今天小编跟大家讲解下有关HTML5页面音视频在微信和app下自动播放的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5页面音视频在微信和app下自动播放的实现方法的相关 ...
京东在html5页面中打开本地app的解决方案
从html5打开本地的app–如果本地没有app就跳转到下载页面,大家都会认为这是一项很简单的操作.网上的教程也很多,但是可行性都不高.因为手机系统和浏览器型号各不相同,所以兼容性会是让各个前端工程师 ...
html音视频app制作,怎么实现HTML5页面音视频在微信和app下自动播放
怎么实现HTML5页面音视频在微信和app下自动播放发布时间:2020-09-28 15:52:53 来源:亿速云阅读:90 作者:小新这篇文章给大家分享的是有关怎么实现HTML5页面音视频在微 ...
html5页面转appstore,跳转App Store那些事儿
在开发iOS应用或者开发移动端HTML5页面时候多多少少会跳转到App Store来完成一些事情,比如下载某个应用.应用评分.App Store支付设置等. 跳转到App Store分为引用内跳转和应 ...
html5页面中打开本地app，如果没有跳转下载页面的解决方案
需求效果在推广网页上用户点击产品的详细信息时,判断出这个用户手机上是否安装自己的app如果安装了直接自动打开手机内的app应用,若没有则跳转app的下载页技术实现直接用window.locati ...

Html5页面和Native App怎么进行交互

一.方式1：js和Native进行交互

demo

二.方式2：Scheme：WebView拦截页面跳转

demo

webviewActivity

静态页面test.html

需要跳转到的页面

应用场景：

Html5页面和Native App怎么进行交互相关推荐

最新文章

热门文章