Javascript 与原生交互规范

Javascript 与原生交互规范

一、交互规范

Javascript 与原生应用交互

• 前端调用原生

假设原生有个 native 方法叫做 doLogin()

  //Android 原生方法
  window.android.doLogin();

  //如果是IOS，使用方法为直接写方法名
  doLogin();

• 前端向原生传值

假设原生有个 native 方法叫做 doLogin(username, password)

  //Android 原生方法
  window.android.doLogin(username, password);

  //如果是IOS，使用方法为直接写方法名
  doLogin(username, password);

• 接收原生传递过来的参数

定义一个方法：

doLogin: function(username:String, password:String) {
  // 获得 username 和 password
}

• 假设在 vue 环境中，接收原生传递过来的参数

跟传统 Javascript 和原生交互基本类似，但是需要额外把方法声明到全局： window.doLogin = this.doLogin才可被进行调用，因为 vue 中生命的方法是局部方法，需要暴露出去称为全局方法才可以被原生调用

• 从原生获取数据然后进行请求

没有直接传值的办法，只能通过 1、3 结合来迂回进行。

二、命名规范

遵从 Javascript 常用规范，具体还需要前端和原生进行约定。假设有从原生获取数据然后进行请求的需求，那么方法和回调方法应具备一定的关联性。例如：

• 从原生获取数据，先通知原生，我要 UserID，原生定义一个 getUserID 方法。

 //Android 原生方法
  window.android.getUserID();

  //如果是IOS，使用方法为直接写方法名
  getUserID();

• 原生调用 Javascript 方法间接传值，以原生方法为关联，把前缀替换成 on,并在发生异常时调用 Javascript 的 onError 方法。不需要传值的情况按需进行添加，建议不需要传值也加上回调，方便异常信息查找

onUserID: function(userID:String) {
  // 获得 UserID
}

// 定义异常方法，一般是把异常显示出来
// @param fname 原生方法名称，可用来识别哪个方法传递过来的异常
// @param exception 异常信息
onError: function(fname:String, exception:String) {
  switch(fname){
    case "getUserID":
      ...
      break;
    default:
      ...
  }
}