2018学习之混合开发

mxs-blog mxs-blog     2022-10-12     642

关键词:

混合开发HybridAPP

小杂种APP,混合APP

对比现在流行的三种APP:WebAPP,NativeAPP,HybridAPP

WebAPP:

  • 不需要下载安装,通过移动端浏览器来访问

  • HTML5+CSS3+JS;Web前端开发人员

  • 开发成本低,更新维护迭代成本也很低,使用成本低,跨平台

  • 较为依赖网络,流畅度较低,吃性能

  • 不能调用设备的原生功能

NativeAPP:

  • 需要下载安装,打开访问

  • IOS开发人员,Android开发人员,xml+Objective-C/xml+swift(ios),xml+java

  • 开发成本高,更新维护迭代成本也很高,使用成本高,不能跨平台

  • 基本不太依赖网络,流畅度较高,性能好

  • 可以调用设备的原生功能

HybridAPP:

目前流行的开发模式有两种:

  1. 原生主导开发(最广泛,最简单)

    大部分功能还是由native开发人员来开发,部分界面嵌入H5页面来实现,这样就可以将nativeApp和webapp的优点集合到一起了

    稳定性、兼容性都会比较好

    怎么去判断一个APP是nativeAPP还是HybridAPP:

    • 长按文字,看是否能选中

    • 打开手机的开发者模式

    其实开发HybridAPP内嵌的H5页面和开发纯WebAPP的区别在于:需要和原生Native进行交互,这些方法都很简单。还有一个知识就是在某些情况下需要判断ios还是Android,原理:利用window.navigator.userAgent

    判断ios、android

    附录:Native与JS交互

  2. H5主导开发

Native与JS交互方式

前言

我们知道混合开发的模式现在主要分为两种,H5工程师利用某些工具如DCLOUD产品、codorva+phonegap等等来开发一个外嵌native壳子的混合app

还有就是应用比较广泛的,有native开发工程师和H5工程师一起写作开发的应用,在native的webview里嵌入H5页面,当然只是部分界面这么做,这样做的好处就是效率高,开发成本和维护成本都比较低,较为轻量,但是有一个问题不可避免的会出现,就是js和native的交互

native与js交互部分等详细内容请移步这里:

简书资源

掘金资源


Native(Objective-C或Swift)调用Javascript方法

1.Native调用Javascript语言,是通过UIWebView组件的stringByEvaluatingJavaScriptFromString方法来实现的,该方法返回js脚本的执行结果。

// Swift
webview.stringByEvaluatingJavaScriptFromString("Math.random()")
// OC
[webView stringByEvaluatingJavaScriptFromString:@"Math.random();"];

从上面代码可以看出它其实就是调用了window下的一个对象,如果我们要让native来调用我们js写的方法,那这个方法就要在window下能访问到。但从全局考虑,我们只要暴露一个对象如JSBridge对native调用就好了,所以在这里可以对native的代码做一个简单的封装:

//下面为伪代码
webview.setDataToJs(somedata);
webview.setDataToJs = function(data) {
 webview.stringByEvaluatingJavaScriptFromString("JSBridge.trigger(event, data)")
}

另外:==在android中,native与js的通讯方式与ios类似==

2.在iOS 7之后,apple添加了一个新的库JavaScriptCore

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"showAlert('这里是JS中alert弹出的message')";
[context evaluateScript:textJS];

Javascript -> OC/Swift

Javascript调用Native,并没有现成的API可以直接拿来用,而是需要间接地通过一些方法来实现。UIWebView有个特性:在UIWebView内发起的所有网络请求,都可以通过delegate函数在Native层得到通知。这样,我们就可以在UIWebView内发起一个自定义的网络请求,通常是这样的格式:

jsbridge://methodName?param1=value1&param2=value2

发起这样一个网络请求有两种方式:

  1. 通过localtion.href;
  2. 通过iframe方式;

通过location.href有个问题,就是如果我们连续多次修改window.location.href的值,在Native层只能接收到最后一次请求,前面的请求都会被忽略掉。

使用iframe方式,以唤起Native APP的分享组件为例,简单的封闭如下:

