现在不管是桌面客户端还是移动客户端,都会夹杂着一部分H5页面,这种混合式的应用也是我们常说的Hybrid App。为什么会出现Hybrid App呢,早期是因为开发一个Android或iOS的客户端,需要的人力成本比较大,开发周期比较长,后来有些团队就通过将部分页面拆分出来,由前端来完成,再通过在客户端里的Webview来展示。
由于小编我半路转行当程序猿,只对前端领域有所了解,对其他编程领域接触较少,故不探讨Webview的实现原理和与H5页面交互的原理。有兴趣的小伙伴自行百度搜索JSBridge的相关知识,或请教下客户端(Windows、MacOS、Android、iOS)开发的同学,看看如何桥接JS与其他编程语言之间的联系。
凡事都是有好有坏,没有绝对的解决方案。下面我总结下Hybrid App在开发过程中存在的优缺点,各位同学可自行判断Hybrid App的好坏。
优点
缺点
以下代码全部基于前端(react)进行演示,客户端如何实现JS交互我就不多说了,可以找客户端开发的同学了解下。通讯方式有如下两种,都是使用JS代码来完成,兼容性还是挺不错的。
前端通知客户端
在H5页面里触发链接跳转,App Webview检测到链接跳转再进行拦截,因此可以通过URL上携带参数来告知App下一步应该做些什么。
import React, { Component } from "react";
export default class App extends Component {
componentDidMount() {
location.href = "lsbox://toast?msg=页面加载完毕"; // 通知App
}
render() {
return (
<div className="app">
<button type="button" onClick={this.openMask.bind(this)}>点它</button>
</app>
);
}
openMask() {
location.href = "lsbox://mask?toggle=1"; // 通知App
}
}
以上执行了location.href = "lsbox://mask?toggle=1"来通知App打开遮罩层
如果同步触发两个或以上的location.href(下一个location.href接着上一个location.href),App可能只会接收到一个location.href发出的通知,所以需要对下一个location.href使用setTimeout设置通知时间间隔(可使用Async/Await封装优化)
location.href = "lsbox://toast?msg=one";
setTimeout(() => {
location.href = "lsbox://toast?msg=two";
setTimeout(() => {
location.href = "lsbox://toast?msg=three";
}, 100);
}, 100);
客户端通知前端
注入一些全局方法,App Webview直接操作全局方法来控制H5页面,使用window.handleFunc = function() {}这样的形式来定义注入的方法。
import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
list: [0, 1, 2, 3, 4]
};
}
componentDidMount() {
window.addNum = this.addNum.bind(this); // 暴露方法给App
}
render() {
return (
<div className="app">
<ul>{this.state.list.map(v => <li key={v}>{v}</li>)}</ul>
</div>;
);
}
addNum(num) {
this.setState(prevState => ({
list: prevState.list.concat(num);
}));
}
}
以上在组件加载完成后通过window.addNum = this.addNum.bind(this)将指定方法全局暴露到window上,App Webview可直接操作这些方法来控制H5页面。
原文:https://segmentfault.com/a/1190000020786162
选择第三方即时通讯方案,我们应该从以下方面进行考虑:稳定性: 安全性: 功能性: 费用: 运维服务等,有哪些第三方IM即时通讯呢?比如:融云、JPush极光推送、网易云信、环信、云旺OpenIM等
加密算法的分类:对称加密和非对称加密;如果选择对称加密,密码的共享(传输)过程不安全;如果选择非对称加密,加密速度慢。一个完美的解决方案:用对称加密的密钥用于加密数据,用户非对称加密来保护对称加密的密钥,
window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https),端口号( 443 为 https 的默认值)
服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块
一个Angular应用一般情况下包含多个组件,而且要让组件互相之间能进行通讯(数据传送),这样才能构成一个有机的完整系统。组件之间有几种典型的关系:父子关系、兄弟关系、没有直接关系
Vue 2 中要进行跨元件通讯,除了Vuex 以外的另一个常见手法是Event Bus,对于小型专案来说Event Bus 相当方便,仅需要$on、$emit两个语法就能进行跨元件通讯。而Vue 3 中移除了$on、$off等语法
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!