闲谈Hybrid
前言
当经常需要更换样式,产品迭代,那么我们应该考虑hybrid混合开发,上层使用Html&Css&JS做业务开发，底层透明化、上层多多样化，这种场景非常有利于前端介入，非常适合业务快速迭代.
webview
app有时需要去替换我们app的html、css……,文件非常多,需要我们在app启动的时候从服务器下载zip包,解压,这过程当然也需要进行版本管理,下载前可以进行版本对比,进行版本更新
file协议
通过file://从本地加载
Hybrid和H5
- hybrid开发成本、运营成本相对较高
- hybrid运行相对流畅、H5还会有短暂的加载
- hybrid适合产品型、H5适合运营
JS和客户端通信
WebViewJavascriptBridge
- 在Android中引用控件
<!-- webview 演示web调用Java -->
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</com.github.lzyzsd.jsbridge.BridgeWebView>
<com.kingdee.k3.scm.wms.core.widget.webview.BridgeWebView
android:id="@+id/bwv_detail"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1">
</com.kingdee.k3.scm.wms.core.widget.webview.BridgeWebView>
- 加载H5页面
//Android向js端发送数据 调用webview callback
webView.callHandler("functionInJs", "data from Java", new CallBackFunction() { @Override
public void onCallBack(String data) {
// TODO Auto-generated method stub
Log.i(TAG, "reponse data from js " + data);
} });
例如//此时为新增数据
mWebView.callHandler("addBill", mPresenter.getAddNewDataParams(), data -> {
//发送给客户端成功后
Timber.i("addDatal", "handler = addData, data from web = " + data);
});
- js调用Android
//调用本地java方法
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': str1}
, function(responseData) {
document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
}
);
android端
//必须和js同名函数，注册具体执行函数，类似java实现类。
webView.registerHandler("submitFromWeb", new BridgeHandler() { @Override
public void handler(String data, CallBackFunction function) { String str ="这是html返回给java的数据:" + data;
// 例如你可以对原始数据进行处理
makeText(MainActivity.this, str, LENGTH_SHORT).show(); Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
function.onCallBack( str + ",Java经过处理后截取了一部分："+ str.substring(0,5));
} });
Schema协议
weixin://dl/general
weixin://dl/favorites 收藏
weixin://dl/scan 扫一扫
weixin://dl/feedback 反馈
weixin://dl/moments 朋友圈
weixin://dl/settings 设置
weixin://dl/notifications 消息通知设置
weixin://dl/chat 聊天设置
weixin://dl/general 通用设置
weixin://dl/officialaccounts 公众号
weixin://dl/games 游戏
weixin://dl/help 帮助
weixin://dl/feedback 反馈
weixin://dl/profile 个人信息
weixin://dl/features 功能插件
模拟扫一扫功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width,user-scalable=1">
<title>Schema</title>
</head>
<body>
<button id="btn">扫一扫</button>
<script type="application/javascript">
function invokeScan() {
window['_invoke_scan_callback_'] =function (results) {
alert(results);
}
var iframe=document.createElement('iframe');
iframe.style.display='none';
iframe.src='weixin://dl/scan?k1=v1&callback=_invoke_scan_callback_';
var body =document;
body.appendChild(iframe);
setTimeout(function(){
body.removeChild(iframe);
iframe=null;
})
}
document.getElementById('btn').addEventListener('click',function(){
invokeScan();
})
</script>
</body>
</html>
简单封装
(function(window){
function invokeAppShare(data,callback){
_invoke_app('share',data,callback)
}
function invokeAppScan(data,callback){
_invoke_app('scan',data,callback)
}
window.invoke={
share:invokeAppShare,
scan:invokeAppScan
}
var schema ="ctapp://utils"
window._invoke_app =function(type,data,callback){
switch(type){
case window.invokeType.SHARE:
schema= '/'+window.invokeType.SHARE
//分享
break;
case window.invokeType.SCAN:
//扫码
break;
}
schema += '?type=app'
for(var key in data){
if(data.hasOwnProperty(key)){
schema+= '&' +key +'=' +data[key]
}
}
var callbackName='';
if(typeof callback === 'string'){
callbackName=callback
}else{
callbackName= callback+ Data.now().toString()
window[callbackName] =callback
}
schema+='&callback='+callbackName;
var iframe=document.createElement('iframe');
iframe.style.display='none';
iframe.src=schema;
var body =document;
body.appendChild(iframe);
setTimeout(function(){
body.removeChild(iframe);
iframe=null;
})
}
})(window)
window.invokeType={
SHARE:'share',
SCAN:'scan'
}
调用
document.getElementById('btn').addEventListener('click',function(){
window.invoke.scan({k1:'v1'},function () {
});
})
闲谈Hybrid的更多相关文章
- Hybrid App技术批量制作APP应用与跨平台解决方案
前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前 ...
- 利用C#开发移动跨平台Hybrid App（一）：从Native端聊Hybrid的实现
0x00 前言 前一段时间分别读了两篇博客,分别是叶小钗兄的<浅谈Hybrid技术的设计与实现>以及徐磊哥的<从技术经理的角度算一算,如何可以多快好省的做个app>.受到了很多 ...
- 浅谈Hybrid技术的设计与实现第三弹——落地篇
前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...
- 浅谈Hybrid技术的设计与实现第二弹
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
- 浅谈Hybrid技术的设计与实现
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...
- OpenStack 企业私有云的若干需求（4）：混合云支持 (Hybrid Cloud Support)
本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...
- Hybrid APP混合开发的一些经验和总结
http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...
- Hybrid App经验解读 一
郑昀编纂 关键词:Hybrid,Zepto,Fastclick,Backbone,sui,SPA,pushState,跨域,CORS click 事件还是 tap 事件? Zepto 的 show/h ...
- 【转载】用Ionic开发hybrid APP
使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势.而且私以为在目前激烈而又变化快速的移动 ...
随机推荐
- Navicat工具、pymysql模块
一 IDE工具介绍(Navicat) 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具,我们使用Navicat工具,这个工具本质上就是一个socket客户端,可视化的连接m ...
- Python-并发编程(线程)
之前我们说了并发编程中的进程问题,几天我们来聊聊并发编程中的线程问题. 一.背景知识 1.进程 之前我们已经了解了操作系统中进程的概念,程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能 ...
- System.Net.Mail 邮件发送示例
前言:OA自动发送邮件的程序不好使,SQL Server 存储过程邮件发送程序好使,但是不利于标准化和维护,于是觉得是适合找些“轮子”武装一下.想起之前学习过System.Net.Mail ,于是再次 ...
- ES6入门——变量的解构赋值
1.数组的解构赋值 以前为变量复制,只能直接指定值.现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 本质上,这种写法属于模式匹配,只要等 ...
- 用两个栈实现队列（C++ 和 Python 实现）
(说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 a ...
- Java中的volatile关键字的功能
Java中的volatile关键字的功能 volatile是java中的一个类型修饰符.它是被设计用来修饰被不同线程访问和修改的变量.如果不加入volatile,基本上会导致这样的结果:要么无法编写多 ...
- 使用intellij idea搭建MAVEN+SSM(Spring+SpringMVC+MyBatis)框架
基本概念 使用SSM(Spring,SpringMVC和Mybatis) 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod ...
- PPTP vs. OpenVPN vs. L2TP/IPsec vs. SSTP
Which is the Best VPN Protocol? PPTP vs. OpenVPN vs. L2TP/IPsec vs. SSTP Want to use a VPN? If you’r ...
- c# HttpWebRequest与HttpWebResponse
[转]c# HttpWebRequest与HttpWebResponse 绝技 如果你想做一些,抓取,或者是自动获取的功能,那么就跟我一起来学习一下Http请求吧. 本文章会对Http请求时的Get和 ...
- commons-lang（一）
写在开头的话: 在工作中,经常会要用到一些公用的组件包,比如日期,String这些等,换过几次工作的朋友对这事肯定比较深刻,如果自己有积累的还好,对于没有积累的同学,尤其是规模较小的公司,怕是又要重头 ...