var url = 'jsbridge://doAction?title=分享标题&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
setTimeout(function() {
    iframe.remove();
}, 100);

2.还有一种方式就是使用JavaScriptCore

定义好JS需要调用的方法,例如JS要调用share方法:

则可以在UIWebView加载url完成后,在其代理方法中添加要调用的share方法

这样的话web页面中就可以直接使用到这个方法:

function secondClick() {
    share('分享的标题','分享的内容','图片地址');
}
...
<button type="button" onclick="secondClick()">Click Me!</button>

javascript调用native Android方式

目前在android中有三种调用native的方式:

1.通过schema方式,使用shouldOverrideUrlLoading方法对url协议进行解析。这种js的调用方式与ios的一样,使用iframe来调用native代码。

2.通过在webview页面里直接注入原生js代码方式,使用addJavascriptInterface方法来实现。

在android里实现如下:

class JSInterface {
    @JavascriptInterface //注意这个代码一定要加上
    public String getUserData() {
        return "UserData";
    }
}
webView.addJavascriptInterface(new JSInterface(), "AndroidJS");

上面的代码就是在页面的window对象里注入了AndroidJS对象。在js里可以直接调用

alert(AndroidJS.getUserData()) //UserDate

3.使用prompt,console.log,alert方式,这三个方法对js里是属性原生的,在android webview这一层是可以重写这三个方法的。一般我们使用prompt,因为这个在js里使用的不多,用来和native通讯副作用比较少。

class YouzanWebChromeClient extends WebChromeClient {
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 这里就可以对js的prompt进行处理,通过result返回结果
    }
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {

    }
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

    }

}

总结

OC/SWIFT调用js

直接用一些方法执行我们js中的一些语句,也就是说,我们最好定义一些对象,上面放着一些方法准备被native调用,当然也就可以在这些方法里传点参数啥的给咱们了

js调用iframe

我们可以整一个请求发出去,这个请求呢会被native给拦截到,他就指的啥意思了

比如,我们可以通过 location.href=A://b=1&c=2&d=3 当然这里的A、b、c、d都要商量好,bcd就是传参数

但是location.href只能发一次,所以我们可以用iframe去发,发完了给iframe干掉就可以了

android 调用 js 和oc、swift一样,这里就不说了

js调用Android

1.也跟调用ios一样,搞个请求,用个iframe

2.Android能想办法给咱的window对象上挂个东西,比如JSBridge啥的然后咱直接调这个玩意的方法就行了

3.他们能把咱的prompt、console.log、alert给重写咯,也就是说咱用alert已经不能弹出了,反而能给Android传参数了,但是一般不会重写alert,重写的都是不怎么用的prompt

vue.js基础学习之混合mixins

混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中。当混合对象与组件包含同名选项时,这些选项将以适当的策... 查看详情

自定义view学习之12/7(进度条之混合模式)

今天重点内容是我们学习自定义view里面的混合模式,其实我们的画布就跟photoshop一样,是个图层关系,一层盖着一层,这样就导致有很多种覆盖模式,这就是我们今天的主题,“混合模式”。好,现在... 查看详情

javaweb基础学习之开发环境篇

Tomcat+Eclipse添加JavaEE插件因为之前进行JavaSE学习已经配置了JDK,安装了EclipseforJavaSE,所以选择了在Eclipse上添加插件的方式来配置Web开发环境Tomcat是免安装版,直接解压即可;Eclipse中“帮助-安装新软件”,workwith处选择Mars-http://d... 查看详情

reactnative学习之html基础

前言:   ReactNative开发作为一种新型的移动开发方式,个人觉得App的一部分需求会逐步替换成这种方式,也是公司移动开发人员所必须掌握的一种开发技术,所以鉴于这种情况我觉得很有必要学习一下,特此开贴记录... 查看详情

《javascript设计模式与开发实践》学习之使用策略模式计算奖金

简洁的做法如下: 查看详情

web开发学习之http协议

 web入门1)web服务软件作用:把本地资源共享给外部访问2)tomcat服务器基本操作:启动: %tomcat%/bin/startup.bat关闭:%tomcat%/bin/shutdown.bat访问tomcat主页:http://localhost:80803)web应用目录结构|-WebRoot  根目录|-静态资源(html... 查看详情

