精华内容
下载资源
问答
  • h5 与原生 app 交互的原理 现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 ...

    h5 与原生 app 交互的原理

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。

    h5 与原生 app 的交互,本质上说,就是两种调用:

    app 调用 h5 的代码

    h5 调用 app 的代码

    1. app 调用 h5 的代码

    因为 app 是宿主,可以直接访问 h5,所以这种调用比较简单,就是在 h5 中曝露一些全局对象(包括方法),然后在原生 app 中调用这些对象。
    在这里插入图片描述
    javascript:

    window.sdk = {  double = value => value * 2,  triple = value => value * 3,};
    

    android:

    webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback<String>() {  
    @Override  public void onReceiveValue(String s) {    // 20  }});
    

    ios:

    NSString *func = @"window.sdk.double(10)";NSString *str = 
    [webview stringByEvaluatingJavaScriptFromString:func]; // 20
    

    2. h5 调用 app 的代码

    因为 h5 不能直接访问宿主 app,所以这种调用就相对复杂一点。

    这种调用常用有两种方式:

    由 app 向 h5 注入一个全局 js 对象,然后在 h5 直接访问这个对象

    由 h5 发起一个自定义协议请求,app 拦截这个请求后,再由 app 调用 h5 中的回调函数

    2.1 由 app 向 h5 注入一个全局 js 对象

    这种方式沟通机制简单,比较好理解,并且对于 h5 来说,没有新的东西,所以是比较推荐的一种方式。但这种方式可能存在安全隐患,详细查看 你不知道的 Android WebView 使用漏洞。

    在这里插入图片描述
    android:

    webview.addJavascriptInterface(new Object() {  
    @JavascriptInterface  public int double(value) {    return value * 2;  }
      @JavascriptInterface  public int triple(value) {    return value * 3;  }}, "appSdk");
    

    ios:

    @interface AppSdk : NSObject{}- (int) double:(int)value;- (int) triple:
    (int)value;@end@implementation AppSdk- (int) double:(int)value {  return value * 2;}- (int) 
    triple:(int)value {  return value * 3;}@endJSContext *context=[webview 
    valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];AppSdk *appSdk 
    = [AppSdk new];context[@"appSdk"] = appSdk;
    

    javascript:

    window.appSdk.double(10); // 20
    

    2.2 由 h5 发起一个自定义协议请求

    这种方式要稍复杂一点,因为需要自定义协议,这对很多前端开发者来说是比较新的东西。所以一般不推荐这种方式,可以作为第一种方式的补充。

    大致需要以下几个步骤:

    1.由 app 自定义协议,比如 sdk://action?params

    2.在 h5 定义好回调函数,比如 window.bridge={getDouble:value=>{},getTriple:value=>{}}

    3.由 h5 发起一个自定义协议请求,比如 location.href=‘sdk://double?value=10’

    4.app 拦截这个请求后,进行相应的操作,获取返回值

    5.由 app 调用 h5 中的回调函数,比如 window.bridge.getDouble(20);
    在这里插入图片描述
    javascript:

    window.bridge = {  getDouble: value => {    // 20  },   getTriple: value => {    // more    
    }};location.href = 'sdk://double?value=10';
    

    android:

    webview.setWebViewClient(new WebViewClient() {    @Override    public boolean 
    shouldOverrideUrlLoading(WebView view, String url) {      
      // 判断如果 url 是 sdk:// 打头的就拦截掉        // 然后从 url sdk://action?params 中取出 action 与params         Uri uri = Uri.parse(url);                            
       if ( uri.getScheme().equals("sdk")) {          
       // 比如 action = double, params = value=10            webview.evaluateJavascript('window.bridge.getDouble(20)');           return true;        }  
            return super.shouldOverrideUrlLoading(view, url);    }});
    

    ios:

    - (BOOL)webview:(UIWebView *)webview shouldStartLoadWithRequest:(NSURLRequest 
    - *)request navigationType:(UIWebViewNavigationType)navigationType {  // 判断如果 url 是 
    - sdk:// 打头的就拦截掉  // 然后从 url sdk://action?params 中取出 action 与params  NSString 
    - *urlStr = request.URL.absoluteString;  if ([urlStr hasPrefix:@"sdk://"]) {    // 比如 action = 
    - double, params = value=10    NSString *func = @"window.bridge.getDouble(20)";    [webview
    - stringByEvaluatingJavaScriptFromString:func];    return NO;  }  return YES;}
    
    展开全文
  • H5与原生app的三种交互方式

    千次阅读 2019-09-16 10:00:10
    与app进行预定。H5暴露全局方法提供给app调用 代码` javascript window.sdk = { double = value => value * 2, triple = value => value * 3, }; android: webview.evaluateJavascript('window.sdk.double...

    1.app 调用 h5 的代码

    与app进行预定。H5暴露全局方法提供给app调用
    代码`

    javascript

    window.sdk = {
    double = value => value * 2,
     triple = value => value * 3,
    };
    

    android:

    webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback
        <String>() { @Override public void onReceiveValue(String s) {   
    // 20
      }
    });
    

    ios:

    NSString
     *func = @"window.sdk.double(10)";
    NSString
     *str = [webview stringByEvaluatingJavaScriptFromString:func]; // 20
    

    2. h5 调用 app 的代码

    2.1app 向H5注入全局方法

    由 app 向 h5 注入一个全局 js 对象,然后在 h5 直接访问这个对象

    android:

    webview.addJavascriptInterface( new Object () {
        @JavascriptInterface 
        public int double (value) {    
            return value * 2;  
        }
        @JavascriptInterface
         public int triple(value) {
          return value *  3 ;
      }
    },  "appSdk" );
    
    

    ios:

    
    @interface AppSdk : NSObject
    {}
    - ( int )  double :( int )value;
    
    - ( int ) triple:( int )value;
    @end
    @implementation AppSdk 
    - ( int )  double :( int )value {
    return value * 2
    }
    - (int) triple:(int)value {return
     value * 3;
    }
    @end
    JSContext *context=[webview valueForKeyPath:@ "documentView.webView.mainFrame.javaScriptContext" ];
    AppSdk *appSdk = [AppSdk new];
    context[@ "appSdk"] = appSdk;
    
    

    javascript

    window.appSdk.double(10); 
    // 20
    

    2.2 协议拦截

    由 h5 发起一个自定义协议请求,app 拦截这个请求后,再由 app 调用 h5 中的回调函数

    1. 由 app 自定义协议,比如 sdk://action?params

    2. 在 h5 定义好回调函数,比如
      window.bridge={getDouble:value=>{},getTriple:value=>{}}

    3. 由 h5 发起一个自定义协议请求,比如 location.href=‘sdk://double?value=10’

    4. app 拦截这个请求后,进行相应的操作,获取返回值

    5. 由 app 调用 h5 中的回调函数,比如 window.bridge.getDouble(20);

    javascript

    window.bridge = {
      getDouble: value => { // 20
      }, 
      getTriple: value => {
      // more  
      }
    };
    location.href =  'sdk://double?value=10' ;
    
    
    

    android:

    webview.setWebViewClient( new WebViewClient () {
    @Override
    public boolean houldOverrideUrlLoading( WebView view,String url) {
    // 判断如果 url 是 sdk:// 打头的就拦截掉
    // 然后从 url sdk://action?params 中取出 action 与params 
    Uri uri = 
    Uri.parse(url);                                 
        if ( uri.getScheme().equals( "sdk" )) {
        // 比如 action = double, params = value=10
            webview.evaluateJavascript( 'window.bridge.getDouble(20)' );
                return true;
        }
            return super .shouldOverrideUrlLoading(view, url);
        }
    });
    

    ios:

    - (BOOL)webview:( UIWebView *)webview shouldStartLoadWithRequest:( NSURLRequest *)request navigationType:( UIWebViewNavigationType )navigationType { 
    // 判断如果 url 是 sdk:// 打头的就拦截掉
    // 然后从 url sdk://action?params 中取出 action 与params
    NSString *urlStr = request.URL.absoluteString;
    if ([urlStr hasPrefix:@ "sdk://" ]) {
        // 比如 action = double, params = value=10
        NSString *func = @"window.bridge.getDouble(20)" ;
    
        [webview stringByEvaluatingJavaScriptFromString:func];
            return NO; 
        }
        return YES;
    }
    
    展开全文
  • h5 与原生 app 交互的原理

    千次阅读 2018-11-02 15:26:07
    现在移动端 web 应用,很多时候都需要...所以,这次就来捋一捋 h5 与原生 app 交互的原理。 h5 与原生 app交互,本质上说,就是两种调用:   app 调用 h5 的代码 h5 调用 app 的代码   1. app...

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。

    h5 与原生 app 的交互,本质上说,就是两种调用:

     

    • app 调用 h5 的代码

    • h5 调用 app 的代码

     

    1. app 调用 h5 的代码

    因为 app 是宿主,可以直接访问 h5,所以这种调用比较简单,就是在 h5 中曝露一些全局对象(包括方法),然后在原生 app 中调用这些对象。

    javascript:

    29ef7c2ed10a44fc8af17358529e4384.png

    android:

    7865751cdf2840d49d6d9e853af67c8d.png

    ios:

    bed824d0d0de4710b19465e1f672367c.png

    2. h5 调用 app 的代码

    因为 h5 不能直接访问宿主 app,所以这种调用就相对复杂一点。

    这种调用常用有两种方式:

     

    • 由 app 向 h5 注入一个全局 js 对象,然后在 h5 直接访问这个对象

    • 由 h5 发起一个自定义协议请求,app 拦截这个请求后,再由 app 调用 h5 中的回调函数

     

    2.1 由 app 向 h5 注入一个全局 js 对象

    这种方式沟通机制简单,比较好理解,并且对于 h5 来说,没有新的东西,所以是比较推荐的一种方式。但这种方式可能存在安全隐患,详细查看 你不知道的 Android WebView 使用漏洞。

     

    android:

    74a43fa8da294b68800f99728cc718aa.png

    ios:

    e61c92ec8352486abb0197624c528e0e.png

    javascript:

    40ec359e253b4140b0234c12d26cdfb1.png

    2.2 由 h5 发起一个自定义协议请求

    这种方式要稍复杂一点,因为需要自定义协议,这对很多前端开发者来说是比较新的东西。所以一般不推荐这种方式,可以作为第一种方式的补充。

    大致需要以下几个步骤:

     

    • 由 app 自定义协议,比如 sdk://action?params

    • 在 h5 定义好回调函数,比如 window.bridge={getDouble:value=>{},getTriple:value=>{}}

    • 由 h5 发起一个自定义协议请求,比如 location.href='sdk://double?value=10'

    • app 拦截这个请求后,进行相应的操作,获取返回值

    • 由 app 调用 h5 中的回调函数,比如 window.bridge.getDouble(20);

     

    javascript:

    0204c45cfb1b428cb2f62029a4e636d0.png

    android:

    882674db65aa44e3888f09cf37126527.png

    ios:

    32883b3aa5694dceafb9c7bc345fe7c8.png

     

    编辑:千锋HTML5

    作者:深予之 (@senntyou)

    原文:https://segmentfault.com/a/1190000016759517

    展开全文
  • 在js与原生进行交互的时候对js来说,大部分逻辑都是回调监听,调用原生的方法

    在js与原生进行交互的时候对js来说,大部分逻辑都是回调与监听,调用原生的方法

    JSBridge是Native代码与JS代码的通信桥梁,因此项目中要设计jsbridge.js:

    (1)设计出一个Native与JS交互的全局中间对象,这个对象会注入到JavaScript环境中的window对象上,全局可用。js同步调用原生方法,原生实现的时候具备返回值,js的调用者就可以获取返回值,如果是异步回调,那可以对外暴露方法的时候提供一个    callback的入参,在异步完成后进行回调。

    // jsbridge.js
    const opt= {
        name: "native",
        iosName: "iosNative",
        androidName: "androidNative",
        hasCallback: ['A','B'],  // 调原生方法有回调
        noCallback: ['C','D'] // 调原生方法没有回调
    }
    
    export default class jsBridge = { 
        constructor(options = opt) {
            const hasCallback = opt.hasCallback;
            const noCallback = opt.noCallback;
            const num = 0;
            const cfun = {};
        }
    
        if(Object.prototype.toString.call(hasCallback) == "[object Array]"){
            this.jsBridgeMethods(hasCallback,true);  // 注册有回调的方法
        }
        if(Object.prototype.toString.call(noCallback ) == "[object Array]"){
            this.jsBridgeMethods(noCallback,false);  // 注册没有回调的方法
        }
    }
    
    jsBridgeMethods(arr,flag) {
        const _this = this;
        arr.forEach((item) = >{
            if(flag) {
                _this[item] = (p) => {
                  return new Promise(response, reject) => {
                     _this.callNative(item, p, function(result){
                        response(result)
                    }) 
                  }
                }
            }else {
                  return new Promise(response, reject) => {
                     _this.callNative(item, p, null){
                        response("success")
                    }) 
                  }
                }
            }
        })
    }
    
    callNative(item, p, callback) {   // js调用原生的方法
        let a = 0, b;
    
        if (typeof callback === 'function') {
          this.num++;
          id = this.num;
          this.cfun[id] = callback;
        }
    
        pm = JSON.stringify({ 
          item,
          id: id? id.toString() : '',
          param: p || {}
        });
    
         window.andriodNative.postMessage(pm);  // 安卓手机webview之间的通信
         window.webkit.messageHandlers.iosNative.postMessage(pm); // ios手机webview之间的通信
    
    }
    
    

    (2)JS如何调用Native

    // main.js中引入jsbridge.js
    
    import native from "jsbridge.js"
    Vue.prototype._native = new native();
    
    
    // index.vue中调用原生方法
    this._native.C();  // 没有回调
    this._native.A().then((params) => {  // 有回调且param为原生返回的参数
    
    })

     

    展开全文
  • H5与原生app交互,需要WebViewJavascriptBridge,废话不多直接上代码,下面是项目中的封装bridge.js的全部代码(示例代码为vue) //iOS 交互声明 function connectWebViewJavascriptBridgeIOS(callback) { if ...
  • 之前在一个项目中,原生app内嵌了h5h5执行完某个操作后要执行app的原生方法(相当于通知app)。这种时候就要用到h5和app的交互了。 代码如下: function callApp(){ var u = navigator.userAgent,app = navigator...
  • uni h5与原生交互方式

    千次阅读 热门讨论 2021-01-19 11:48:13
    原生ios 安卓与h5交互方式 在我使用uni-app开发app的时候 在原生的框架里嵌入了h5的页面 这个时候 就出现新的问题 就是原生页面跳转h5, h5跳转原生界面等一些问题,我在这里做了整理 这种跳转是我们在使用原生的...
  • vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,这篇文章主要介绍了vue与原生app的对接交互的方法,非常具有实用价值,需要的朋友可以参考下
  • 第一次h5APP交互,出现了一些问题。。。现有一需求:H5前端要做一个图片上传的功能,需要调用相机、相册。然后原生APP那边的开发人员和我说,打开相册这些功能你调用我的方法就可以了。以下是原生APP提供的方法:...
  • vue H5与(Android、iOS)原生APP交互

    千次阅读 2019-12-23 15:03:26
    一:JS调用APP 1、封装公共方法: /** *js调用APP * @params {*} Obj 传给app参数 */ export function JSToNativeAPP(params) { let isAndroid = navigator.userAgent.indexOf('Android') > -1 || ...
  • H5与APP原生交互,前端的操作

    千次阅读 2020-01-03 18:52:12
    ##H5页面与原生app交互,和ios原生交互、 其实前端也没什么要做的只需要调用方法就好了,大部分工作(95%)都是安卓或者ios做的。 直接上代码看一下 if (isAndroid) { // 调用安卓的方法 if (status == 'goand') {...
  • h5与原生 app 交互的原理现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app...
  • H5与APP原生交互!!!

    千次阅读 2020-04-28 11:56:09
    H5与APP交互! 申明:该篇文件并不是本人原创,为掘金上的一位前辈总结,我只是为了以后阅读和复习该模块的知识点方便, 原样拷贝过来的。文章原链接为:[H5与APP交互!]...
  • 需求 h5页面嵌入到了原生app内, ...//js与原生app交互 window.showSearch = (res) => { this.popupShow = !this.popupShow } 2.js向原生app传值 AppData这个JSON对象是我们要向app传的所有参数,decision是h
  • Android原生app与H5交互

    2019-11-22 10:07:18
    随着当前开发迭代要求速度更快,改动更灵活,不需要发布版本就能实时更新app的内容,故当前H5制作界面越来越受到科技公司和开发者的欢迎。 2.实现交互 今天记录一下开发过程中用到的H5交互方法,采用了第三方框架...
  • 最近项目要求APP中要嵌套H5的页面。 首先,创建两个JS文件,便于区分管理 1、DeviceType.js用于判断环境是Android还是IOS export const DeviceType=(()=>{ var u = navigator.userAgent; if (u.match(/...
  • h5与原生 app 交互的原理 现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生...
  • 前阵子有个需求, 需要在移动端实现图表的呈现, 问题就在于, ... app内嵌h5页面呈现图表. 那么问题来了, app端需要加载html,js等文件, 这个速度真的不敢恭维, 近40多秒的加载速度, 用户体验特别差, 那么怎么办? ...
  • H5原生app交互

    千次阅读 2017-12-07 10:36:03
  • h5与原生app 支付交互

    2020-07-31 12:10:19
    description: h5跳转然后 app 拦截特定请求 location.href = "bridge://funPay?actionCode=100000&method=addSubscriptionOrder&requestData={subscriptionId:" + this.tc + ",applyType:0,payType:" + ...
  • H5与安卓交互: 自己规定好的参数.自己规定好的参数() 例如:rich.callShareForMoreVipShare() 如果需要带参数: const imgUrl = 'https://111111.jpg'; rich.callShareForMoreVipShare(qrUrl) H5与I.....
  • H5与原生app交互

    2020-04-30 20:05:08
    h5页面与原生app页面交互 两端交互安卓:https://github.com/lzyzsd/JsBridge IOS:https://github.com/marcuswestin/WebViewJavascriptBridge 两者一起用的话会起冲突,需要判断一下是什么终端,然后分别调用, ...
  • H5原生APP之间的区别

    千次阅读 2018-10-08 11:03:15
    产品上线后,带着各种坑后的总结原因方发现很多人都说纯H5 APP一次编写就能支持android和IOS两种不同的APP,大大降低了开发成本。可实际的工作中却发现并不是如此,既不省事儿,又有很多BUG,而且各种css的兼容性的....
  • 原生app与H5页面之间的交互

    千次阅读 2019-01-21 14:50:08
    【需求,点击“个人中心...定义H5用来接收token提供给app的方法: window.h5JAMK_setOpenidCallback = function (openId) { localStorage.userinfo=JSON.stringify({openId:openId}); } 1 通过app拦截url,监听...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,440
精华内容 3,376
关键字:

h5与原生app交互方式