js和原生应用常用的数据交互方式

场景1H5页面在原生应用中经常用到，比如电商中的活动页，一些电商中的详情页等...这些页面有一个特点，就是以后修改的可能性大，而且一次性的几率特别高。所以使用H5页面是最明智的选择。一旦用上H5，就少不了与原生开发（Android、IOS）的一些交互。以下解决方案可以帮助您解决它。实现原理是在js的window对象中原生注入一个js方法，以防原生应用触发惩罚，这和我们平时调用onclick的方法一样简单。js代码：//mobile/index.js常用的js调用native方法都体现在这里。exportdefault{/***调用手机方法**@param{*}{name,params,call}手机注入的方法名|参数|callback*/callMoblieMethods({name,params,call}){//移动Android环境if(window.android){//移动端使用java所以不能直接解析json，只能解析字符串或者json字符串window.android[name](JSON.stringify(参数));}//移动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}});}这个判断条件大家可能觉得比较陌生，我测试过各种机器的型号，Android机器窗口肯定是没有属性的，但是在IOS上，它会有自己的webkit属性，所以我们先判断它有没有webkitattributes，然后判断是否有注入的方法名，这样才能很好的调用这个方法；为了方便大家，这里也放上移动端的代码：//AndroidpublicclassAndroidJavascriptInterface{ActivitymActivity;公共AndroidJavascriptInterface（活动活动）{this.mActivity=活动；}//诊所详情@JavascriptInterfacepublicvoidclinicDetails(StringjsonData){Log.i("znh","H5-JS-诊所详情");意图intent=newIntent(mActivity,OutPatientActivity.class);捆绑捆绑=新捆绑（）；bundle.putString(Constants.CLINIC_ID,GsonUtil.getJSONObjectKeyVal(jsonData,"clinicId"));intent.putExtras（捆绑包）；mActivity.startActivity（意图）；}//活动详情@JavascriptInterfacepublicvoidactivityDetails(StringjsonData){Log.i("znh","H5-JS-活动详情");Intentintent=newIntent(mActivity,ActivityDetailActivity.class);捆绑捆绑=新捆绑（）；bundle.putString("id",GsonUtil.getJSONObjectKeyVal(jsonData,"activityId"));intent.putExtras（捆绑包）；mActivity.startActivity（意图）；}}//IOS#importWKWebViewConfiguration*wkWebConfig=[[WKWebViewConfigurationalloc]init];[wkWebConfig.userContentControlleraddScriptMessageHandler:自己的名字:@"clinicDetails"];[wkWebConfig.userContentControlleraddScriptMessageHandler:自己的名字:@"activityDetails"];通过这个过程，大家可以很方便的调用native方法场景2我们需要用到某个如果没有打开native应用的链接，就会提示他去下载一个应用。首先，原生应用需要定义一个url链接，供前端程序员在浏览器中调用。让我给你看链接示例：//IOSiOSStarClinic:////Andriodyjjkyl://starclinic简短而强大，你只需要调用这个。那么在js中是怎么做的呢？if(this.isIOS){window.location.href='iOSStarClinic://';//与APP约定的协议URL}else{varstate=null;try{state=window.open('yjjkyl://starclinic','_blank');//与APP约定的协议URL}catch(e){}if(state){window.close();}else{window.location.href=gbs.patientDownUrl;}}首先判断当前环境是IOS还是Android。事实上，现在的浏览器已经无法通过偏方（计时法）来检查当前是否安装了应用程序来解决问题，因为浏览器会弹出提示框，用户确认后才能跳转。所以一旦用户不点击确认，浏览器就会跳转！因此，当前页面应该向用户显示一些内容，以便在用户不打开应用程序时还有其他业务流程。-超过-