h5与native的通信函数，基于url schema的做法

leap_frog 发布于2019-06-25 16:29 / 1391人阅读

摘要：全局配置信息区域全局配置信息，方便配置工具函数定义区域全局注册唯一的客户端函数，给端去调用客户端必须包括处理有回调的情况下后面有用发送数据函数拼接处理使用发起给端兼容用安卓发太快有问题封装分享按钮的函数具体的场景去调用函数是返回的数据根据

全局配置信息区域

// 全局配置信息，方便配置
var hxsConfigBridge = {
    globalBridgeName:"hxsHybrid",
    globalBridgeObject:"hxsNativeBride"
}

工具函数定义区域

window[hxsConfigBridge.globalBridgeName] =  window[hxsConfigBridge.globalBridgeName] || {};


//全局注册唯一的客户端函数，给app端去调用客户端
function requestHybrid ( params){

    if (! params.tagName ){
        alert("必须包括tagName")；
        return;
    }

    var tt = (new Date().getTime() ) + "_"+ Math.random() + "_";

    var t = hxsConfigBridge.globalBridgeName +"_"+ params.tagName + "_" + tt;
    
    var tmpFn;

    //处理有回调的情况下
    if( params.callback ){
        tmpFn = params.callback;
        // 后面有用
        params.callbackT = t;

        window[hxsConfigBridge.globalBridgeName][t] = function (data){
            tmpFn( data)
        }
        
    }
    // 发送数据函数
    bridgePostMsg( params )
}

// 拼接处理Url
function getHybridUrl( params ){
    var k,paramStr = "",
    url = hxsConfigBridge.globalBridgeName +"://"+params.tagName,
    flag = "?";
    if( params.callback ){
        flag = "&";
        url += "?callback="+ params.callbackT
    }

    if( params.param ){
        if ( typeof params.param == "object" ){
            paramStr = JSON.stringify(params.param)
        }
        
        url = url + flag +  "param="+ encodeURIComponent(paramStr );
    }

    // hxsHybrid://?callback=callbackId
    return url;
}

// 使用iframe发起 url schema 给app端
function bridgePostMsg ( params){

    var url = getHybridUrl( params);

    //兼容ios6 用 iframe
    var ifr = document.createElement("iframe");  
    ifr.id = params.callbackId; 
    ifr.src = url;   
    ifr.onload = function() {   
        console.log("iframe onload loaded");   
    };
    
    if( navigator.userAgent.indexOf("Android") > -1 ){
        // 安卓发太快 有问题
        setTimeout(function(){
            document.body.appendChild(ifr);  
        },10)
    }else{
        document.body.appendChild(ifr);  
    }
    
    setTimeout(function(){
        document.body.appendChild(ifr);  
        ifr.remove();
        ifr = null;
    },1000)

}


// 封装分享按钮的函数
window[hxsConfigBridge.globalBridgeObject] =  window[hxsConfigBridge.globalBridgeObject] || {};

window[hxsConfigBridge.globalBridgeObject].shareBtnInApp = function (param = {}, callback) {
    requestHybrid({
        tagName:"shareBtnInApp",
        param:param,
        callback:function(data){
            callback(data)
        }
    })
}

－－－－－－－－－－－－－－－－－

具体的场景去调用 shareBtnInApp函数

var __param = {
   name:"wwb",
   age:32 
}
window[hxsConfigBridge.globalBridgeObject].shareBtnInApp( __param, function(data){
    // data是app返回的数据
    // 根据app返回的data数据格式来处理业务

    // {
    //     code:200,
    //     data:{
    //         name:"jerry",
    //         work:"前端开发"
    //     }
    // }

    if(data.code == 200){
        alert("回调成功了")
    }
})

参考：
https://www.imooc.com/learn/850

专线服务 idc机房托管基于h5做webrtc的开发基于云服务器的端口监听函数基于webrtc的电话回声消除的研究与实现基于webrtc的视频会议系统的设计与实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/16855.html

h5与native的通信函数，基于url schema的做法

摘要：全局配置信息区域全局配置信息，方便配置工具函数定义区域全局注册唯一的客户端函数，给端去调用客户端必须包括处理有回调的情况下后面有用发送数据函数拼接处理使用发起给端兼容用安卓发太快有问题封装分享按钮的函数具体的场景去调用函数是返回的数据根据全局配置信息区域 // 全局配置信息，方便配置 var hxsConfigBridge = { globalBridgeName:hxsHy...

RobinTang 2019-06-25 11:45 评论0 收藏0
h5与native的通信函数，基于url schema的做法

摘要：全局配置信息区域全局配置信息，方便配置工具函数定义区域全局注册唯一的客户端函数，给端去调用客户端必须包括处理有回调的情况下后面有用发送数据函数拼接处理使用发起给端兼容用安卓发太快有问题封装分享按钮的函数具体的场景去调用函数是返回的数据根据全局配置信息区域 // 全局配置信息，方便配置 var hxsConfigBridge = { globalBridgeName:hxsHy...

tolerious 2019-08-21 17:51 评论0 收藏0
每天10个前端知识点：杂技

摘要：个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。把一个逻辑值转换为字符串，并返回结果。注册后，可直接调用的接口，并获取的返回值。个人博客已上线，欢迎前去访问评论！无媛无故 - wangchloe的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。 toString() && valueOf() JSON ...

dongfangyiyu 2019-08-29 12:37 评论0 收藏0
每天10个前端知识点：杂技

摘要：个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。把一个逻辑值转换为字符串，并返回结果。注册后，可直接调用的接口，并获取的返回值。个人博客已上线，欢迎前去访问评论！无媛无故 - wangchloe的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。 toString() && valueOf() JSON ...

marser 2019-08-20 16:45 评论0 收藏0
每天10个前端知识点：杂技

摘要：个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。把一个逻辑值转换为字符串，并返回结果。注册后，可直接调用的接口，并获取的返回值。个人博客已上线，欢迎前去访问评论！无媛无故 - wangchloe的个人博客以下内容若有问题烦请即时告知我予以修改，以免误导更多人。 toString() && valueOf() JSON ...

bluesky 2019-08-05 11:19 评论0 收藏0