hybrid技术

最新推荐文章于 2024-03-30 09:36:59 发布

浅笑zcy

最新推荐文章于 2024-03-30 09:36:59 发布

阅读量278

点赞数

分类专栏：笔记文章标签：前端

原文链接：https://blog.csdn.net/u013565133/article/details/102499720?ops_request_misc=&request_id=&biz_id=102&utm_term=hybrid&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-102499720.nonecase&spm=1018.2226.3001.4187

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了hybrid应用的独特价值，如无需审核、快速体验流程和单一代码部署。重点讲解了其更新机制，利用file://协议加载本地文件的优势以及通信机制，特别是通过schema协议实现前端与客户端的高效交互。通过实例展示了如何在html中使用invoke.js进行操作。

摘要由CSDN通过智能技术生成

hybird

hybird使用file://协议，加载本地文件（html,css,js），断网也可以使用，加载速度快，不会出现H5页面请求的白屏。

hybird价值

1.无需审核，无限次发版。2.体验流程。3.一套代码。

hybird更新方法

app冷启动，hybird本地版本号与服务器端版本号对比，有新版本就下载覆盖本地文件。

通信机制

scheme协议就是用来规定前端和客户端如何进行通讯。

客户端每次启动webview默认执行invoke.js文件，提供方法挂载到window上。

js访问客户端的能力，传递参数和callback函数。客户端通过回调返回内容。

eg:

invoke.js

//自执行函数，防止污染全局变量
(function (window, undefined) {

// 调用 schema 的封装
function _invoke(action, data, callback) {
// 拼装 schema 协议
var schema = 'myapp://utils/' + action

// 拼接参数
schema += '?a=a'
var key
for (key in data) {
if (data.hasOwnProperty(key)) {
schema += '&' + key + data[key]
}
}

// 处理 callback
var callbackName = ''
if (typeof callback === 'string') {
callbackName = callback
} else {
callbackName = action + Date.now()
window[callbackName] = callback
}
schema += 'callback=callbackName'

// 触发
var iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = schema // 重要！
var body = document.body
body.appendChild(iframe)
setTimeout(function () {
body.removeChild(iframe)
iframe = null
})
}

// 暴露到全局变量
window.invoke = {
share: function (data, callback) {
_invoke('share', data, callback)
},
scan: function (data, callback) {
_invoke('scan', data, callback)
}
login: function (data, callback) {
_invoke('login', data, callback)
}
}

})(window)
html文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>Document</title>
</head>
<body>
<button id="btn1">扫一扫</button>
<button id="btn2">分享</button>

// var iframe = document.createElement('iframe')
// iframe.style.display = 'none'
// // iframe.src = 'weixin://dl/scan' // 重要！
// iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&k3=v3&callback=_invoke_scan_callback_'
// var body = document.body
// body.appendChild(iframe)
// setTimeout(function () {
// body.removeChild(iframe)
// iframe = null
// })
// }

document.getElementById('btn1').addEventListener('click', function () {
// invokeScan()
window.invoke.scan({}, function () {})
})
document.getElementById('btn2').addEventListener('click', function () {
window.invoke.share({
title: 'xxx',
content: 'yyy'
}, function (result) {
if (result.errno === 0) {
alert('分享成功')
} else {
alert(result.message)
}
})
})
</script>
</body>
</html>

浅笑zcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hybrid技术

hybirdhybird使用file://协议，加载本地文件（html,css,js），断网也可以使用，加载速度快，不会出现H5页面请求的白屏。hybird价值1.无需审核，无限次发版。2.体验流程。3.一套代码。hybird更新方法app冷启动，hybird本地版本号与服务器端版本号对比，有新版本就下载覆盖本地文件。通信机制scheme协议就是用来规定前端和客户端如何进行通讯。客户端每次启动webview默认执行invoke.js文件，提供方法挂载到window上。js
复制链接

扫一扫