HyBridApp随笔

Native基本配置

image

1.原生端调用web方法必须挂在到web端的windwo对象下面方法。

    /**
     * 原生端调用 web 方法，方法必须是挂载到 web 端 window 对象下面的方法。
     * 调用 JS 中的方法：onFunction1
     */
    public void onJSFunction1 (View v) {
        mWebView.evaluateJavascript("javascript:onFunction('android调用JS方法')", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String s) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setMessage(s);
                builder.setNegativeButton("确定", null);
                builder.create().show();
            }
        });
    }

2.在MyApplication中初始化WebView

//x5内核初始化接口(使用腾信的X5组件减少不同安卓WebView的差异)
QbSdk.initX5Environment(getApplicationContext(),  cb);

3.在X5WebView（使用腾信的x5内核）配置WebWiew的基础配置

public class X5WebView extends WebView {
    private Context mContext;

    public X5WebView(Context context) {
        super(context);
        init(context);
    }
    public X5WebView(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        init(context);
    }

    public X5WebView(Context context, AttributeSet attributeSet, int i) {
        super(context, attributeSet, i);
        init(context);
    }

    public X5WebView(Context context, AttributeSet attributeSet, int i, boolean b) {
        super(context, attributeSet, i, b);
        init(context);
    }

    public X5WebView(Context context, AttributeSet attributeSet, int i, Map<String, Object> map, boolean b) {
        super(context, attributeSet, i, map, b);
        init(context);
    }

    private void init (Context context) {
        this.mContext = context;
        /**
         * 基础配置
         */
        initWebViewSettings();
        initWebViewClient();
        initChromeClient();
        /**
         * 构建 JSBridge 对象，这里提供的 JSBridge 字符串会被挂载到
         * 网页中的 window 对象下面。
         *
         * window.AndroidJSBridge
         */
        addJavascriptInterface(
                new MyJaveScriptInterface(mContext, this),
                "AndroidJSBridge");
    }

    /**
     * 对 webview 进行基础配置
     */
    private void initWebViewSettings () {
        WebSettings webSettings = getSettings();
        /**
         * 允许加载的网页执行 JavaScript 方法
         */
        webSettings.setJavaScriptEnabled(true);
        /**
         * 设置网页不允许缩放
         */
        webSettings.setSupportZoom(false);
        webSettings.setBuiltInZoomControls(false);
        webSettings.setDisplayZoomControls(true);
        /**
         * 设置网页缓存方式为不缓存，方便我们的调试
         */
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    }

    /**
     * 设置 webviewClient ，如果不进行这层设置，则网页打开默认会使用
     * 系统中的浏览器进行打开，而不是在本 APP 中进行打开。
     */
    private void initWebViewClient () {
        setWebViewClient(new WebViewClient(){
        });
    }

    /**
     * 监听网页中的url加载事件
     */
    private void initChromeClient () {
        setWebChromeClient(new WebChromeClient(){

            /**
             * alert()
             * 监听alert弹出框，使用原生弹框代替alert。
             */
            @Override
            public boolean onJsAlert(WebView webView, String s, String s1, JsResult jsResult) {

                    AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
                    builder.setMessage(s1);
                    builder.setNegativeButton("确定", null);
                    builder.create().show();
                jsResult.confirm();

                return true;
            }
        });
    }
}

4.MyJaveScriptInterface。Native提供给web端方法

    /**
     *在X5WebView中使用
     * addJavascriptInterface(
                new MyJaveScriptInterface(mContext, this),
                "AndroidJSBridge");
  
     *在Web端通过调用 window.AndroidJSBridge.androidTestFunction1('xxxx')
     * 调用该方法，APP 会弹出一个 Alert 对话框，
     * 对话框中的内容为 JavaScript 传入的字符串
     * @param str  android 只能接收基本数据类型参数
     *             ，不能接收引用类型的数据（Object、Array）。
     *             JSON.stringify(Object) -> String
     */
    @JavascriptInterface
    public void androidTestFunction1 (String str) {
        AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
        builder.setMessage(str);
        builder.setNegativeButton("确定", null);
        builder.create().show();
    }

    /**
     * 调用该方法，方法会返回一个返回值给 javaScript 端
     * @return 返回值的内容为："androidTestFunction2方法的返回值"
     */
    @JavascriptInterface
    public String androidTestFunction2 () {
        return "androidTestFunction2方法的返回值";
    }

在web端调用的Native的方法，传入的参数只能为基础类型