当前位置：首页 > news >正文

制作网站的步骤网站怎么营销推广

news 2025/7/8 4:09:16

制作网站的步骤,网站怎么营销推广,塑料模板厂塑料模板生产厂家,网站seo博客WebView与APP交互WebView与APP交互，即网页通过JSBrige调用APP的功能，APP也可以通过JSBrige调用网页提供的方法。最近刚好接触到这一块，记录一下前端侧的实际操作过程,这篇文章适合还没接触过这一块的同学们，这里不讲原理&#xff…

WebView与APP交互

WebView与APP交互，即网页通过JSBrige调用APP的功能，APP也可以通过JSBrige调用网页提供的方法。最近刚好接触到这一块，记录一下前端侧的实际操作过程,这篇文章适合还没接触过这一块的同学们，这里不讲原理，直接开始实战的过程。

准备工作

与客户端同学沟通好使用的JSBrige库，我这里使用的是下面这两个库：

iOS(1.1w+ Star): https://github.com/marcuswestin/WebViewJavascriptBridge

Android(6k+ Star): https://github.com/lzyzsd/JsBridge

Star数量比较高，使用的企业也比较多，所以还是比较可靠的，可以在它们的文档中示例代码。

注意： github上有很多这样的库，但最好配套使用，即iOS和Android注入的jsBrige名称一致，我们前端使用时比较方便统一。

开发步骤

1. 统一封装APP注入的JSBrige

ios和android注入的jsbrige可能会有些差异，所以在使用前我们需要抹平不同客户端的差异。
如果app的同学使用了上面说的库，安卓和iOS会在WebView中的window下注入一个WebViewJavascriptBridge的对象，iOS有可能是注入WVJBCallbacks的数组，也有可能需要通过iframe来注入。iOS的文档中给出了一个兼容的示例代码：

function setupWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }window.WVJBCallbacks = [callback];var WVJBIframe = document.createElement('iframe');WVJBIframe.style.display = 'none';WVJBIframe.src = 'https://__bridge_loaded__';document.documentElement.appendChild(WVJBIframe);setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

我们可以直接使用上面的代码，为了使用方便，在页面onload后，我们将这个函数挂在window下：

window.onload = function () {function setupWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }window.WVJBCallbacks = [callback];var WVJBIframe = document.createElement('iframe');WVJBIframe.style.display = 'none';WVJBIframe.src = 'https://__bridge_loaded__';document.documentElement.appendChild(WVJBIframe);setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)}window.setupWebViewJavascriptBridge = setupWebViewJavascriptBridge
}

window.setupWebViewJavascriptBridge这个函数，就是我们所说的JSBridge,即WebView与APP交互的桥梁。

2. JS调用APP的方法

APP端的同学需要先用库提供的方法在APP端实现一个方法，方法名比如：playMusic(musicId)，可以传递参数musicId,表示让APP开始播放某一首音乐。js调用时如：

window.setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('playMusic', { musicId: 1 }, function (data) {console.log('app触发成功了，音乐正在播放。。。APP回调返回的数据：', data)})})

上面相当于向app发起了一个playMusic请求，app收到请求后，执行相关的动作，然后可以callback，网页可以拿到回调并继续做相关动作（需要的话）。

3. APP调JS提供的方法

同样的道理，若想APP能调用JS提供的方法，JS中要先注册这个方法，方法名比如stateChange(state)，JS注册方法：

window.setupWebViewJavascriptBridge(function (bridge) {bridge.registerHandler('stateChange', function (data, responseCallback) {console.log('收到APP请求stateChange事件，请求的数据是：', data)// 可以返回给app一个回调responseCallback('朕已经收到APP爱卿的请求了，且退下！')})
})

到这里，WebView与app的交互其实就完成了，就是这么简单。

注意事项

1. `window.onload`时就`callHandler`可能不成功

一般在Android中会出现这个问题，这是因为APP注入的WebViewJavascriptBridge还不存在，JS就调用其中的方法了，所以就会没有效果。而Android的库也给出了这个注意事项，所以得这样写：

window.onload = function () {function registerAppEvent () {window.setupWebViewJavascriptBridge(function (bridge) {bridge.registerHandler('stateChange', function (data, responseCallback) {console.log('收到APP请求，请求的数据是：', data)// 可以返回给app一个回调responseCallback('朕已经收到APP爱卿的请求了，且退下！')})})}// 兼容写法 if (window.WebViewJavascriptBridge) {registerAppEvent()} else {document.addEventListener('WebViewJavascriptBridgeReady', function() {registerAppEvent()},false)}
}

但这里没有考虑到iOS的情况，在最新的iOS中WebViewJavascriptBridge可能是不存在的，所以上面写法registerAppEvent()在iOS可能无法执行。为了避免多次注入事件，我这里用了setTimeout，兼容两端的流程：

let isInitBridgeEvent = false // 作为是否已注册过事件的标记if (window.WebViewJavascriptBridge) {registerAppEvent()isInitBridgeEvent = true} else {document.addEventListener('WebViewJavascriptBridgeReady',function () {registerAppEvent()isInitBridgeEvent = true},false)// 如果还没注册则再注册一次setTimeout(() => {if (!isInitBridgeEvent) {registerAppEvent()isInitBridgeEvent = true}}, 100)

这坨代码写的很挫，让我尴尬癌都犯了，有没有热心的小伙伴帮我优化下写法[送花花]。