Android APP开发框架选择——JSBridge既个人心得和技巧

前言：

前几年公司要求做手机移动端APP开发，很多牛企也来我们这里推广自己的框架，比如IBM WorkLight，微软office365等等。

最近做个APP，个人谈谈框架的选择和自己心得。

首先，作为程序猿，不要抱有什么都是出钱买的想法，首先否定上面牛企的框架，我们客户买过一个10W美刀的授权，不说全国也算全省第一家。

我首先考虑的当然是Apache Cordova，这个大家都听说过。

我试验了一个月，结合其他部门使用IBM WorkLight经验，发现这不适合我。

首先它所谓跨平台，基于JSBridge的再次封装，如果要大量使用原生功能，必须自己写插件。

其次，所谓插件很多，实际上根本就不好用，不仅要我投入时间学习，比起原始功能开发，慢，我半个月搭好的框架，实际原生开发就一天能实现；

WorkLight还很特别，因为里面Apache Cordova版本比较老，插件还不能直接用命令行配置，需要自己配置。

最后，不得以，考虑是否用Android原生框架，后来想想，这样干也不行，因为公司，也可以说基本我们和其他公司都是java/.net web程序猿，

如果你用Android原生框架倒是省事了，但对于以后来说，加大了人员和维护成本。

综合上述实际，决定使用JSBridge 作为本次开发框架

首先说一句：不跨平台，不跨平台，你要跨平台自己选Apache Cordova，苹果常升级IOS，对不起，我们开发部门同事不和你一起加班改兼容性。

简介

Android JsBridge 就是用来在 Android app的原生 java 代码与 javascript 代码中架设通信（调用）桥梁的辅助工具。

形象点说就是HTML通过AJAX类似东西调用后台原生JAVA开放接口，这样前端同事只要完成界面，后台用原生java开发，你不会我也没辙了。

我选择了xesam的JsBridge 作为开发框架

https://github.com/xesam/JsBridge

至于怎么使用，我就不说了。

技巧：

技巧只有一个，就是怎么使用crosswalk，为什么要用这个呢？用过Cordova的朋友就知道了，早期Android使用webview而不是Chrome作为默认的浏览器内核，这样兼容性和性能很难让人满意。

怎么下载和集成crosswalk，我就不说了，直接下载官方网站的AA包用AS 引用就可以了。

官方网站：https://crosswalk-project.org/

那xesam的JsBridge如何进行修改呢？

修改如下:

需要修改 @JavaScriptInterface 所在的包是 import org.xwalk.core.JavascriptInterface;

要修改JsBridge，ServerProxy两个文件

原始：

