[关闭]
@njy 2018-04-11T06:31:37.000000Z 字数 16388 阅读 1285

NativeAPI

前端 新浪彩通 NativeAPI

简介

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

创建过程

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

  1. var u = navigator.userAgent;
  2. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  3. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  5. var send = function(message) {
  6.   window.console.log("javascript -> native: " + JSON.stringify(message));
  7.   if (isAndroid) {
  8.     // android
  9.     window.NativeAPI.sendToNative(JSON.stringify(message));
  10.   } else if (isiOS) {
  11.     // ios
  12.     window.webkit.messageHandlers.NativeAPI.postMessage(JSON.stringify(message))
  13.   }
  14. };
  15. exports.invoke = function(method, params, callback) {
  16.   var message = {
  17.     jsonrpc: "2.0",
  18.     method: method,
  19.     params: params
  20.   };
  21.   var id;
  23.   if (callback) {
  24.     id = "jsonp_" + idCounter;
  25.     idCounter++;
  27.     callbacks[id] = callback;
  28.     message.id = id;
  29.   }
  30.   send(message);
  31. };

3.WebView 中的 JavaScript 在 NativeAPI 对象上注册 sendToJavaScript 方法，Native 通过调用此方法此方法向 JavaScript 发送消息。

  1. window.NativeAPI.sendToJavaScript = function(message) {
  2.   window.console.log("native -> javascript: " + message);
  3.   try {
  4.     message = JSON.parse(message);
  5.   } catch (ex) {
  6.     return send({
  7.       jsonrpc: "2.0",
  8.       error: JSON_RPC_ERROR.PARSE_ERROR,
  9.       id: null
  10.     });
  11.   }
  12.   if (message.id) {
  13.     handleCallback(message);
  14.   }
  15. };

消息格式

JSON-RPC 2.0

语法：
--> 表示数据发送到服务器端
<-- 表示数据发送到客户端
位置参数形式的rpc调用：
rpc call with positional parameters:
--> {"jsonrpc":"2.0", "method": "subtract", "params":[42, 23], "id": 1}
<-- {"jsonrpc": "2.0", "result": 19,"id": 1}

  1. var message = {
  2.     jsonrpc: "2.0",
  3.     method: "confirm",
  4.     params: { title: "", message: "", yes_btn_text: "", no_btn_text: ""},
  5.     id: "jsonp_1"
  6.   };

接口约定

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
  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

webViewCallback

method
params

login

method
params
result

getUserInfo

method
params
result
error

getDeviceInfo

method
result

makePhoneCall

method
params
result

updateTitle

method
params

storage

method
params
result

updateHeaderRightBtn

method
params

clearAppCache

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

由 JavaScript 提供的方法

resume

method
params

back

method
result

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

headerRightBtnClick

params
  1. // 先调用 updateHeaderRightBtn 设置右边按钮的文字或图片，再调用 headerRightBtnClick 设置点击了右侧按钮后做什么。
  2. rightButtonText: function() {
  3.   var self = this;
  4.   NativeAPI.invoke("updateHeaderRightBtn", {
  5.     action: "show",
  6.     text: "分享",
  7.     data: {
  8.       list: [1, 2, 3]
  9.     }
  10.   }, function(err, data) {
  11.     if (err) {
  12.       return handleError(err);
  13.     }
  14.     echo(JSON.stringify(data));
  15.   });
  16.   NativeAPI.registerHandler("headerRightBtnClick", function(data) {
  17.     echo(JSON.stringify(data));
  18.     self.share();
  19.   });
  20. }

小炮NativeAPI前端实现

测试地址： http://lottery.sina.com.cn/test/NativeAPI.shtml?from=wap

