JS与Native交互

不念不忘少年蓝@ 2022-07-11 07:11 236阅读 0赞

#### **混合式开发1：（离线包，所有模块都存放在App的包中）** ####

##### 将服务器的资源文件(CSS/JS/Html)，存放到Android 的 `assets`资源目录下或者本地SD卡都行的, #####

#### 在WebView 中， ####

**首先开启支持JS功能插件**

//这个主要解决加载网页不跳转到系统浏览器
    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资源**

//webView.loadUrl("file:///android_asset/rooster/index.html");

**2、读取SD卡文件**

// webView.loadUrl("file:///mnt/sdcard/rooster/index2.html");

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

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

#### JS与Native进行交互 ####

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

参考链接：[在这里][Link 1]

--------------------

#### **混合式开发2：（通过WebView操作HTML）** ####

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，查了半天资料也不知道该怎么弄，自己就瞎鼓捣，不知道对不对,但是确实是实现了！

#### ==附上我的截图：== ####

![这里写图片描述][SouthEast]

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

**MainActivity.java**

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：三个方法，三个选择，选用那个都行，如果可以,我觉得你需用第二个比较合适，也

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

请提出来！

[Link 1]: http://blog.csdn.net/qq_16559905/article/details/50623069
[SouthEast]: /images/20220711/45dd1b5e0d4b43b48b9b881b42950035.png