APP封装从一门开始
一门提供APP封装底层开发框架,一键在线APP封装,200+原生APP模块,2000+JS映射接口按需自助封装

封装h5为app

在互联网时代,移动应用的市场越来越火爆。不仅仅是大型APP,像小程序、H5应用这种轻量级的应用越来越受到用户的欢迎。但是,由于不是原生应用,H5应用并不能和原生应用有同等的使用效果。封装H5应用为原生应用则可以弥补这一短板,本文将介绍封装H5应用为原生应用的原理及详细步骤。

一、封装H5应用的原理

封装H5应用为原生应用的原理其实很简单,这里主要分两步:

1. 将H5应用解压缩到本地目录中,并使用Webview调用index.html文件;

2. 使用桥接方式,将原生App和JS之间的交互打通。

第一步使用的是Webview技术,它是Android系统中的一种组件,可以在应用内加载网页并显示出来。我们只需要把H5应用的全部静态文件打包成一个zip压缩包,在App中解压缩,然后使用WebView控件打开H5应用中的index.html文件即可。

第二步则需要从两个应用技术角度考虑:原生应用和H5应用之间要如何通信?具体来说,就是如何实现原生App调用H5应用,以及H5应用回调原生App的功能。这一步主要实现思路是在原生App中内置一个JavaScript桥接文件,通过该文件,JS可以直接读取原生App的接口,另一方面,原生App也可以通过该文件直接调用H5中的js方法。

二、封装H5应用的具体步骤

下面详细介绍一下,封装H5应用为原生应用的具体步骤。

1. H5应用的打包和解压

我们首先需要将H5应用的代码打包成zip文件,命名为“app.zip”,然后将该zip文件复制到App的assets目录下。当App启动时,首先从资源目录中读取app.zip文件,并解压到磁盘上,如下所示:

```

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//复制app.zip到sdcard根目录下,并解压到app目录中

String zipPath = Environment.getExternalStorageDirectory().getAbsolutePath() + "/app.zip";

String appPath = getApplicationContext().getFilesDir().getAbsolutePath();

FileUtils.copyFile(zipPath, appPath + "/app.zip"); //复制

ZipUtils.unZip(appPath + "/app.zip", appPath + "/app"); //解压

}

}

```

在解压之后,我们需要将H5应用的入口文件(index.html)通过Webview调用出来,如下所示:

```

public class MainActivity extends AppCompatActivity {

private WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//找到WebView控件,并加载index.html

mWebView = (WebView) findViewById(R.id.web_view);

String appPath = getApplicationContext().getFilesDir().getAbsolutePath();

mWebView.loadUrl("file://" + appPath + "/app/index.html");

}

}

```

2. 原生App和H5应用之间的交互

下面我们将介绍如何实现App和H5应用之间的交互。

首先,创建一个JsBridge类,这个类继承自WebViewClient。按照常规做法,在加载H5应用时用该类覆盖掉WebView的默认实现。我们可以通过这个桥接文件,在App和H5应用之间建立双向通信通道。下面的示例代码演示了如何将原生App的功能暴露给JS:

```

public class JsBridge extends WebViewClient {

private WeakReference mActivityRef;

//原生App调用H5应用

public void callJs(WebView webView, String jsFunc, String message) {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

webView.evaluateJavascript("javascript:" + jsFunc + "('" + message + "')", null);

} else {

webView.loadUrl("javascript:" + jsFunc + "('" + message + "')");

}

}

//H5应用调用原生App

public boolean shouldOverrideUrlLoading(WebView view, String url) {

if (url.startsWith("jsbridge://")) {

String[] urls = url.split("//");

String message = urls[1];

String func = urls[2];

callNative(func, message); //调用原生App的方法

return true;

}

return super.shouldOverrideUrlLoading(view, url);

}

//调用原生App的方法

private void callNative(String func, String message) {

Activity activity = mActivityRef.get();

if (activity != null) {

if ("showToast".equals(func)) {

Toast.makeText(activity, message, Toast.LENGTH_SHORT).show();

} else if ("callPhone".equals(func)) {

Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + message));

activity.startActivity(intent);

} else if ("openUrl".equals(func)) {

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(message));

activity.startActivity(intent);

}

}

}

}

```

上面代码中, 原生App和H5应用中的通讯协议采用“jsbridge://”形式,其中jsbridge前缀为自定义协议的名称。H5应用通过window.location.href属性调用原生App的接口,调用格式为:

```

window.location.href='jsbridge://message/callNative?abc'

```

接下来,我们在MainActivty类中将JsBridge类作为WebView的Client实现,并注册全局的桥接对象:

```

public class MainActivity extends AppCompatActivity {

private WebView mWebView;

private JsBridge mJsBridge = new JsBridge(this);

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//找到WebView控件,并加载index.html

mWebView = (WebView) findViewById(R.id.web_view);

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.setWebViewClient(mJsBridge);

mWebView.addJavascriptInterface(new JsApi(this), "JsApi");

String appPath = getApplicationContext().getFilesDir().getAbsolutePath();

mWebView.loadUrl("file://" + appPath + "/app/index.html");

}

}

```

在上面的代码中,我们使用addJavascriptInterface方法将原生功能依附到JS的window对象上,这样就可以在JS中直接调用该接口了。JsApi类的源代码如下:

