详解JS与APP原生控件交互

package com.chinaonenet.mywebview;
import android.annotation.suppresslint;
import android.app.activity;
import android.os.bundle;
import android.os.handler;
import android.view.view;
import android.view.view.onclicklistener;
import android.webkit.websettings;
import android.webkit.webview;
import android.widget.button;
/**
 * suppresslint一定要加上去！！！
 * 低版本可能没问题，高版本js铁定调不了android里面的方法
 */
@suppresslint("setjavascriptenabled")
public class mainactivity extends activity {
 private button button1,button2;
 private webview mwebview;
 private mywebviewclient wvclient;
 private websettings websettings;
 private mywebchromeclient chromeclient;
 //封装接收js调用android的方法类
 private jsobject jsobject;
 //异步请求
 private handler mhandler = new handler();
 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);
 init();
 initview();
 setbutton();
 }
 private void setbutton() {
 //无参调用
 button1.setonclicklistener(new onclicklistener() {
  @override
  public void onclick(view v) {
  mhandler.post(new runnable() {
   @override
   public void run() {
   mwebview.loadurl("javascript:shownomessage()");
   }
  });
  }
 });
 //有参调用
 button2.setonclicklistener(new onclicklistener() {
  @override
  public void onclick(view v) {
  mhandler.post(new runnable() {
   @override
   public void run() {
   mwebview.loadurl("javascript:showmessage('顺带给js传个参数')");
   }
  });
  }
 });
 }
 private void init() {
 mwebview = (webview) findviewbyid(r.id.webview);
 button1 = (button)findviewbyid(r.id.button1);
 button2 = (button)findviewbyid(r.id.button2);
 wvclient = new mywebviewclient();
 chromeclient = new mywebchromeclient();
 jsobject = new jsobject(mainactivity.this); 
 }
 private void initview() {
 websettings = mwebview.getsettings();
 websettings.setjavascriptenabled(true);
 websettings.setbuiltinzoomcontrols(true);
 websettings.setsavepassword(false);
 //支持多种分辨率，需要js网页支持
 websettings.setuseragentstring("mac os");
 websettings.setdefaulttextencodingname("utf-8");
 //显示本地js网页
 mwebview.loadurl("file:///android_asset/test.html");
 mwebview.setwebviewclient(wvclient);
 mwebview.setwebchromeclient(chromeclient);
 //注意第二个参数android，这个是js网页调用android方法的一个类似id的东西
 mwebview.addjavascriptinterface(jsobject, "android");
 }
}

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
tools:context="com.chinaonenet.mywebview.mainactivity" >
 <button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignparentleft="true"
 android:text="无参" />
 <button
 android:id="@+id/button2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignparentright="true"
 android:text="有参" />
 <webview
 android:id="@+id/webview"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_alignparentleft="true"
 android:layout_alignparentright="true"
 android:layout_below="@+id/button2" />
 <textview
 android:id="@+id/textview1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignbaseline="@+id/button1"
 android:layout_alignbottom="@+id/button1"
 android:layout_centerhorizontal="true"
 android:text="js与android交互" />
</relativelayout>

package com.chinaonenet.mywebview;
import org.json.jsonarray;
import org.json.jsonexception;
import android.content.context;
import android.content.intent;
import android.net.uri;
import android.webkit.javascriptinterface;
import android.widget.toast;
/**
 * js调用android的方法
 * @javascriptinterface仍然必不可少
 */
public class jsobject {
 private context context;
 public jsobject(context context){
 this.context = context;
 }
 //js调用无参方法
 @javascriptinterface
 public void callnull(){
 toast.maketext(context, "jscallandroid", toast.length_short).show();
 }
 //js调用有参方法
 @javascriptinterface
 public void callmessage(string data){
 toast.maketext(context, data, toast.length_short).show();
 }
 //js调用有参方法，参数类型：json
 @javascriptinterface
 public void calljson(string data) throws jsonexception{
 jsonarray jsonarray = new jsonarray(data);
 toast.maketext(context, jsonarray.tostring(), toast.length_short).show();
 }
 //js调用有参方法，参数类型：json，获取电话号码拨打
 @javascriptinterface
 public void callphone(string data){
 context.startactivity(new intent(intent.action_call, uri.parse("tel:" + data)));
 }
}

<style>
 .main-wrap ul {
 width: 100%;
 display: inline-block;
 padding-top: 20px;
 }
 .main-wrap ul li {
  float: left;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  margin-bottom: 20px;
  background-color: #00d000;
  color: #fff;
  text-align: center;
  cursor: pointer;
 }
  .main-wrap ul li:active {
  opacity: 0.8;
  }
</style>
<div class="main-wrap">
 <ul class="postandroid">
 <li onclick="jscallandroid('1')">不传参数调用原生控件</li>
 <li onclick="jscallandroid('2')">传参数调用原生控件</li>
 <li onclick="jscallandroid('3')">以json格式传参数调用原生控件</li>
 <li onclick="jscallandroid('4')">调用打电话服务</li>
 </ul>