package dev.xesam.android.web.jsbridge;import android.annotation.SuppressLint;
import android.webkit.WebView;import java.net.MalformedURLException;
import java.net.URL;/*** JsBridge. invoke js function.and dispatch callback* Created by xesamguo@gmail.com on 16-4-7.*/
public final class JsBridge {public static boolean DEBUG = false;private WebView mWebView;

package dev.xesam.android.web.jsbridge;import android.util.Log;
import android.webkit.JavascriptInterface;import java.util.HashMap;
import java.util.Map;

修改以后：这里写关键部分

package dev.xesam.android.web.jsbridge;import android.annotation.SuppressLint;
import android.webkit.WebView;import java.net.MalformedURLException;
import java.net.URL;/*** JsBridge. invoke js function.and dispatch callback* Created by xesamguo@gmail.com on 16-4-7.*/
public final class JsBridge {public static boolean DEBUG = false;private org.xwalk.core.XWalkView mWebView;

package dev.xesam.android.web.jsbridge;import android.util.Log;
import org.xwalk.core.JavascriptInterface;import java.util.HashMap;
import java.util.Map;/*** handle [js -> java] transaction* Created by xesamguo@gmail.com on 16-4-7.*/
class ServerProxy {public static final String JAVA_BRIDGE = "JavaExecutor";private JsBridge mJsBridge;private Map<String, ServerHandler> handlers = new HashMap<>();public ServerProxy(JsBridge mJsBridge) {this.mJsBridge = mJsBridge;}public void destroy() {handlers.clear();}/*** [js -> java]*/@JavascriptInterface

其他

在使用上还是要注意，所有操作必须要在xwalk 准备好以后才可以用：

public class MainActivity extends XWalkActivity implements MKOfflineMapListener {//浏览器org.xwalk.core.XWalkView vWebView;@Override/*** 所有的操作必须等到Walk准备好才可以*/protected void onXWalkReady() {//设置是否支持调试,大家估计不会忘记Chrome调试吧XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);//JS库挂钩jsBridge = new JsBridge(vWebView);JsBridge.DEBUG = true;vWebView.setUIClient(new XWalkUIClient(vWebView) {@Overridepublic void onPageLoadStarted(XWalkView view, String url) {super.onPageLoadStarted(view, url);}@Overridepublic boolean onJsAlert(XWalkView view, String url, String message, XWalkJavascriptResult result) {return super.onJsAlert(view, url, message, result);}@Overridepublic void onScaleChanged(XWalkView view, float oldScale, float newScale) {if (view != null) {view.invalidate();}super.onScaleChanged(view, oldScale, newScale);}@Overridepublic void onPageLoadStopped(XWalkView view, String url, LoadStatus status) {super.onPageLoadStopped(view, url, status);//JS库挂钩监听jsBridge.monitor(url);}@Overridepublic boolean onConsoleMessage(XWalkView view, String message, int lineNumber, String sourceId, ConsoleMessageType messageType) {Log.i("webView", message);Log.i("webView", String.valueOf(lineNumber));return super.onConsoleMessage(view, message, lineNumber, sourceId, messageType);}});//如果是原始JsBridge 需要修改 @JavaScriptInterface 所在的包是 import org.xwalk.core.JavascriptInterface;//JS库将监听挂钩jsBridge.register(new SqlHandle(this, luozhuangModule));//这里是你自己JS处理ClassvWebView.load("file:///android_asset/index.html", null);//加载完毕//..........}

其他问题：

1、怎么使用Chrome真机调试Html 页面

需要设置Android Debug=true，而且上面代码要用

XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);

至于原生webView怎么开，自己度娘吧。

使用Chrome真机调试Html 时候必须爬墙，因为调试那个页面工具在海外某网站，你懂得

2、错误
I/webView: Uncaught TypeError: JavaExecutor.onTransact is not a function

这个应该是WEBVIEW还没有初始化完毕（特别是用CrossWalk必须初始化），或者把JavascriptInterface混淆了，需要注意。

Android APP开发框架选择——JSBridge既个人心得和技巧相关推荐

Android APP架构心得
前言从JavaEE转到Android开发也2年多了,开发的项目也有4,5个了(公司项目),其中有3个项目前期都是自己独立开发,从一开始的毫无架构到现在对如何架构也有一点心得,所以在此分享出来,大家一 ...
Html5必看：教你如何选择移动APP开发框架
如何选择移动APP开发框架一直是困扰很多新手的难题,今天杭州APP开发小编就和大家一起分享一下HTML5 移动app开发过程中框架该如何选择?当然我们得先从下面几个方面来评估一个框架的优越性,然后再做 ...
android选择头像弹窗,Android App开发常用功能之用户头像选择-Go语言中文社区
前言现在的APP基本都有个人资料的填写,基本的都有头像的选择,支持拍照和从本地相册选择,剪切圆形头像的功能,现在用个小demo实现以下. 下面看一下效果图上代码: 主界面代码 package co ...
android 选择答题功能,Android APP编写简单答题器
本文为大家分享了Android APP编写的简单答题器,此答题器可以通过Next按钮选择下一题,新写题目的类Question,有两个成员变量. java代码: package com.android. ...
Android App开发常用功能之用户头像选择
前言现在的APP基本都有个人资料的填写,基本的都有头像的选择,支持拍照和从本地相册选择,剪切圆形头像的功能,现在用个小demo实现以下. 下面看一下效果图上代码: 主界面代码 package co ...
android+噪音测试,关于噪音测试App的选择与使用
关于噪音测试App的选择与使用 2015-11-26 20:06:53 119点赞 224收藏 63评论很多值友在写使用评测时都会对噪音大小进行测评,噪音污染在生活中无处不在,人们对噪声污染问题也越 ...
安居客 Android APP 走向平台化 | 开发者说·DTalk
本文原作者: 张磊BARON,原文发布于微信公众号: BaronTalk https://mp.weixin.qq.com/s/71VfmQ5ZyihgTwosMPbSmw 安居客 Android ...
高性能html5的app,hybrid app走向轻混剖析wex5开源高性能html5 app开发框架.docx
hybrid app走向轻混剖析wex5开源高性能html5 app开发框架 Hybrid App走向"轻混",剖析WeX5开源高性能HTML5 App开发框架4月23日上午,HT ...
安居客 Android App 走向平台化 | CSDN 博文精选
作者 | 张磊责编 | 屠敏出品 | CSDN博客安居客 Android App 距离上次的模块化/组件化重构已经两年多了,重构之后很好的支撑了两年多以来的业务发展.但这个世界总是在向前走的,没 ...

Android APP开发框架选择——JSBridge既个人心得和技巧

Android APP开发框架选择——JSBridge既个人心得和技巧相关推荐

最新文章

热门文章