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和原生应用常用的数据交互方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

银行3.0:移动互联时代的银行转型之道

银行3.0:移动互联时代的银行转型之道

[澳]布莱特·金(Brett King) / 白 宫 施 轶 / 广东经济出版社 / 2014-12 / 88.00元

银行未来会怎样,银行下一步该怎么做?银行如何在客户行为变化、科技变化,以及新的非银行竞争者不断涌入等时代变化的形势下,在未来取得成功? 这是第一本透彻深入地全面呈现当今银行业的内外形势与状况的书,内容涉及技术变化、客户行为变化、涌现的外部竞争者,银行现有组织架构、流程模式、制度思维、人员结构、互动渠道、营销方式等。具体包括低网点化,ATM、网站、呼叫中心的落伍,以及智能手机、社交媒体、移动支......一起来看看 《银行3.0:移动互联时代的银行转型之道》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具