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:
...
}
}