Android 总结之 WebView 与 Javascript 交互

demiHe1982 4年前
   <h3><strong>前言:</strong></h3>    <p>最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App、Web App、Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用到两者之间传递参数的情况,今天就来总结一下两者之间如何互相调用。本篇主要介绍WebView与Javascript交互数据。</p>    <h3><strong>WebView与Javascript交互:</strong></h3>    <p>WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具体实现以下面例子为主:</p>    <p>1.)mainfest.xml中加入网络权限</p>    <pre>  <code class="language-java"><uses-permission android:name="android.permission.INTERNET"/>  </code></pre>    <p>2.)WebView开启支持JavaScript</p>    <pre>  <code class="language-java">  mWebView.getSettings().setJavaScriptEnabled(true);    </code></pre>    <p>3.)简单的H5网页实现,主要实现actionFromNative()、actionFromNativeWithParam(String str),放在assets文件下</p>    <pre>  <code class="language-java"><html>  <head>      <meta http-equiv="Content-Type" content="text/html;charset=utf-8">      <script type="text/javascript">      function actionFromNative(){           document.getElementById("log_msg").innerHTML +=               "<br\>Native调用了js函数";      }        function actionFromNativeWithParam(arg){           document.getElementById("log_msg").innerHTML +=               ("<br\>Native调用了js函数并传递参数:"+arg);      }        </script>  </head>  <body>  <p>WebView与Javascript交互</p>  <div>      <button onClick="window.wx.actionFromJs()">点击调用Native代码</button>  </div>  <br/>  <div>      <button onClick="window.wx.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button>  </div>  <br/>  <div id="log_msg">调用打印信息</div>  </body>  </html>  </code></pre>    <p>4.)Native实现与JS交互函数:actionFromJs()、actionFromJsWithParam()</p>    <pre>  <code class="language-java">public class MainActivity extends Activity {      private WebView mWebView;      private TextView logTextView;        @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.main);          mWebView = (WebView) findViewById(R.id.webview);          // 启用javascript          mWebView.getSettings().setJavaScriptEnabled(true);          // 从assets目录下面的加载html          mWebView.loadUrl("file:///android_asset/wx.html");          mWebView.addJavascriptInterface(this, "wx");          logTextView = (TextView) findViewById(R.id.text);          Button button = (Button) findViewById(R.id.button);          button.setOnClickListener(new Button.OnClickListener() {              public void onClick(View v) {                  // 无参数调用                  mWebView.loadUrl("javascript:actionFromNative()");                  // 传递参数调用                  mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");              }          });        }        @android.webkit.JavascriptInterface      public void actionFromJs() {          runOnUiThread(new Runnable() {              @Override              public void run() {                  Toast.makeText(MainActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();                  String text = logTextView.getText() + "\njs调用了Native函数";                  logTextView.setText(text);              }          });      }        @android.webkit.JavascriptInterface      public void actionFromJsWithParam(final String str) {          runOnUiThread(new Runnable() {              @Override              public void run() {                  Toast.makeText(MainActivity.this, "js调用了Native函数传递参数:" + str, Toast.LENGTH_SHORT).show();                  String text = logTextView.getText() +  "\njs调用了Native函数传递参数:" + str;                  logTextView.setText(text);              }          });        }  }  </code></pre>    <p>mWebView.addJavascriptInterface(this, "wx" );相当于添加一个js回调接口,然后给这个起一个别名,我这里起的名字wx(微信哈哈)。 @android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的,在4.2以后才有的。</p>    <p>5.)布局文件实现</p>    <pre>  <code class="language-java"><?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:orientation="vertical">        <WebView          android:id="@+id/webview"          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="1"/>        <TextView android:id="@+id/text"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:text=""/>        <Button          android:id="@+id/button"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:text="Native调用js函数"/>    </LinearLayout>  </code></pre>    <p>5.)代码简单解说</p>    <p>(1.)js(HTML)访问Android(Java)端代码是通过jsObj对象实现的,调用jsObj对象中的函数,如: window.jsObj.actionFromJs(),这里的jsObj就是Native中添加接口的别名</p>    <p>(2.)Android(Java)访问js(HTML)端代码是通过loadUrl函数实现的,访问格式如:mWebView.loadUrl("javascript:actionFromNative()");</p>    <p>demo运行截图:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/18c24e36547b8c338225e74504278455.jpg"></p>    <h3><strong>总结:</strong></h3>    <p>这里简单的实现了Js与Native的交互,后期会抽空看下WebViewJavascriptBridge这个开源框架。</p>    <h3> </h3>    <p> </p>    <p>来自:http://www.cnblogs.com/whoislcj/p/5980240.html</p>    <p> </p>