JS与Native交互

2021-12-08 14:33:17 浏览数 (1)
混合式开发1：（离线包，所有模块都存放在App的包中）
将服务器的资源文件(CSS/JS/Html)，存放到Android 的 assets资源目录下或者本地SD卡都行的,
在WebView 中，

首先开启支持JS功能插件

代码语言：javascript复制
//这个主要解决加载网页不跳转到系统浏览器
webView.setWebViewClient(new WebViewClient());

webView.setBackgroundColor(Color.argb(0, 0, 0, 0));//设置背景颜色 透明

WebView.setWebContentsDebuggingEnabled(true);//这个是开启浏览器调试功能


WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true); //支持js

webSettings.setAllowFileAccess(true); // 允许访问文件

然后，WebView 读取你存放的SD卡资源或者assets资源（选其中一个就行）

1、读取asset资源

代码语言：javascript复制
//webView.loadUrl("file:///android_asset/rooster/index.html");

2、读取SD卡文件

代码语言：javascript复制
// webView.loadUrl("file:///mnt/sdcard/rooster/index2.html");

rooster 是我在Android下asset资源下存放index.html的文件夹名

==PS:每次更新代码的时候，进行差分对比，判断之前的版本跟现在的版本是否一致，不一致则下载最新版本的压缩包并解压到你指定文件目录，如果本地版本跟服务器版本一样，则不进行下载，这样就算网络差也可以正常使用一些资源，差不多是这个样子，也是目前好多公司采用的！==

JS与Native进行交互

好多资源都有介绍，这里不做过多介绍！

参考链接：在这里

混合式开发2：（通过WebView操作HTML）
代码语言：javascript复制
String htmlCode  = "<html><head><script src=file:///android_asset/rooster/js/index.js  /></script></head><body>123123</body></html>";

webView.loadDataWithBaseURL("file:///android_asset/", htmlCode, "text/html", "UTF-8", null);

直接拼接DOM元素，虽然可以直接拿到本地资源,但是太过于麻烦！

混合式开发3：（WebView读取本地资源JS文件）

也是我所希望的，因为我不想那么麻烦还需要去服务器对比资源以及一系列的问题，我只想简简单单的在webview中打开的页面，直接就可以拿到App的本地资源JS库，这样既可以减少网络的请求，也是基于网络不佳性能优化的一部分，不过另说的话，如果实在是想更新新的资源，就得进行差分对比进行更新下载最新资源包了！

一般你选择一个框架或者一个库的时候，比如Jquey或者Zepto,好几个版迭代下来，几乎不会改变这个库的，换句话说，就是比较稳定的，不经常修改的库，我们可以存放在App资源里边，只要页面放到这个Webview中，就可以拿到Jquery，查了半天资料也不知道该怎么弄，自己就瞎鼓捣，不知道对不对,但是确实是实现了！

==附上我的截图：==
==接下来，我附上我的Andtoid代码：==

MainActivity.java

代码语言：javascript复制
package com.example.yubai8.hybrid_app;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.WindowManager;
import android.webkit.JavascriptInterface;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.gms.appindexing.Action;
import com.google.android.gms.appindexing.AppIndex;
import com.google.android.gms.appindexing.Thing;
import com.google.android.gms.common.api.GoogleApiClient;

import java.io.BufferedReader;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.zip.CheckedInputStream;


public class MainActivity extends AppCompatActivity {

    /**
     * ATTENTION: This was auto-generated to implement the App Indexing API.
     * See https://g.co/AppIndexing/AndroidStudio for more information.
     */
    private GoogleApiClient client;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private WebView webView;

    private void init() {


        // 防止WebView 软键盘挡住输入框
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE |
                WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);


        //给Button加入点击事件
        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view) {
                webView.loadUrl("http://10.10.104.69:8020/rooster/index.html");//外网地址
            }
        });



        webView = (WebView) findViewById(R.id.webView);

        //这个主要解决加载网页不跳转到系统浏览器
        webView.setWebViewClient(new WebViewClient());
        WebView.setWebContentsDebuggingEnabled(true);//这个是开启浏览器调试功能
        webView.setBackgroundColor(Color.argb(0, 0, 0, 0));//设置背景颜色 透明
        webView.setWebViewClient(mWebViewClient);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); //支持js
        webSettings.setAllowFileAccess(true); // 允许访问文件

        //解决webview缓存问题
        /*if (Build.VERSION.SDK_INT >= 19) {
            webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        }*/

        //WebView加载web资源--读取项目路劲地址
        //webView.loadUrl("file:///android_asset/rooster/index.html");

        //读取SD卡文件
        // webView.loadUrl("file:///mnt/sdcard/treasure_yubai8/lend.html");

        //关闭Webview的时候,请记得销毁webview,以免造成内存泄漏
        //webView.destroy();


        webView.addJavascriptInterface(this, "test");//对应js中的test.xxx

        webView.loadUrl("http://10.10.104.69:8020/roota1as/index.html");//外网地址



    }


    private WebViewClient mWebViewClient = new WebViewClient() {
        @Override
        public void onPageStarted(final WebView view, String url, Bitmap favicon) {
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    String jsContent = assetFile2Str(view.getContext(), "rooster/js/zepto1.2.0.min.js");
                    String jsContent1 = assetFile2Str(view.getContext(), "rooster/js/index2.js");
                    view.loadUrl("javascript:"   jsContent);
                    view.loadUrl("javascript:"   jsContent1);
                }
            }, 100);
        }
    };


    public static String assetFile2Str(Context c, String urlStr) {
        InputStream in = null;
        try {
            in = c.getAssets().open(urlStr);
            BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(in));
            String line = null;
            StringBuilder sb = new StringBuilder();
            do {
                line = bufferedReader.readLine();
                if (line != null && !line.matches("^\s*\/\/.*")) {
                    sb.append(line);
                }
            } while (line != null);

            bufferedReader.close();
            in.close();

            return sb.toString();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (in != null) {
                try {
                    in.close();
                } catch (IOException e) {
                }
            }
        }
        return null;
    }


    @JavascriptInterface
    public void hello(String msg) {//对应js中xxx.hello("")
        Log.d("webview", "hello");
        Toast.makeText(this, msg, Toast.LENGTH_LONG).show();
    }


    @JavascriptInterface
    public void helloWorld(String msg) {//对应js中xxx.hello("")
        ;
        Toast.makeText(this, msg, Toast.LENGTH_LONG).show();
    }


}

PS：三个方法，三个选择，选用那个都行，如果可以,我觉得你需用第二个比较合适，也

不会出现太大的差错，况且好多公司也在使用，希望可以帮到你，另外有什么高见，

请提出来！

webview android

0 人点赞