X5WebView vue项目有时无法调用到jsbridge

[liyazhou0221]

X5WebView vue项目有时无法调用到jsbridge

[smallbuer]

部分方法需要在资源未加载完成前调用，这种能举例说明吗？在页面未加载完成前需要调用什么原生的方法呢？

[liyazhou0221]

部分方法需要在资源未加载完成前调用，这种能举例说明吗？在页面未加载完成前需要调用什么原生的方法呢？

getSystemInfo 方法，需要在刚进入时判断是那个系统，区分企业微信和自有App时用到的。

今天重新看这个问题发现，使用vConsole(大概十分之一的几率)如果页面出现打印日志“start jsbridge ... end jsbridge ...”时都无法调用jsbridge，不出现该日志时反而可以正常调用？？？

按照正常的推理，每次打开webView加载页面，注入成功后应该都会出现这个打印日志才读啊？有点看不懂了。感觉像是只要是先加载完成，后注入的话都不可以调用到jsbridge 。

只在onPageFinished时添加注入，每次都会出现该日志，这个看起来是正常的，就是不能调用到jsbridge。好像确实证实了上边的猜想。

不是很懂vue和H5的加载流程，有点猜不到是哪里的问题。

[smallbuer]

部分方法需要在资源未加载完成前调用，这种能举例说明吗？在页面未加载完成前需要调用什么原生的方法呢？

getSystemInfo 方法，需要在刚进入时判断是那个系统，区分企业微信和自有App时用到的。

今天重新看这个问题发现，使用vConsole(大概十分之一的几率)如果页面出现打印日志“start jsbridge ... end jsbridge ...”时都无法调用jsbridge，不出现该日志时反而可以正常调用？？？

按照正常的推理，每次打开webView加载页面，注入成功后应该都会出现这个打印日志才读啊？有点看不懂了。感觉像是只要是先加载完成，后注入的话都不可以调用到jsbridge 。

只在onPageFinished时添加注入，每次都会出现该日志，这个看起来是正常的，就是不能调用到jsbridge。好像确实证实了上边的猜想。

不是很懂vue和H5的加载流程，有点猜不到是哪里的问题。

你可以尝试在vue的mounted生命周期方法中去调用JS桥，例如：
mounted () {
this.toast()
},
..................
methods: {
toast () {
this.$bridge.callhandler('toast', {
'msg': '12222'
}, (response) => {
console.log(response)
})
}
}

请参考如上方式调用JS桥，必定是可以成功的，打印start jsbridge ... end jsbridge代表JS桥的JS对象初始化完成，JS桥可以进行通讯了

[liyazhou0221]

请参考如上方式调用JS桥，必定是可以成功的，打印start jsbridge ... end jsbridge代表JS桥的JS对象初始化完成，JS桥可以进行通讯了

检查了vue工程，大部分的方法调用都在mounted，少部分在created，唯一不在vue的生命周期调用的只有getSystemInfo这个方法。

使用vConsole的命令行查看window.WebViewJavascriptBridge，确实是存在的，说明已经初始化完成了，使用命令行调用其它插件方法也能成功。看起来确实是getSystemInfo在资源未加载完成时调用了，导致无法获取到系统类型，也就无法初始化window.mappType，最终导致不能成功调用其它方法。

在不能修改vue工程配置的情况下，为了兼容这种不确定因素，目前是在onPageFinished中使用loadUrl主动修改window.mappType值，在onPageStarted等其它方法中进行判断注入jsbridge，这样在页面加载完成后调用jsbridge都是可以的。

暂时能想到的解决方法就是这些了，基本上不影响我的应用功能。