Hybrid混合开发中schema协议的使用与封装
混合开发中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协议的使用与封装的更多相关文章
- 聊聊 iOS 开发中的协议
前言 何为协议,简单来说在OC中我们使用关键字@protocol可以声明一个协议,并在协议中添加多个属性.方法供于遵循者实现,从某个角度上来说,这是一种不同于category机制的category.在 ...
- hybrid app开发中:苹果移动设备实用Meta标签
hybrid app开发中:苹果移动设备实用Meta标签 “apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式 具体效果如下: status-bar- ...
- angular开发中对请求数据层的封装
代码地址如下:http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项目 ...
- React Native混合开发中必须要学会点FlexBox布局
在前面的案例中,界面的搭建都是采用CSS的布局,基于盒子模型,依赖 display属性 , position属性, float属性.但对于那些特殊布局非常不方便,比如,垂直居中. 一种全新的针对web ...
- Android app开发中用户协议(使用条款)文字自己主动换行
用户协议(使用条款)文字自己主动换行处理 转载请注明出处:http://blog.csdn.net/u012301841/article/details/46648821 我们在开发app的时候.常常 ...
- H5混合开发中android终端和ios终端常见的兼容问题1
转自 https://blog.csdn.net/xuehu837769474/article/details/80603898 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上 ...
- 记录Vue和Jquery混合开发中关于点击事件的一个bug
最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...
- 混合开发中ios兼容问题
1. z-index无效,设置层级,发现再ios中无效,后来发现是设置了 -webkit-overflow-scrolling:touch 设置这个属性之后.层级设置失效 2.@keyup事件的问题, ...
- H5混合开发中android终端和ios终端常见的兼容问题2
转自 https://www.cnblogs.com/stoneniqiu/p/6077112.html 1.ios键盘挡住输入框. setInterval(function () { if (doc ...
随机推荐
- 【SQL】SELECT 语句
1.1 SELECT基本语法: Select * |{[distinct]colum|expression [alias],…} from table; 1.2 查询当前用户所有在用的表及视图: HR ...
- Struts2学习笔记 - Part.01
1.关于Struts2中的struts.xml文件中action设置 <!-- 它是一个通用action,此处的*表明它可以处理任意的请求--> <action name=" ...
- vim 常用操作笔记
跳转最后一行 :$ 或 shift+g 跳转第一行 :1 或 gg 设置自动换行 :set wrap 设置不自动换行 :set nowrap
- 互联网的大数据神话——NoSQL
本文摘抄于:<纵横大数据--云计算数据基础设施> 何小朝著 Chapter5. NewSQL--关系数据库联邦/联合 5.4.2 互联网的神话 对强一致性的要求放松,是因为 互联网的分布 ...
- 使用QT创建PythonGUI程序
1. 挑选 GUI设计程序: wxPython Vs. pyQt4 参考链接:http://www.douban.com/group/topic/14590751/ (1):wxWidgets wxP ...
- (转)shiro权限框架详解05-shiro授权
http://blog.csdn.net/facekbook/article/details/54910606 本文介绍 授权流程 授权方式 授权测试 自定义授权realm 授权流程 开始构造Secu ...
- bootstrap与jQuery结合的动态进度条
此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...
- 一文带您了解5G的价值与应用
一文带您了解5G的价值与应用 5G最有趣的一点是:大多数产品都是先有明确应用场景而后千呼万唤始出来.而5G则不同,即将到来的5G不仅再一次印证了科学技术是第一生产力还给不少用户带来了迷茫——我们为什么 ...
- java 常用API 时间 练习
package com.orcal.demc01; import java.util.Date; public class Xuexi { public static void main(String ...
- js操作url参数
function getQueStr(url, ref) //获取参数值 { var str = url.substr(url.indexOf('?') + 1); if (str.indexOf(' ...