本篇文章给大家带来的内容是关于javascript和原生应用常用的数据交互方式的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
场景1
在原生app中经常会使用到H5页面，比如说电商中的活动页，一些电商中的详情页，等等…这些页面都有一个特点，那就是在未来修改的可能性，和一次性的几率特别的大。所以用H5的页面是最睿智的一种选择。
一旦使用了H5那么就少不了和原生开发的一些交互（Android, IOS）如下的方案能够帮助你解决。
其实现原理是原生在js的window对象中注入一个js方法，以备原生应用进行处罚触发，就和我们平时去调用onclick的方法一样简单。
js代码：
// mobile/index.js 常用js 调用原生的方式都在这里体现。export default { /** * 调用移动端方法 * * @param {*} {name, params, call} 移动端注入的方法名 | 参数 | 回调 */ callMoblieMethods({name, params, call}){ // 移动端安卓的环境 if(window.android) { // 移动端使用java所以不能直接解析json,只能解析字符串或者json字符串 window.android[name](JSON.stringify(params)); } // 移动端IOS的环境 if(window.webkit && window.webkit.messageHandlers) { window.webkit.messageHandlers[name].postMessage(params); } }}
登录后复制
调用方式
if(window.android || (window.webkit && window.webkit.messageHandlers.activityDetails)) { mobile.callMoblieMethods({ name: 'activityDetails', params: {activityId: item.act_id}});}
登录后复制
这个判断条件大家看起来可能很诡异，我测试过这各种机器的机型，安卓机window肯定是没有的属性，但是在IOS上他会自带webkit属性所以我们先判断他是否有webkit属性在判断他是否有注入的方法名这样他就能很好的调用这个方法了；
立即学习“Java免费学习笔记（深入）”；
为了方便大家查找这里也附上移动端的代码：
//Androidpublic class AndroidJavascriptInterface { Activity mActivity; public AndroidJavascriptInterface(Activity activity) { this.mActivity = activity; } //诊所详情 @JavascriptInterface public void clinicDetails(String jsonData) { Log.i("znh", "H5-JS-诊所详情"); Intent intent = new Intent(mActivity, OutPatientActivity.class); Bundle bundle = new Bundle(); bundle.putString(Constants.CLINIC_ID, GsonUtil.getJSONObjectKeyVal(jsonData, "clinicId")); intent.putExtras(bundle); mActivity.startActivity(intent); } //活动详情 @JavascriptInterface public void activityDetails(String jsonData) { Log.i("znh", "H5-JS-活动详情"); Intent intent = new Intent(mActivity, ActivityDetailActivity.class); Bundle bundle = new Bundle(); bundle.putString("id", GsonUtil.getJSONObjectKeyVal(jsonData, "activityId")); intent.putExtras(bundle); mActivity.startActivity(intent); }}//IOS#import WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];[wkWebConfig.userContentController addScriptMessageHandler:self name:@"clinicDetails"];[wkWebConfig.userContentController addScriptMessageHandler:self name:@"activityDetails"];
登录后复制
通过这个流程大家就能很方便的调用原生的方法了。
场景2
我们需要在短信中使用某个链接去打开原生应用如果没有那么就会提示他去下载某个应用，首先原生的应用需要定义一个url链接以备前端程序员在浏览器中调用，先给大家看一下链接示例：
// IOSiOSStarClinic://// Andriod yjjkyl://starclinic
登录后复制
短小精悍，你只需要调用这个就可以了
那么在js中要怎么做呢？
if(this.isIOS) { window.location.href = 'iOSStarClinic://';//与APP约定的一个协议URL} else { var state = null; try { state = window.open('yjjkyl://starclinic', '_blank');//与APP约定的一个协议URL } catch(e) {} if (state) { window.close(); } else { window.location.href = gbs.patientDownUrl; }}
登录后复制
先判断一下当前是IOS还是安卓环境，其实现在的浏览器已经不能通过偏方（计时的方法）来解决检查当前时候有没有安装应用了，因为浏览器会弹出提示框用户确认才能跳转所以用户一旦不点击确认那么浏览器就会进行跳转！所以在当前页应该要给用户显示一些内容以便用户未打开应用的时候有其他的业务流程。
以上就是JavaScript和原生应用常用的数据交互方式的介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2737287.html