native-api.js

  1. var _nativeAPI = {};
  2. (function(exports) {
  3. var JSON_RPC_ERROR = {
  4.   PARSE_ERROR: {
  5.     code: -32700,
  6.     message: "Parse error"
  7.   },
  8.   INVALID_REQUEST: {
  9.     code: -32600,
  10.     message: "Invalid Request"
  11.   },
  12.   METHOD_NOT_FOUND: {
  13.     code: -32601,
  14.     message: "Method not found"
  15.   },
  16.   INVALID_PARAMS: {
  17.     code: -32602,
  18.     message: "Invalid params"
  19.   },
  20.   INTERNAL_ERROR: {
  21.     code: -32603,
  22.     message: "Internal error"
  23.   }
  24. };
  26. var methods = {};
  27. var callbacks = {};
  28. var idCounter = 1;
  29. var send = function(message) {
  30.   window.console.log("javascript -> native: " + JSON.stringify(message));
  31.   window.NativeAPI.sendToNative(JSON.stringify(message));
  32. };
  33. var handleCallback = function(message) {
  34.   var callback = callbacks[message.id];
  35.   callbacks[message.id] = null;
  37.   if (!callback) {
  38.     return;
  39.   }
  40.   setTimeout(function() {
  41.     callback(message.error || null, message.result);
  42.   }, 0);
  43. };
  45. var handleInternalError = function(message) {
  46.   try {
  47.     message = JSON.parse(message);
  48.   } catch (ex) {
  49.     return;
  50.   }
  51.   if (message.id) {
  52.     handleCallback({
  53.       jsonrpc: "2.0",
  54.       error: JSON_RPC_ERROR.INTERNAL_ERROR,
  55.       id: message.id
  56.     });
  57.   }
  58. };
  60. window.NativeAPI = window.NativeAPI || {};
  61. // NativeAPI 会在 document.onload 的事件中被注册，而该事件会一直等到页面上图片加载结束之后才触发，所以 NativeAPI 速度非常慢。当发现身处 native 中的时候，将图片加载放在 NativeAPI 加载完毕之后进行。 客户端反馈iOS页面加载前会注入成功，android会在页面1/4左右加载完成
  63. if (!window.NativeAPI.sendToNative) {
  64.   (function() {
  65.     var buffer = [];
  66.     var timer = setTimeout(function() {
  67.       buffer.forEach(handleInternalError);
  68.       window.NativeAPI.sendToNative = handleInternalError;
  69.     }, 3000);
  70.     document.addEventListener("WebViewJavascriptBridgeReady", function() {
  71.       clearTimeout(timer);
  72.       setTimeout(function() {
  73.         // 注入的NativeAPI会覆盖前端定义的NativeAPI
  74.         buffer.forEach(window.NativeAPI.sendToNative);
  75.       }, 10);
  76.     }, false);
  77.     window.NativeAPI.sendToNative = function(message) {
  78.       buffer.push(message);
  79.     };
  80.     try{
  81.       // 加速 NativeAPI 注册
  82.       // var appName = util.cookie.getItem('appName');
  83.       // if (appName === 'hbgj') {
  84.       //   window.location.href = 'openetjs://start?type=nativeapi';
  85.       // } else if (appName === 'gtgj') {
  86.       //   window.location.href = 'gtgj://start?type=nativeapi';
  87.       // }
  88.     }catch(e){}
  89.   })();
  90. }
  92. window.NativeAPI.sendToJavaScript = function(message) {
  93.   window.console.log("native -> javascript: " + message);
  94.   try {
  95.     message = JSON.parse(message);
  96.   } catch (ex) {
  97.     return send({
  98.       jsonrpc: "2.0",
  99.       error: JSON_RPC_ERROR.PARSE_ERROR,
  100.       id: null
  101.     });
  102.   }
  104.   if (message.id) {
  105.     handleCallback(message);
  106.   }
  107. };
  109. exports.invoke = function(method, params, callback) {
  110.   var message = {
  111.     jsonrpc: "2.0",
  112.     method: method,
  113.     params: params
  114.   };
  115.   var id;
  116.   if (callback) {
  117.     id = "jsonp_" + idCounter;
  118.     idCounter++;
  119.     callbacks[id] = callback;
  120.     message.id = id;
  121.   }
  122.   send(message);
  123. };
  124. })(_nativeAPI);

需要实现的方法:

confirm

  1. _nativeAPI.invoke('confirm', confirmData, function(err, data) {
  2.     if (data.value === data.YES) {
  3.         ...
  4.     } else {
  5.         ...
  6.     }
  7. });

