本篇文章，我们主要叙述一下Hybrid App中常见的几种通讯场景，包括注册、登录、支付、登录状态的保持以及退出。由于我在前面的文章中已经有过对web端和native之间通信方式的讲解，所以本篇文章主要是以使用为主。如果您还不了解web端和原生端的通信方式，请查看我的这篇文章《Hybird App中 Android 和 IOS 与网页之间的通信》进行学习，了解基础非常重要。
一、实现注册功能时的通信
Register.vue
注册界面
1、注册按钮点击事件，针对不同的平台使用不同的逻辑。
/**
* 注册按钮点击事件
*/
onRegisterClick: function () {
if (this.username.length === 0) {
alert('请完善用户名');
return;
}
if (this.password.length === 0 || this.password != this.comfirmPassword) {
alert('请完善密码');
return;
}
this.md5Password = md5(this.password);
if (window.androidJSBridge) {
//处理Android环境下的逻辑
this.onRegisterToAndroid();
} else if (window.webkit) {
//处理IOS环境下的逻辑
this.onRegisterToIos();
}
}
2、调用android注册方法。需要在android端注册register方法，并返回是否通过校验的值（boolean）。
/**
* 调用 android 注册方法
*/
onRegisterToAndroid: function () {
let userJson = JSON.stringify({
'username': this.username,
'password': this.md5Password
});
let result = window.androidJSBridge.register(userJson);
this.onRegisterCallback(result);
}
3、调用IOS注册方法。当然也需要在IOS原生端定义register方法，由于IOS中不能直接返回结果给web端，所以需要在web端的window对象中挂载一个回调方法onRegisterCallback,等IOS端完成处理后，执行该方法。
/**
* 调用 IOS 注册方法
*/
onRegisterToIos: function () {
let userJson = {
'username': this.username,
'password': this.md5Password,
};
window.registerCallback = this.onRegisterCallback;
window.webkit.messageHandlers.register.postMessage(userJson);
},
一定要注意，要在执行window.webkit.messageHandlers.register.postMessage(userJson)执行前将注册回调方法onRegisterCallback进行挂载。
4、注册回调方法
/**
* 注册方法回调
*/
onRegisterCallback: function (result) {
if (result) {
alert('注册成功');
this.onBackClick();
} else {
alert('注册失败，请重试');
}
}
二、实现登录功能时的通信
登录界面
当我们完成了注册功能，其他的功能其实就是简单复制的过程了。话不多说，咱们码上见真情。
Login.vue
1、登录按钮点击事件
/**
* 登录按钮点击事件
*/
onLoginClick: function () {
if (this.username.length === 0 || this.password.length === 0) {
alert('用户名或密码未输入');
return;
}
this.md5Password = md5(this.password);
if (window.androidJSBridge) {
this.onLoginToAndroid();
} else if (window.webkit) {
this.onLoginToIos();
}
},
3、调用 android 登录验证
/**
* 调用 android 登录验证
*/
onLoginToAndroid: function () {
let user = {
'username': this.username,
'password': this.md5Password
};
let result = window.androidJSBridge.login(JSON.stringify(user));
this.onLoginCallback(result);
},
4、调用 ios 登录验证
/**
* 调用 IOS 登录验证
*/
onLoginToIos: function () {
let user = {
'username': this.username,
'password': this.md5Password
};
window.loginCallback = this.onLoginCallback;
window.webkit.messageHandlers.login.postMessage(user);
},
5、接收登录验证结果
/**
* 接收登录验证结果
*/
onLoginCallback: function (result) {
switch (result) {
case '-1':
alert('系统内部错误');
break;
case '0':
this.$store.commit('setUsername', this.username);
this.onBackClick();
break;
case '1':
alert('用户不存在');
break;
case '2':
alert('密码错误');
break;
}
},
当然，在登录成功后，我们需要将用户通过vuex进行保存，这里就不细讲了。同时，在原生端也会将用户名进行保存。
三、实现登录状态保存功能时的通信
在原生端启用webview加载完web端页面的后回去执行，我们挂载在web端window下面的方法nativeFunctionUserLogin方法，并将原生端保存的用户名发送给web端。web端再将用户保存在vuex中，如此，就实现了登录状态的保持。
App.vue
created: function () {
window.nativeFunctionUserLogin = this.nativeFunctionUserLogin;
}
methods: {
/**
* 提供给 Native 调用的方法。
* 保存当前自动登录的用户名到 vuex。
*/
nativeFunctionUserLogin: function (username) {
this.$store.commit('setUsername', username);
}
}
四、实现支付功能时的通信
首先看一下支付页面。
支付页面
1、支付点击事件
/**
* 支付点击事件
*/
onPayClick: function () {
// 支付宝支付
if (this.selectPayment.id === '1') {
this.aliPay();
}
// 微信支付
else if (this.selectPayment.id === '2') {
this.wxPay();
}
}
2、支付方式点击事件
/**
*支付宝支付
*/
aliPay: function () {
if (window.androidJSBridge) {
window.androidJSBridge.aliPay(JSON.stringify(this.goodsData));
} else if (window.webkit) {
}
}
/**
* 微信支付
*/
wxPay: function () {
if (window.androidJSBridge) {
window.androidJSBridge.wxPay(JSON.stringify(this.goodsData));
} else if (window.webkit) {
}
}
五、实现退出功能时的通信
1、退出登录按钮点击事件
/**
* 退出登录按钮点击事件
*/
onLogoutClick: function () {
if (window.androidJSBridge) {
this.onLogoutToAndroid();
} else if (window.webkit) {
this.onLogoutToIos();
}
}
2、调用 android 退出登录的方法
/**
* 调用 android 退出登录的方法
*/
onLogoutToAndroid: function () {
let result = window.androidJSBridge.logout();
this.onLogoutCallback(result);
}
3、调用 android 退出登录的方法
/**
* 调用 ios 退出登录的方法
*/
onLogoutToIos: function () {
/**
* 因为原生调用 JS 的方法只能是绑定到 JS window 对象中的方法，
* 所以我们可以通过把组件中的 方法 赋值给 window 对象，
* 从而让 vue 组件中的方法可以被原生调用到
*/
window.logoutCallback = this.onLogoutCallback;
window.webkit.messageHandlers.logout.postMessage({});
}
4、退出登录的回调方法
/**
* 退出登录的回调方法
*/
onLogoutCallback: function (result) {
if (result) {
this.$store.commit('clearUsername');
alert('退出成功');
} else {
alert('操作失败，请重试');
}
}
网友评论