</div>
<script>
 function jscallandroid(rel) {
 switch(rel){
  case "1":
  android.callnull();
  break;
  case "2":
  android.callmessage("javascript操作android原生");
  break;
  case "3":
  var json = "[{\"name\":\"满艺网\", \"phone\":\"4008366069\"}]";
  android.calljson(json);
  break;
  case "4":
  android.callphone("4008366069");
  break;
 }
 }
 function shownomessage() {
 alert("android无参调用");
 }
 function showmessage(data) {
 alert("android有参调用-data:" + data);
 }
</script>

import uikit
import javascriptcore
class viewcontroller: uiviewcontroller {
 var context = jscontext()
 var jscontext: jscontext?
 @iboutlet weak var webview: uiwebview!
 override func viewdidload() {
 super.viewdidload()
 webview.delegate = self//初始化webview
 loadjs()
 }
 /**
 *加载html页面
 */
 func loadjs() {
 let str = nsbundle.mainbundle().pathforresource("test", oftype: "html")
 let request = nsurlrequest(url: nsurl(string: str!)!)
 webview.loadrequest(request)
 }
 //swift 调用js 方法 （无参数）
 @ibaction func swift_js_pargram(sender: anyobject) {
 self.context.evaluatescript("swift_js1()")
 //self.webview.stringbyevaluatingjavascriptfromstring("swift_js1()") //此方法也可行
 }
 //swift 调用js 方法 （有参数）
 @ibaction func swift_js_nopargam(sender: anyobject) {
 self.context.evaluatescript("swift_js2('ios' ,'swift')")
 //self.webview.stringbyevaluatingjavascriptfromstring("swift_js2('oc','swift')") //此方法也可行
 }
 //js调用swift方法（无参）
 func menthod1() {
 print("js调用了无参数swift方法")
 let title = "操作提示";
 let msg = "js调用了无参数swift方法";
 //创建提示信息
 let alert = uialertcontroller(title: title, message: msg, preferredstyle: .alert)
 //确定按钮
 alert.addaction(uialertaction(title: "ok", style: .default, handler: nil))
 //显示提示框
 self.presentviewcontroller(alert, animated: true, completion: nil)
 }
 //js调用swift方法（有参数）
 func menthod2(str1: string, str2: string) {
 print("js调用了有参数swift方法:参数为\(str1),\(str2)")
 //创建提示信息
 let alert = uialertcontroller(title: str1, message: str2, preferredstyle: .alert)
 //确定按钮
 alert.addaction(uialertaction(title: "ok", style: .default, handler: nil))
 //显示提示框
 self.presentviewcontroller(alert, animated: true, completion: nil)
 }
 func webview(webview: uiwebview, didfailloadwitherror error: nserror) {
 print(error)
 }
}
//js调用swift方法注入
extension viewcontroller: uiwebviewdelegate {
 func webview(webview: uiwebview, shouldstartloadwithrequest request: nsurlrequest, navigationtype: uiwebviewnavigationtype) -> bool {
 let str = nsbundle.mainbundle().pathforresource("test", oftype: "html")
 let request = nsurlrequest(url: nsurl(string: str!)!)
 let connecntion = nsurlconnection(request: request, delegate: self)
 connecntion?.start()
 return true
 }
 func webviewdidstartload(webview: uiwebview) {
 print("webviewdidstartload----")
 }
 func webviewdidfinishload(webview: uiwebview) {
 self.context = webview.valueforkeypath("documentview.webview.mainframe.javascriptcontext") as! jscontext
 //js调用了无参数swift方法---menthod1
 let temp1: @convention(block) () ->() = {
  self.menthod1()
 }
 //forkeyedsubscript:参数为js调用方法名
 self.context.setobject(unsafebitcast(temp1, anyobject.self), forkeyedsubscript: "test1")
 //js调用了有参数swift方法---menthod2
 let temp2: @convention(block) () ->() = {
  let array = jscontext.currentarguments()//这里接到的array中的内容是jsvalue类型
  for object in array {
  print("参数：" + object.tostring())
  }
  self.menthod2(array[0].tostring(), str2: array[1].tostring())
 }
 //forkeyedsubscript:参数为js调用方法名
 self.context.setobject(unsafebitcast(temp2, anyobject.self), forkeyedsubscript: "test2")
 //模型注入的方法
 let model = jsobjcmodel()
 model.controller = self
 model.jscontext = context
 self.jscontext = context
 //这一步是将ocmodel这个模型注入到js中，js就可以通过ocmodel调用我们公暴露的方法了。
 self.jscontext?.setobject(model, forkeyedsubscript: "ocmodel")
 let url = nsbundle.mainbundle().urlforresource("test", withextension: "html")
 self.jscontext?.evaluatescript(try? string(contentsofurl: url!, encoding: nsutf8stringencoding));
 self.jscontext?.exceptionhandler = {
  (context, exception) in
  print("exception @", exception)
 }
 }
}
@objc protocol javascriptswiftdelegate: jsexport {
 func callsystemcamera()
 func showalert(title: string, msg: string)
 func callwithdict(dict: [string: anyobject])
 func jscallobjcandobjccalljswithdict(dict: [string: anyobject])
}
//js调用swift模型方法
@objc class jsobjcmodel: nsobject, javascriptswiftdelegate {
 weak var controller: uiviewcontroller?
 weak var jscontext: jscontext?
 //js无参调用swift方法并返回处理结果
 func callsystemcamera() {
 print("js call objc method: callsystemcamera");
 let jsfunc = self.jscontext?.objectforkeyedsubscript("jsfunc");
 jsfunc?.callwitharguments([]);
 }
 //js有参调用swift方法
 func showalert(title: string, msg: string) {
 print("js call objc method: showalert, title: %@", title, " msg: %@", msg)
 dispatch_async(dispatch_get_main_queue()) { () -> void in
  let alert = uialertcontroller(title: title, message: msg, preferredstyle: .alert)
  alert.addaction(uialertaction(title: "ok", style: .default, handler: nil))
  self.controller?.presentviewcontroller(alert, animated: true, completion: nil)
 }
 }
 //js有参调用swift方法
 func callwithdict(dict: [string : anyobject]) {
 print("js call objc method: callwithdict, args: %@", dict)
 let alert = uialertcontroller(title: "消息提示", message: "查看控制台打印信息", preferredstyle: .alert)
 alert.addaction(uialertaction(title: "ok", style: .default, handler: nil))
 self.controller?.presentviewcontroller(alert, animated: true, completion: nil)
 }
 //js有参调用swift方法并返回处理结果
 func jscallobjcandobjccalljswithdict(dict: [string : anyobject]) {
 print("js call objc method: jscallobjcandobjccalljswithdict, args: %@", dict)
 let jsparamfunc = self.jscontext?.objectforkeyedsubscript("jsparamfunc");
 let dict = nsdictionary(dictionary: ["age": 2, "height": 178, "name": "满艺网"])
 jsparamfunc?.callwitharguments([dict])
 }
}
extension viewcontroller: nsurlconnectiondelegate,nsurlconnectiondatadelegate {
 func connection(connection: nsurlconnection, didreceivedata data: nsdata) {
 print("didreceivedata\(data)")
 }
 func connection(connection: nsurlconnection, willsendrequest request: nsurlrequest, redirectresponse response: nsurlresponse?) -> nsurlrequest? {
 print("request:\(request)response:\(response)")
 return request
 }
 func connection(connection: nsurlconnection, didfailwitherror error: nserror) {
 
 }
}
//mark: - allowsanyhttpscertificateforhost
extension nsurlrequest {
 static func allowsanyhttpscertificateforhost(host: string) -> bool {
 return true
 }
}

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>jsandios</title>
 </head>
 <style>
 .main-wrap ul {
  width: 100%;
  display: inline-block;
  padding-top: 20px;
 }
 .main-wrap ul li {
  float: left;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  margin-bottom: 20px;
  background-color: #00d000;
  color: #fff;
  text-align: center;
  cursor: pointer;
 }
 .main-wrap ul li:active {
  opacity: 0.8;
 }
 </style>
 <body bgcolor="#dddd">
  <div class="main-wrap">
  <ul class="postandroid">
   <li onclick="js_swift1()">不传参数调用原生控件（常规方式）</li>
   <li onclick="js_swift2()">传参数调用原生控件（常规方式）</li>
   <li onclick="js_swift3()">不传参数调用原生控件,带返回结果处理（模型注入）</li>
   <li onclick="js_swift4()">传参数调用原生控件（模型注入）</li>
   <li onclick="js_swift5()">传对象格式参数调用原生控件（模型注入）</li>
   <li onclick="js_swift6()">传对象格式参数调用原生控件,带返回结果处理（模型注入）</li>
  </ul>
  </div>
  <script>
  function swift_js1() {
  alert("swift调用js无参方法");
  }
  function swift_js2(name,msg) {
  alert("swift调用js有参方法，name:"+name+";mes:"+msg);
  }
  function js_swift1() {
  test1();
  }
  function js_swift2() {
  test2('jscallswift', 'js调用swift方法');
  }
  function js_swift3() {
  ocmodel.callsystemcamera();
  }
  //js调用swift方法，处理返回结果
  function jsfunc() {
  alert('js调用swift方法，无返回值结果处理');
  }
  function js_swift4() {
  ocmodel.showalertmsg('js send title', 'js send message');
  }
  function js_swift5() {
  ocmodel.callwithdict({ 'name': 'testname', 'age': 10, 'height': 170 });
  }
  function js_swift6() {
ocmodel.jscallobjcandobjccalljswithdict({ 'name': 'testname', 'age': 10, 'height': 170 });
  }
  //注意哦，如果js写错，可能在oc调用js方法时，都会出错哦。
  function jsparamfunc (argument) {
  alert("js调用swift方法，有返回值处理结果---name:"+argument['name'] + " age:" + argument['age']);
  }
  </script>
 </body>
</html>