[关闭]
@tianfangye 2017-05-27T03:28:21.000000Z 字数 10792 阅读 3302

NativeAPI

简介

NativeAPI 用于 JavaScript 与 Native Code 双向通信。

创建过程

  1. 在 APP 中打开一个 WebView。
  2. Native Code 向 WebView 添加全局的 NativeAPI 对象，此对象应当包含 sendToNative 方法，JavaScript 通过调用此方法向 Native 发送消息。
  3. WebView 中的 JavaScript 在 NativeAPI 对象上注册 sendToJavaScript 方法，Native 通过调用此方法此方法向 JavaScript 发送消息。

消息格式

JSON-RPC 2.0

接口约定

params 为 0、1、123 之类数字时，类型全部用 String（即使用 "0"、"1"、"123" 这样的字符串）。

使用 Scheme URL 注入 Native 部分 （已废弃）

  1. if ( /hbgj/i.test(appName) ) {
  2.   window.location.href = "openetjs://start?type=nativeapi";
  3. } else if ( /gtgj/i.test(appName) ) {
  4.   window.location.href = "gtgj://start?type=nativeapi";
  5. }

由 Native 提供的方法

confirm

method

params

result

JS -> Native: {method: "confirm", params: { title: "test", message: "hello world", yes_btn_text: "是的", no_btn_text: "不是" }, id: 1}
Native -> JS: {result {value: 0, YES:1, NO: 0, CLOSE: 2}, id: 1}

  1. // invoke 方法是对 sendToNative 的封装
  2. NativeAPI.invoke(
  3.   "confirm", {
  4.     title: "提示",
  5.     message: "message",
  6.     yes_btn_text: "~确定~",
  7.     no_btn_text: "~取消~"
  8.   },
  9.   function(err, data) {
  10.     if (err) {
  11.       return handleError(err);
  12.     }
  13.     switch (data.value) {
  14.       case data.YES:
  15.         echo("你点了确定按钮");
  16.         break;
  17.       case data.NO:
  18.         echo("你点了取消按钮");
  19.         break;
  20.       case data.CLOSE:
  21.         echo("你使用其他方式关闭了弹窗");
  22.         break;
  23.       default:
  24.         echo("未知动作，返回code是[" + data.value + "]");
  25.     }
  26.   }
  27. );

alert

method

params

result

JS -> Native: {method: "alert", params: { title: 123, message: "msg", btn_text: "是的" }, id: 1}
Native -> JS: {result {value: 0, YES:0, CLOSE: 1}, id: 1}

  1. NativeAPI.invoke(
  2.   "alert", {
  3.     title: "这是标题",
  4.     message: "这是消息",
  5.     btn_text: "确定按钮"
  6.   },
  7.   function(err, data) {
  8.     if (err) {
  9.       return handleError(err);
  10.     }
  11.     switch (data.value) {
  12.       case data.YES:
  13.         echo("你点了确定按钮");
  14.         break;
  15.       case data.CLOSE:
  16.         echo("你使用其他方式关闭了弹窗");
  17.         break;
  18.       default:
  19.         echo("未知动作，返回code是[" + data.value + "]");
  20.     }
  21.   }
  22. );

close

method

closeAll

method

createWebView

method

params

  1. NativeAPI.invoke("createWebView", {
  2.   url: window.location.origin + "xxx",
  3.   controls: [
  4.     {
  5.       type: "title",
  6.       text: "Native Page 2"
  7.     }
  8.   ]
  9. });

back

method

JS -> Native: {method: "back", params:null}

webViewCallback

method

params

JS -> Native: {method: "webViewCallback", params: {url: "/index.html" }}

getUserInfo

method

params

result

error

getDeviceInfo

描述：获取当前的客户端信息

method

result

makePhoneCall

method

params

result

updateTitle

method

params

storage

method

params

result

confirmUnload

method

params

updateHeaderRightBtn

method

params

setNavigationBarVisible

method

params

setNavigationBarTintColor

method

params

configNavigationBar

method

params

clearAppCache

JS -> Native: {method: "clearAppCache", params: null }

isSupported

method

params

result

selectContact

method

params

result

setOrientation

method

params

setGestureBack

method

params

sendSMS

method

params

result

getCurrentPosition

method

result

scanBarcode

method

result

sharePage

method

params

result

trackEvent

method

params

startPay

method

params

result

  1. NativeAPI.invoke("startPay", {
  2.   quitpaymsg: "您尚未完成支付，如现在退出，可稍后进入“个人中心->其他订单”完成支付。确认退出吗？, ",
  3.   title: "商城订单",
  4.   price: "145",
  5.   orderid: "150513188189022",
  6.   productdesc: "接机订单支付",
  7.   subdesc: "专车接送",
  8.   url: "http://jp.rsscc.com/Fmall/rest/client/v4/pay.htm?orderid=150513188189022",
  9.   canceltype: -1
  10. }, function(err, data) {
  11.   switch (data.value) {
  12.     case data.SUCC:
  13.       alert("支付成功， 跳转详情");
  14.       break;
  15.     case data.FAIL:
  16.       alert("支付失败");
  17.       break;
  18.     case data.CANCEL:
  19.       alert("您取消了支付");
  20.       break;
  21.     case data.PENDING:
  22.       alert("目前为支付待确认状态");
  23.       break;
  24.     default:
  25.       alert("支付异常");
  26.   }
  27. });

loading

method

params

result

copyToClipboard

method

params

result

searchMap

method

params

result

showMap

method

params

showMapTracking

method

params

postNotification

method

params

login

method

params

result

logout

method

result

getWeixinCode

method

result

createHttpRequest

method

params

result

saveImage

method

params

result

由 JavaScript 提供的方法

resume

method

params

Native -> JS: {method: "resume", params: {prevUrl: "a.html", nextUrl: "c.html"}}

back

method

result

流程说明：点返回按钮——N 调用 J 的 back——J 返回给 N {preventDefault: true/false}——N 根据 preventDefault 值决定是否执行返回操作。

Native -> JS: {method: "back", params:null, id: 1}
JS -> Native: {result: {preventDefault: false}, id: 1}

headerRightBtnClick

params

Native -> JS: {method: "headerRightBtnClick", params: null}
Native -> JS: {method: "headerRightBtnClick", params: { "foo": "bar"}}

  1. // 先调用 updateHeaderRightBtn 设置右边按钮的文字或图片，再调用 headerRightBtnClick 设置点击了右侧按钮后做什么。
  2. rightButtonText: function() {
  3.   var self = this;
  5.   NativeAPI.invoke("updateHeaderRightBtn", {
  6.     action: "show",
  7.     text: "分享",
  8.     data: {
  9.       list: [1, 2, 3]
  10.     }
  11.   }, function(err, data) {
  12.     if (err) {
  13.       return handleError(err);
  14.     }
  16.     echo(JSON.stringify(data));
  17.   });
  19.   NativeAPI.registerHandler("headerRightBtnClick", function(data) {
  20.     echo(JSON.stringify(data));
  21.     self.share();
  22.   });
  23. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注