混合开发中JS与APP通信的实现原理：

JS通过schema协议，传递参数和全局回调函数给APP端

APP执行完（如微信扫一扫）后，调用协议中传入的回调函数，在前端执行回调处理。

默认写法：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hybrid中schema协议的使用</title>
</head>
<body>
<button id="btn1">扫一扫</button>
<script>
function invokeScan(){

//APP执行的回调函数
window['_invoke_scan_callback'] = function(result){
alert(result);
}

var iframe = document.createElement("iframe");
iframe.style.display="none";
//iframe.src = 'weixin://dl/scan'; //重要
iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&k3=v3callback=_invoke_scan_callback';
var body = document.body;
body.appendChild(iframe);
setTimeout(function(){
body.removeChild(iframe);
iframe = null;
});
}
document.getElementById("btn1").addEventListener("click",function(){
invokeScan();
});
</script>
</body>
</html>

封装后如下：

APP中的schema.js

//封装schema

//如果data和callback非必填参数，可在函数内做些兼容性处理
function invokeScan(type,data,callback){

var iframe = document.createElement("iframe");
iframe.style.display="none";
//iframe.src = 'weixin://dl/scan'; //重要
//
//拼接schema协议：
var schema = 'myapp://dl';
schema += "/"+type; //传入类型
schema += "?a=a"; //避免判断是否加?

if(typeof data != "undefined"){
for(var key in data){
if(data.hasOwnProperty(key)){
_src+="&"+key+"="+data[key];
}
}
}

//协议中增加callback回调函数
var callBackName = '';
//APP执行的回调函数
if(typeof callback != "undefine"){
if(typeof callback ==="string"){ //传入的是回调名称
callBackName = callback;
}
else{ //传入的是回调函数
callBackName = type + Date.now();　　//　　Date.now() == new Date().getTIme()
}
window[callBackName] = callback;
_src+='&callback='callBackName;
}

iframe.src = _src;
var body = document.body;
body.appendChild(iframe);
setTimeout(function(){
body.removeChild(iframe);
iframe = null;
});
}

//将schena协议暴露给全局
/*
写法一：
window.invokes = {
scan:function(data,callback){ //扫一扫
invokeScan("scan");
},
share:function(data,callback){ //拍照
invokeScan("share",data,callback)
}
}
*/

//写法二：功能进一步才分
window.invoke = {
scan:_scan,
share:_share
}

function _scan(data,callback){ //扫一扫
invokeScan("scan");
}

function _share(data,callback){ //拍照
invokeScan("share",data,callback)
}

window.init = function(id){
return document.getElementById(id);
}

APP中的html调用：

<body>
　　<button id="btn1">扫一扫</button>
　　<button id="btn2">拍照</button>
　　<script type="text/javascript" src="./schema.js"></script>
<script>
//封装完成后，页面调用方法如下
//
//扫一扫
init("btn1").addEventListener("click",function(){
　　window.invoke.scan();
});
//照相
init("btn2").addEventListener("click",function(){
　　window.invoke.share({"name":"zs","age":11},function(result){
　　　　if(result.code===0){
　　　　　　alert(result);
　　　　}
　　　　else{
　　　　　　alert(result.message);
　　　　}
　　});
});

</script>
</body>

Hybrid混合开发中schema协议的使用与封装的更多相关文章

  1. 聊聊 iOS 开发中的协议

    前言 何为协议,简单来说在OC中我们使用关键字@protocol可以声明一个协议,并在协议中添加多个属性.方法供于遵循者实现,从某个角度上来说,这是一种不同于category机制的category.在 ...

  2. hybrid app开发中：苹果移动设备实用Meta标签

    hybrid app开发中:苹果移动设备实用Meta标签 “apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式 具体效果如下: status-bar- ...

  3. angular开发中对请求数据层的封装

    代码地址如下:http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项目 ...

  4. React Native混合开发中必须要学会点FlexBox布局

    在前面的案例中,界面的搭建都是采用CSS的布局,基于盒子模型,依赖 display属性 , position属性, float属性.但对于那些特殊布局非常不方便,比如,垂直居中. 一种全新的针对web ...

  5. Android app开发中用户协议（使用条款）文字自己主动换行

    用户协议(使用条款)文字自己主动换行处理 转载请注明出处:http://blog.csdn.net/u012301841/article/details/46648821 我们在开发app的时候.常常 ...

  6. H5混合开发中android终端和ios终端常见的兼容问题1

    转自 https://blog.csdn.net/xuehu837769474/article/details/80603898 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上 ...

  7. 记录Vue和Jquery混合开发中关于点击事件的一个bug

    最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...

  8. 混合开发中ios兼容问题

    1. z-index无效,设置层级,发现再ios中无效,后来发现是设置了 -webkit-overflow-scrolling:touch 设置这个属性之后.层级设置失效 2.@keyup事件的问题, ...

  9. H5混合开发中android终端和ios终端常见的兼容问题2

    转自 https://www.cnblogs.com/stoneniqiu/p/6077112.html 1.ios键盘挡住输入框. setInterval(function () { if (doc ...

随机推荐

  1. 信息检索及DM必备知识总结：luncene

    原文链接:http://blog.csdn.net/htw2012/article/details/17734529 有少量修改!如有疑问,请访问原作者. 一:信息检索领域: 信息检索和网络数据领域( ...

  2. JS中常见问题

    //s金额 n保留几位小数 默认保留两位小数 s代表金额,n代表保留的小数位数 function formatMoney(s, n) { n = n > 0 && n <= ...

  3. CorelDRAW X7中相机滤镜呈现出的复古照片效果

    CorelDRAW X7软件中相机效果滤镜较之以前版本又增添了许多功能,模拟各种“相机”镜头产生的效果,包括彩色.相片过滤器.棕褐色色调和时间器效果,可以让照片回到历史,展示过去流行的摄影风格.以下步 ...

  4. __str__和__repr__

    Python 中的 __str__ 与 __repr__ 到底有什么差别   很多时候我们自己编写一个类,在将它的实例在终端上打印或查看的时候,我们往往会看到一个不太满意的结果. 类默认转化的字符串基 ...

  5. WIN10打开网络共享文件夹提示0x80004005怎么解决？（转载）

    发布时间:2018-07-04 12:48 来源:www.pipimp3.com 作者:笔记本系统 WIN10打开网络共享文件夹提示0x80004005怎么解决?针对这个问题,小编整理了方案,有兴趣的 ...

  6. vue的计算属性get和set

    1.计算属性是用来存储数据,但具有以下几个特点: a.数据可以进行逻辑处理操作. b.对计算属性中的数据进行监视. 2.计算属性和普通属性的区别: a.计算属性是基于它的依赖进行更新的,只有在相关依赖 ...

  7. Project Euler 39 Integer right triangles（ 素勾股数 ）

    题意:若三边长 { a , b , c } 均为整数的直角三角形周长为 p ,当 p = 120 时,恰好存在三个不同的解:{ 20 , 48 , 52 } , { 24 , 45 , 51 } , ...

  8. [luogu4107 HEOI2015] 兔子与樱花（树形dp+贪心）

    传送门 Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个 ...

  9. HDU 1475 Pushing Boxes

    Pushing Boxes Time Limit: 2000ms Memory Limit: 131072KB This problem will be judged on PKU. Original ...

  10. H3C SecPath U200-S 如何在内网使用外网IP地址访问内网服务器

    H3C SecPath U200-S 如何在内网使用外网IP地址访问内网服务器 ------------------------------------------------------------ ...