flaskweb开发学习之“helloworld”(代码片段)

Flask是一个使用Python编写的轻量级Web应用框架。和python的其他第三方库一样,pip可以直接安装并管理Flask,在终端中输入pipinstallflask这个小辣椒就安装好了。Flask是一个非常便捷的web开发框架,以至于很少的代码就可以... 查看详情

android开发学习之materialdesign(代码片段)

(参考书:第一行代码第2版)一、ToolbarAndroidManifest文件中有一个theme属性,指定了AppTheme主题。该主题在res/values/styles.xml文件中定义。如果要使用Toolbar代替ActionBar。需要将parent参数指定为NoActionBar的类型。使用Tool... 查看详情

android开发学习之materialdesign(代码片段)

(参考书:第一行代码第2版)一、ToolbarAndroidManifest文件中有一个theme属性,指定了AppTheme主题。该主题在res/values/styles.xml文件中定义。如果要使用Toolbar代替ActionBar。需要将parent参数指定为NoActionBar的类型。使用Tool... 查看详情

(转)openfire源码学习之十五:插件开发

转:http://blog.csdn.net/huwenfeng_2011/article/details/43418493Plugin接口规范插件是openfire功能的增强表现,它的主要任务:l  在XMPP协议中作为附加功能实现l  动态修改控制管理台l  使用openfireapi作为新功能添加到服务... 查看详情

android开发学习之okhttp框架(代码片段)

OkHttp是处理网络请求的开源项目,是目前Android使用最广泛的网络框架。github地址:https://github.com/square/okhttp需引入依赖implementation("com.squareup.okhttp3:okhttp:4.9.1")一、同步GET请求完成同步网络请求需要在子线程中完成声... 查看详情

linux学习之在搭建java开发环境

首先,在官网上下载你需要的JDK然后解压包   tar-zxvf包名 配置环境变量    vim/etc/profile如果权限不够,就使用sudovim/etc/profile在profile里添加以下变量: 编辑完成后使用source/etc/profile使该环境变量生效 这个... 查看详情

安卓开发学习之015imageview基础属性详解

一、ImageView简介显示任意图像,例如图标。ImageView类可以加载各种来源的图片(如资源或图片库或网络图片)其结构关系图如下:二、主要XML属性属性名关联方法描述:adjustViewBoundssetAdjustViewBounds(boolean)设置该属性... 查看详情

java学习之环境搭建

一、Java环境中的几个概念:  JVM(javaVirtualMachine)  JRE(JavaRuntimeEnvironment)  JDK(JavaDevelopmentKit)    java开发工具包(Java开发环境)    JDK=JRE+Tools&ToolAPIs二、JDK版本:  JDK1.0~1.1:  JDK1.2~1.4:  JDK1.5:(更名为JDK5.0 查看详情

android开发学习之进阶技巧(代码片段)

一、全局获取ContextAndroid提供了一个Application类,每当程序启动的时候,系统会自动将这个类进行初始化。可以定制一个自己的Application类,便于管理程序内的一些全局状态信息,如Context。新建类继承Application,... 查看详情

scala学习之函数式风格编程(代码片段)

FUNCTIONALPROGRAMMINGhttps://docs.scala-lang.org/overviews/scala-book/functional-programming.htmlScala允许您以面向对象编程(OOP)风格、函数式编程(FP)风格甚至混合风格编写代码,结合使用这两种方法。本书假设您是从Java、C++或C#等OOP语言来... 查看详情

android开发学习之实用技巧(代码片段)

一、全局获取ContextAndroid提供了一个Application类,每当程序启动的时候,系统会自动将这个类进行初始化。可以定制一个自己的Application类,便于管理程序内的一些全局状态信息,如Context。新建类继承Application,... 查看详情

android开发学习之位置服务(代码片段)

(学习参考书:第一行代码第2版)在开始之前,需要到提供LBS服务的API开发平台申请注册和申请APIkey。百度、高德地图均可,本文采用百度的API。一、配置LBSSDK选择所需功能下载jar文件解压后将下载文件夹中l... 查看详情