场景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属性在判断他是否有注入的方法名这样他就能很好的调用这个方法了;

为了方便大家查找这里也附上移动端的代码:

//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和原生应用常用的数据交互方式的更多相关文章

  1. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  2. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  3. 原生JavaScript常用本地浏览器存储方法一(方法类型)

    有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请 ...

  4. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  5. Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)

    <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...

  6. Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)

    <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...

  7. iOS开发--JS调用原生OC篇

    JS调用原生OC篇 方式一(反正我不用) 第一种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理. 我写了一个简单的HTML网页和一个btn点击 ...

  8. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  9. 去它的h5,我还是用js写原生跨平台app吧

    智能手机功能越来越强大,已经在逐渐替代电脑的作用.百度.腾讯.阿里的移动端日活数也在逐步的赶上甚至超越电脑端用户.叫喊着“mobile first”的公司越来越多,App开发者应运而生,且队伍日趋庞大 ...

随机推荐

  1. 02_opencv_python_图像处理进阶

    1  灰度图 import cv2 # opencv读取的格式是BGR import numpy as np import matplotlib.pyplot as plt # Matplotlib是 ...

  2. vue--加载模块详解

    1.postcss-loader.autoprefixer.css-loader .sass-loader:加载css模块及css预处理模块,添加浏览器前缀到CSS内容里 加载模块:npm insta ...

  3. JZ-015-反转链表

    反转链表 题目描述 输入一个链表,反转链表后,输出新链表的表头. 题目链接: 反转链表 代码 /** * 标题:反转链表 * 题目描述 * 输入一个链表,反转链表后,输出新链表的表头. * 题目链接: ...

  4. Flume介绍安装使用

    APache Flume官网:http://flume.apache.org/releases/content/1.9.0/FlumeUserGuide.html#memory-channel 目录 ...

  5. 创建 maven项目时:Cannot resolve Plugin org.apache.maven.plugins:maven-install-plugin报错

    Maven在每一次下载jar包的过程中,一旦第一次下载完成后,就会有一个lastUpdate文件,表示该jar包已经下载.下次再检索这个包,也就不会去远程仓库进行下载. 解决办法:找到自己的maven ...

  6. linux 文件查找 find

    find 是实时查找工具,通过遍历指定路径完成文件查找 特点: 查找速度略慢 精确查找 实时查找 查找条件丰富 1.对每个目录先处理目录内的文件,再处理目录本身 find /data/test -de ...

  7. vue 控制台错误

    控制台显示报错: Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1_vuex.a.store is not a constructor 解决办法: 将new ...

  8. MySQL 导入数据时 2006-MySQLserver has gone away

    MySQL 2006-MySQLserver has gone away MySQL 2006-MySQLserver has gone away 方式一(验证无误): 找到 mysql安装目录下的m ...

  9. LGP4841题解

    无向联通图计数板子 首先,这个太难了,先让我们来求一个简单的: 无向图计数. 一共 \(\frac {n \times (n+1)} 2\) 条可能存在的边,枚举一条边是否存在,就有 \(2^{\fr ...

  10. HCNP Routing&Switching之组播技术-组播分发

    前文我们了解了组播技术中的igmp-snooping相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15860484.html:今天我们来聊一聊组播技术 ...