js和原生应用常用的数据交互方式
栏目: JavaScript · 发布时间: 6年前
内容简介:在原生app中经常会使用到H5页面,比如说电商中的活动页,一些电商中的详情页,等等...这些页面都有一个特点,那就是在未来修改的可能性,和一次性的几率特别的大。所以用H5的页面是最睿智的一种选择。一旦使用了H5那么就少不了和原生开发的一些交互(Android, IOS)如下的方案能够帮助你解决。 其实现原理是原生在js的window对象中注入一个js方法,以备原生应用进行处罚触发,就和我们平时去调用onclick的方法一样简单。 js代码:调用方式
在原生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属性在判断他是否有注入的方法名这样他就能很好的调用这个方法了;
为了方便大家查找这里也附上移动端的代码:
//Android public 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 <JavaScriptCore/JavaScriptCore.h> WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init]; [wkWebConfig.userContentController addScriptMessageHandler:self name:@"clinicDetails"]; [wkWebConfig.userContentController addScriptMessageHandler:self name:@"activityDetails"]; 复制代码
通过这个流程大家就能很方便的调用原生的方法了。
场景2
我们需要在短信中使用某个链接去打开原生应用如果没有那么就会提示他去下载某个应用,首先原生的应用需要定义一个url链接以备前端 程序员 在浏览器中调用,先给大家看一下链接示例:
// IOS iOSStarClinic:// // 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还是安卓环境,其实现在的浏览器已经不能通过偏方(计时的方法)来解决检查当前时候有没有安装应用了,因为浏览器会弹出提示框用户确认才能跳转所以用户一旦不点击确认那么浏览器就会进行跳转!所以在当前页应该要给用户显示一些内容以便用户未打开应用的时候有其他的业务流程。
-完-
以上所述就是小编给大家介绍的《js和原生应用常用的数据交互方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- iOS 12 人机交互指南:交互(User Interaction)
- 生活NLP云服务“玩秘”站稳人机交互2.0语音交互场景
- asyncio之子进程交互
- 以太坊交互工具
- 学习 PixiJS — 交互工具
- Python基础(7)-用户交互
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Master Switch
Tim Wu / Knopf / 2010-11-2 / USD 27.95
In this age of an open Internet, it is easy to forget that every American information industry, beginning with the telephone, has eventually been taken captive by some ruthless monopoly or cartel. Wit......一起来看看 《The Master Switch》 这本书的介绍吧!