uni app与原生安卓混合开发

Uni app是一个基于Vue.js的全端开发框架,像react-native 和 Weex 一样可以将一个原生应用打包到多个平台上。而在安卓开发中,混合开发是一种常用的开发模式,通过在原生应用中内嵌WebView,实现与前端技术紧密结合,提升开发效率。本文将介绍 uni app与原生安卓混合开发的原理和实现方式。

一、uni-app的基本原理

uni-app基于Vue.js框架和模板语言、Webpack构建工具的基础上进行全端开发,同时兼容市面上主流的终端机,可以将原生应用打包成H5程序、小程序、快应用、App(iOS、Android)。它的核心思想是“能否以一种原则进行多端开发”,这个答案已经得到了肯定。uni-app使用Vue.js框架,在此基础上重新封装了一些组件,处理不同终端的差异,同时按照H5规范和小程序开发规范制定了一套统一的规范体系,实现了多终端统一开发。uni-app以Webview作为容器载体,依赖Hybrid能力,获取本地原生特性,同时封装了常用的调用API。所以,uni-app本质上是一种混合开发的方式,它利用了WebView和Hybrid的特性,实现了统一开发多种平台的目标。

二、uni-app和原生安卓混合开发的实现方式

1.使用Webview嵌入 uni-app 页面

在原生应用的Activity中,可以通过Webview控件嵌入uni-app页面。具体实现方式如下:

首先在项目框架下,建立一个HTML页面,在这个页面中引入uni-app的JS文件,即可完成uni-app的开发。

然后,在安卓项目中添加一个WebView,通过WebView的loadUrl方法加载刚刚开发的HTML页面,即可实现uni-app页面的嵌入。

在uni-app中,为了兼容多端,开发者需要通过配置文件来实现对原生特性的调用。而在原生应用中,则需要通过Java编写一个Bridge类,通过Webview暴露一个对象方法,将其注册进Window对象中,调用该方法即可实现与uni-app交互。

2.使用 uni-app页面 嵌入原生项目

需要将uni-app整个项目编译成原生程序,直接放到Android Studio工程中即可。app的启动项为UniAppDelegate,同时AndroidManifest.xml文件中也会自动生成相应的Activity。

在原生应用项目中,通过启动或者传入参数的方式,可以跳转到对应的uni-app页面。交互方面,uni-app的开发者需要使用 uni.$emit() 函数将需要传递的参数 emit 给 Native 端,Native 则需要使用WVJBWebViewDelegate中的 - (void)bridge:(WVJBWebView *)bridge handleData:(NSDictionary *)data responseCallback:(WVJBResponseCallback)responseCallback 这个方法,根据传入的uni.$emit()方法参数进行相应的处理。

总体上,uni-app与原生安卓混合开发,通过 WebView 和 JavaScript Bridge 实现了web和原生交互,应用场景非常广泛,可以适用于各类应用开发。

川公网安备 51019002001728号