```

public class JsApi {

private Activity mActivity;

public JsApi(Activity activity) {

mActivity = activity;

}

@JavascriptInterface

public void showToast(String message) {

Toast.makeText(mActivity, message, Toast.LENGTH_SHORT).show();

}

@JavascriptInterface

public void openUrl(String url) {

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));

mActivity.startActivity(intent);

}

@JavascriptInterface

public void share(String message) {

Intent shareIntent = new Intent(Intent.ACTION_SEND);

shareIntent.setType("text/plain");

shareIntent.putExtra(Intent.EXTRA_TEXT, message);

mActivity.startActivity(Intent.createChooser(shareIntent, "Share this"));

}

}

```

三、总结

本文主要介绍了如何将H5应用封装为原生App,主要包括两步:将H5应用解压缩到本地,并使用Webview调用index.html文件;使用桥接方式,将原生App和JS之间的交互打通。如果你正在开发一些轻量级应用,H5应用的封装为原生App则是一个有效的方案,不仅使得用户使用起来更加方便,也增加了应用的流行度。


相关知识:
免费h5制作app游戏
H5制作app游戏,可以说是未来游戏的一个趋势,因为它不需要用户下载安装,只需要在浏览器中打开即可,具有开发成本低、更容易传播等优点。现在已经有很多免费的H5游戏制作平台,下面我将介绍其中比较优秀的几款。一、EasyAREasyAR是一款基于AR技术的H5
2023-05-26
湖北h5开发app
湖北H5开发APP原理:H5开发APP是指通过html5、css3和JavaScript等前端技术,封装成Web应用,使用混合开发技术将Web应用封装为原生APP。开发人员在H5页面上使用JavaScript等与原生API进行交互,以实现原生应用的效果与功
2023-05-25
vue做h5混合app项目
H5混合App,也被称为Web App,是指通过HTML、CSS、JS等Web技术开发的应用,再通过打包成App形式在移动端展示。Vue是一种流行的JavaScript库,适用于构建用户界面。这里我们将介绍使用Vue构建H5混合App的原理和详细过程。首先
2023-05-25
h5做 app
HTML5可以通过移动应用程序框架来创建原生应用程序,该框架提供了使用HTML5、CSS、和JavaScript的基础设施,使原生应用程序的创建变得更加便捷。在这篇文章中,我们将介绍使用HTML5创建应用程序的原理和流程。HTML5技术在移动应用程序的开发
2023-05-25
h5做的安卓app
随着移动互联网的发展,越来越多的人开始使用手机进行各种操作。对于开发者来说,如何快速地开发出一款应用成为了一个重要问题。为了解决这个问题,我们可以使用HTML5技术来开发安卓应用。HTML5是网页标准的最新版本,它支持更多的功能和API,为移动设备提供更好
2023-05-25
h5制作app对比
在移动互联网时代,移动应用程序(APP)已成为各种企业、极客产品的“标配”之一。对于像老板、设计师、程序员等行业来说,制作一款APP已经不再是难事,H5制作app是较为常用的一种方式。那么,关于H5制作app有哪些需要注意的问题呢?H5是基于HTML5技术
2023-05-25
h5链接打包app
在移动互联网时代,APP已经成为了移动互联网最重要的载体之一。APP具有安装方便、与用户互动性强、可定制化程度高等优势,让越来越多的企业和个人选择推出自己的APP。但是,对于一些资源与人力有限的个人或小团队,开发APP成为了一个比较棘手的问题。因此,一些网
2023-05-25
h5能做到app 切换页面
H5能够通过一些技术手段实现APP切换页面的效果,让用户拥有更好的使用体验。本篇文章将深入介绍这些技术手段的原理和具体实现。一、H5页面的基本概念在了解H5实现APP切换页面效果的原理之前,我们先简单介绍一下H5页面的基本概念。1.1 基本概念H5页面是指
2023-05-25
h5开发的app通过什么方式打开
H5开发的app是指使用HTML5技术进行开发的跨平台应用程序,其最大的特点是可以运行在多种操作系统和设备上,包括桌面电脑、移动设备等。那么,H5开发的app通过什么方式打开呢?接下来我们就来详细地介绍一下。H5开发的app实际上是基于web技术开发的应用
2023-05-25
h5封装app常见问题
随着移动设备的普及,许多企业或创业公司开始考虑如何开发自己的移动应用程序。然而,由于缺乏专业的开发人员和高昂的开发成本,许多人转而选择使用HTML5封装应用程序来开发。HTML5应用程序封装平台已经成为了企业和创业公司开发和推出应用程序的首选方法。本文将详
2023-05-25
h5打包苹果app
HTML5是一种开放式的Web标准,已经成为人们构建跨平台应用程序的首选技术之一。在移动应用市场中,越来越多的开发者开始采用HTML5技术来构建应用程序以满足不同平台和不同终端设备的需求。将HTML5应用打包成为苹果iOS应用程序是实现跨平台运行的最佳方式
2023-05-25
h5打包app的教程
HTML5是一种非常流行的Web开发语言,它能够创造出许多丰富的Web应用程序。但是,在移动设备上,特别是在iOS和Android上,HTML5 Web应用程序仍然无法与原生应用程序相比较。这是因为原生应用程序具有更好的性能和用户体验。但是,如果你希望将你
2023-05-25
©2015-2021 一门APP yimenapp.com  川公网安备 51019002001185号 蜀ICP备17005078号-3