alert

  1. _nativeAPI.invoke('alert', alertData, function(err, data) {
  2.     ...
  3. });

close

  1. _nativeAPI.invoke('close');

createWebView

  1. _nativeAPI.invoke('createWebView', {url: mapUrl});

login

  1. _nativeAPI.invoke('login', null, function(err, data) {
  2.   if (err === null && (data.succ == '1' || data.value === data.SUCC)) {
  3.     ...
  4.   }
  5. });

getUserInfo

  1. _nativeAPI.invoke('getUserInfo', {}, function(err, data) {
  3.   // 管家自身已经登录
  4.   if (err == null && data.jwt) {
  5.     self.user = data;
  6.   } else {
  7.     // 没有登录，登录检测到此结束
  8.     self.isLogin(false);
  9.   }
  10. });
  11. /*
  12.  * 因为安卓获取 userinfo 是异步的，导致登录之后 userInfo.userid 不一定能获取到，所以加个循环
  13. */
  14. var timeout = null;
  15. function getUserInfo() {
  16.     _nativeAPI.invoke('getUserInfo', {}, function(err, data) {
  17.   // alert(JSON.stringify(data));
  18.   // iOS 3.2 全部返回了
  19.   if (err == null && data.jwt) {
  20.     self.user = data;
  21.     if (timeout) {
  22.       clearTimeout(timeout);
  23.       timeout = null;
  24.     }
  25.   } else {
  26.     timeout = setTimeout(getUserInfo, 500);
  27.   }
  28. });
  29. }
  30. getUserInfo();

getDeviceInfo

  1. _nativeAPI.invoke('getDeviceInfo', null, function(err, data) {
  2.     if (err === null) {
  3.       ...
  4.     } else {
  5.       ...
  6.     }
  7. });

updateTitle

  1. _nativeAPI.invoke('updateTitle', {text: title});

storage

  1. _nativeAPI.invoke('storage', {
  2.     action: 'set',
  3.     key: 'lastHotel',
  4.     value: JSON.stringify(data.info)
  5. });

getCurrentPosition

  1. _nativeAPI.invoke('getCurrentPosition', null, function(err, result) {
  2.     if (!result.errDesc) {
  3.       try {
  4.         util.currentPosition = result;
  6.         var lat = util.currentPosition.latitude;
  7.         var lng = util.currentPosition.longitude;
  9.         if(lat && (lat > 90) ){
  10.           util.currentPosition.latitude = lng;
  11.           util.currentPosition.longitude = lat;
  12.         }
  14.         self.getAddressByCoor(currentPlatName);
  15.       } catch(e) {
  16.         util.currentPosition = null;
  18.         util.alert({
  19.           title: '获取位置失败',
  20.           content: '请在系统设置中打开“定位服务”，并允许“'+currentPlatName+'”获取您的位置'
  21.         });
  22.       }
  23.     } else{
  24.       util.currentPosition = null;
  25.       util.alert({
  26.         title: '获取位置失败',
  27.         content: '请在系统设置中打开“定位服务”，并允许“'+currentPlatName+'”获取您的位置'
  28.       });
  29.     }
  30.     });

scanBarcode

  1. _nativeAPI.invoke('scanBarcode', {}, function(err, value) {
  2.     // value扫描得到的字符串
  3. })

sharePage

  1. _nativeAPI.invoke('sharePage', {
  2.   title: '分享',
  3.   desc: '',
  4.   link: '',
  5.   imgUrl: '',
  6.   type: 'all'
  7. }, function(err, value) {
  8.    if (err === null && value) {
  9.       ...
  10.     } else {
  11.       ...
  12.     } 
  13. })

startPay

  1. _nativeAPI.invoke('startPay', {
  2.   title: '支付 - ' + self.name(),
  3.   price: data.orderInfo.payPrice,
  4.   orderid: data.orderInfo.orderId
  5. }, function(err, nativeData) {
  6.   if (nativeData.value === nativeData.SUCC) {
  7.     ...
  8.   } else if(nativeData.value === nativeData.FAIL) {
  9.     /*
  10.      * 特殊说明： 支付模块会一直监听支付结果，直到支付成功；否则就是用户 cancel 了。不存在 FAIL 这个
  11.      */
  12.      ...
  13.   } else if (nativeData.value === nativeData.CANCEL) {
  14.     ...
  15.   } else {
  16.     ...
  17.   }
  18. });

