在混合App的开发中，web端和本机端之间有几种常见的通信场景
APP开发
浏览：866 次
在本文中，我们主要描述混合App中的几种常见通信场景，包括注册、登录、支付、登录状态维护和退出。由于我已经在上一篇文章中解释了web端和本机之间的通信模式，所以本文将重点讨论其使用。如果您不知道如何在web端和本机端之间进行通信，请参阅我的文章了解。了解基本知识很重要。
1、 实现注册功能时的通信
注册.vue
注册界面
1.注册按钮点击事件对不同平台使用不同的逻辑。
/**
*注册按钮点击事件
*/
onRegisterClick:函数（）{
如果（this.username.length===0）{
警报（'请填写用户名'）；
回来
}
如果（this.password.length===0||this.passpord！=this.comfirmPassword）{
警报（'请填写密码'）；
回来
}
这md5Password=md5（this.password）；
if（window.androidJSBridge）{
//Android环境中的处理逻辑
this.onRegisterToAndroid（）；
}else if（window.webkit）{
//IOS环境中的处理逻辑
this.onRegisterToIos（）；
}
}
2.调用Android注册方法。您需要在android端注册register方法，并返回它是否通过验证的值（布尔值）。
/**
*调用Android注册方法
*/
onRegisterToAndroid:函数（）{
let userJson=JSON.stringify({
'用户名'：this.username，
'密码'：this.md5Password
});
let result=window.androidJSBridge.register（userJson）；
this.onRegisterCallback（结果）；
}
3.调用IOS注册方法。当然，您还需要在IOS的本机端定义register方法。由于IOS无法直接将结果返回到web端，因此需要将回调方法onRegisterCallback附加到web端的窗口对象。IOS端完成处理后，执行该方法。
/**
*调用IOS注册方法
*/
onRegisterToIos:函数（）{
让userJson={
'用户名'：this.username，
'密码'：this.md5Password，
};
窗registerCallback=this.onRegisterCallaback；
window.webkit.messageHandlers.register.postMessage（userJson）；
},
请确保在执行窗口之前安装onRegisterCallback方法。webkit。消息处理程序。登记postMessage（userJson）。
4.注册回调方法
/**
*注册方法回调
*/
onRegisterCallback:函数（结果）{
如果（结果）{
警报（'注册成功'）；
this.onBackClick（）；
}其他{
警报（“注册失败，请重试”）；
}
}
2、 实现登录功能时的通信
登录界面
当我们完成注册功能时，其他功能将被简单复制。不用多说，我们就能从院子里看到真相。
登录vue
1.登录按钮点击事件
/**
*登录按钮单击事件
*/
onLogiclick:函数（）{
如果（this.username.length===0|| this.password.length===0）{
警报（'未输入用户名或密码'）；
回来
}
这md5Password=md5（this.password）；
if（window.androidJSBridge）{
this.onLoginToAndroid（）；
}else if（window.webkit）{
this.onLoginToIos（）；
}
},
3.调用Android登录验证
/**
*调用Android登录验证
*/
onLoginToAndroid:函数（）{
让用户={
'用户名'：this.username，
'密码'：this.md5Password
};
let result=window.androidJSBridge.login（JSON.stringify（用户））；
this.onLoginCallback（结果）；
},
4.调用ios登录验证
/**
*调用IOS登录验证
*/
onLoginToIos:函数（）{
让用户={
'用户名'：this.username，
'密码'：this.md5Password
};
窗loginCallback=this.onLoginCallback；
window.webkit.messageHandlers.login.postMessage（用户）；
},
5.接收登录验证结果
/**
*接收登录验证结果
*/
onLoginCallback:函数（结果）{
开关（结果）{
案例“-1”：
警报（“系统内部错误”）；
打破
案例“0”：
这是$store。commit（'setUsername'，this.username）；
