摘要:什么是即混合即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到端存在价值可以快速迭代更新无需审核体验流畅和体验基本类似减少开发和沟通成本双端公用一套代码是中的一个组件中可以有也可以没有用于加载页面即一个小型的浏
什么是hybrid
hybrid即“混合”,即前端和客户端的混合开发
需前端开发人员和客户端开发人员配合完成
某些环节可能涉及到server端
hybrid存在价值可以快速迭代更新(无需app审核)
体验流畅(和NA体验基本类似)
减少开发和沟通成本,双端公用一套代码
webview是app中的一个组件(app中可以有webview,也可以没有)
用于加载h5页面,即一个小型的浏览器内核
file协议浏览器打开本地文件,就是通过使用file协议
file协议:本地文件,快
http(s)协议:网络加载,慢
使用场景使用NA:体验要求极致,变化不频繁(如头条首页)
使用hybrid:体验要求高,变化频繁(如头条的新闻详情页)
使用h5:体验无要求,不常用(如举报,反馈等页面)
具体实现前端做好静态页面(html,js,css),将文件交给客户端
客户端拿到前端静态页面,以文件形式储存在app内
客户端在一个webview中
使用file协议加载静态页面
hybrid更新上线流程分版本,有版本号,如201803211015
将静态文件压缩成zip包,上传到服务端
客户端每次启动,都去服务端检查版本号
如果服务端版本号大于客户端版本号,就去下载最新的zip包
下载完之后解压,覆盖原有文件
hybrid和h5的区别hybrid优点:
体验更好,跟NA体验基本一致
可快速迭代,无需app审核
hybrid缺点:
开发成本高:联调,测试,查bug都比较麻烦
运维成本高
适用场景
产品都稳定功能,体验要求高,迭代频繁.产品型(hybrid)
单次运营活动(如xx红包)或不常用功能.运营型(h5)
schema协议 -- 前端和客户端通讯的约定网上搜的微信部分的schema协议
weixin://dl/scan 扫一扫
function invokeScan() {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "weixin://dl/scan"; // iframe 访问 schema
var body = document.body || document.getElementByName("body")[0];
body.appendChild(iframe);
setTimeout(function(){
body.removeChild(iframe); // 销毁iframe
iframe = null;
});
}
document.getElementById("btn").addEventListener("click", function(){
invokeScan(); // html调用schema协议
})
// 如果要加上参数和callback,那么就要这么写
window["_weixin_scan_callback"] = function(result) {
alert(result);
}
// ...省略...
iframe.src = "weixin://dl/scan?k1=v1&k2=v2&callback=_weixin_scan_callback";
// ...省略...
封装schema
voke.js
(function (window, undefined) {
// 封装schema
function _invoke(action, data, callback){
// 拼装schema协议
var schema = "myapp://utils/" + action;
// 拼装参数
schema += "?a=a";
for(key in data){
if(data.hasOwnProperty(key)){
schema += "&" + key + "=" + data[key];
}
}
// 拼装callback
callbackName = "";
if(typeof callback === "string"){
callbackName = callback;
} else {
callbackName = action + Date.now();
window[callbackName] = callback;
}
schema += "callback=callbackName";
// 触发schema
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = schema;
var body = document.body;
body.appendChild(iframe);
setTimeout(() => {
body.removeChild(iframe);
iframe = null;
});
}
window.invoke = {
share: function (data, callback) {
_invoke("share", data, callback);
}
}
})(window);
index.html
内置上线
Document
- document.getElementById("btn").addEventListener("click",function(){
- window.invoke.share({
- titile:"111",
- content:"2222"
- }, function(res){
- if (res.status){
- alert("分享成功!");
- } else {
- alert(res.message);
- }
- });
- });
将以上封装的代码打包,叫做invoke.js,内置到客户端
客户端每次启动webview,都默认执行invoke.js
本地加载,免去网络加载都时间,速度会更快
本地加载,没有网络请求,黑客看不到schema协议,更安全
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53789.html
摘要:什么是即混合即前端和客户端的混合开发需前端开发人员和客户端开发人员配合完成某些环节可能涉及到端存在价值可以快速迭代更新无需审核体验流畅和体验基本类似减少开发和沟通成本双端公用一套代码是中的一个组件中可以有也可以没有用于加载页面即一个小型的浏 什么是hybrid hybrid即混合,即前端和客户端的混合开发 需前端开发人员和客户端开发人员配合完成 某些环节可能涉及到server端 h...
摘要:平日学习接触过的网站积累,以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。 平日学习接触过的网站积累,以每月的形式发布。2017年以前看这个网址:http://www.kancloud.cn/jsfron... 概况 在线地址:http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报 提交原则: 技...
阅读 770·2021-11-18 10:07
阅读 2995·2021-09-22 16:04
阅读 968·2021-08-16 10:50
阅读 3542·2019-08-30 15:56
阅读 1852·2019-08-29 13:22
阅读 3125·2019-08-26 17:15
阅读 1424·2019-08-26 10:57
阅读 1194·2019-08-23 15:23
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要