通讯方式
通讯方式有如下两种,都是使用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打开遮罩层
lsbox
:前端和客户端统一定义链接跳转的协议(喜欢怎样定义协议都行)mask
:App需要执行的动作(喜欢怎样定义动作都行)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页面。