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) {

            @Override
            public void onPageLoadStarted(XWalkView view, String url) {

                super.onPageLoadStarted(view, url);
            }

            @Override
            public boolean onJsAlert(XWalkView view, String url, String message, XWalkJavascriptResult result) {

                return super.onJsAlert(view, url, message, result);
            }

            @Override
            public void onScaleChanged(XWalkView view, float oldScale, float newScale) {
                if (view != null) {
                    view.invalidate();
                }
                super.onScaleChanged(view, oldScale, newScale);
            }

            @Override
            public void onPageLoadStopped(XWalkView view, String url, LoadStatus status) {
                super.onPageLoadStopped(view, url, status);
                //JS库挂钩监听
                jsBridge.monitor(url);
            }

            @Override
            public 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处理Class
        vWebView.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混淆了，需要注意。