loading

  1. _nativeAPI.invoke('loading', {show: true, text: '加载中'}, function() {
  2.     ...
  3. });

根据页面来源来执行run.js，所有业务逻辑都在run.js中执行

  1. ;(function(win, doc) {
  2.   function run() {
  3.     // 业务代码
  4.     ...
  5.   }
  7.   util.PLATFORM = {
  8.     BROWSER: 1,
  9.     WEIXIN: 2,
  10.     XIAOPAO: 3,
  11.     CURRENT: 1,
  12.     CURRENT_STR: '普通浏览器'
  13.   };
  15.   /*
  16.    * 『微信支付』的界面, url 没有 from 参数的情况，从而导致判断失败。将当前 PLATFORM 记在 cookie 中，根据 cookie 来判断是否在 native 中。 该 cookie 名是__platform
  17.    * NativeAPI 会在 document.onload 的事件中被注册，而该事件会一直等到页面上图片加载结束之后才触发，所以 NativeAPI 速度非常慢。当发现身处 native 中的时候，将图片加载放在 NativeAPI 加载完毕之后进行。
  18.    */
  19.   if (win.location.href.indexOf('from=xiaopao') >= 0) {
  20.     util.PLATFORM.CURRENT = util.PLATFORM.XIAOPAO;
  21.     util.PLATFORM.CURRENT_STR = '小炮';
  22.   } else if (win.navigator.userAgent.toLowerCase().indexOf('micromessenger') >= 0) {
  23.     util.PLATFORM.CURRENT = util.PLATFORM.WEIXIN;
  24.     util.PLATFORM.CURRENT_STR = '微信';
  25.   } else {
  26.     if (util.cookie.getItem('__platform')) {
  27.       util.PLATFORM.CURRENT = win.parseInt(util.cookie.getItem('__platform'));
  28.       if (util.PLATFORM.CURRENT == util.PLATFORM.WEIXIN) {
  29.         util.PLATFORM.CURRENT_STR = '微信';
  30.       } else if (util.PLATFORM.CURRENT == util.PLATFORM.XIAOPAO) {
  31.         util.PLATFORM.CURRENT_STR = '小炮';
  32.       }
  33.     }
  34.   }
  36.   util.cookie.setItem('__platform', util.PLATFORM.CURRENT);
  38.   switch(util.PLATFORM.CURRENT) {
  39.     case util.PLATFORM.BROWSER:
  40.       run();
  41.     break;
  42.     case util.PLATFORM.WEIXIN:
  43.       if (util.cookie.getItem('wx_open_id')) {
  44.         m.loadScript('http://res.wx.qq.com/open/js/jweixin-1.0.0.js', function() {
  45.           run();
  46.         });
  47.       } else {
  48.         m.loadScript('http://res.wx.qq.com/open/js/jweixin-1.0.0.js', function() {
  49.           run();
  50.         });
  51.         // 需要微信网页授权
  52.         // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa2f3f0d342b39a3a&redirect_uri='
  53.         //   + window.apiRootPath
  54.         //   + '&response_type=code&scope=snsapi_base#wechat_redirect';
  55.       }
  56.     break;
  57.     case util.PLATFORM.XIAOPAO:
  58.       m.loadScript(__uri('lib/native-api.js'), function() {
  59.         // util.speedUpNativeAPI(); （window.location.href = "openetjs://start?type=nativeapi";）
  60.         _nativeAPI.invoke('getDeviceInfo', null, function(err, result) {
  61.           try {
  62.             // util.COMMON_PARAMS 对象存储APP提交给PHP所有的公共参数
  63.             util.COMMON_PARAMS.comm_imei = result.imei;
  64.           } catch(e) {
  65.             util.COMMON_PARAMS.comm_imei = 'unknown';
  66.           }
  67.           run();
  68.         });
  69.       });
  70.     break;
  71.   }
  72. })(window, document);
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注