由Vue打包发布的网页被加载后，无法和快应用进行通信

一路有你

主题：由Vue打包发布的网页被加载后，无法和快应用进行通信 问题发生场景： 1、在快应用中通过 web 组件加载一个网页： 假设 url 的值为：https://xxx.xxx.xxx/index.html 并且在网页加载完成后（即在 onPageFinishd ），调用了下面的命令： onPageFinishd(e){ this.$element('webx').postMessage({ message: '这是来自快应用的消息，网页你收到吗？' }) } 2、如果上面的 url 变量指向的网页是通过 Vue.js 的 Vue CLI 制作，并通过 WebPack 打包发布的，那么按照官方文档所述： https://doc.quickapp.cn/widgets/web.html 我已在 index.html 中写了相关的代码，但经测试，无法实现快应用和网页的通信。 但是，如果 url 变量指向的网页不是通过 Vue 制作打包发布的，而是一般简单的网页，那确实是可以实现通信的。 所以，我怀疑是 Vue 打包的原因，但不得其解。很困惑。 怎么办呢？我提供给快应用加载的外部页面基本都用 Vue 做的，现在卡在和快应用通信功能这块了。 求大神们帮解答。 谢谢！！

一路有你

在 小米快应用客服 的帮助下，我终于找到了问题所在：我之前没有加 web 组件的 trustedurl 属性！ 其实如果是一般网页，那么web组件的 trustedurl 会默认添加 src属性 的初始值，因此造成了只要没有网页内又跳转其它网页的情况，确实可以不显式的给 trustedurl 赋值，就能实现快应用和网页之间通信。但是这个偷懒，碰上 vue 的网页就被惩罚了！ 实践证明：如果快应用的 web 组件加载的是 vue 的网页，那么必须显式的写好 trustedurl 属性并赋值，才能实现快应用和被加载网页间的双向通信。（ 即便是快应用单向通信发消息给vue网页，也必须要写好 trustedurl 属性 ）。 trustedurl 属性值该怎么写才合法呢？下面两个文档地址都有实际的代码示例，很明确： https://github.com/quickappcn/sample/blob/master/src/scenario/web/postMessage/index.ux https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-web#h1-1575537532153 查找 trustedurl 关键字，再顺藤摸瓜就找到了。 此外，还可以是下面这样的写法： trustedurl 的值为数组： [/^http:\/\/xxx.xxx.xxx.xxx/, /^https:\/\/xxx.xxx.xxx.xxx/] ( 上面的 xxx.xxx.xxx.xxx 是被加载的网页和希望与快应用进行通信的网页地址的实际域名，比如类似：sports.sina.com.cn ） 总结：如果希望在快应用和被加载进来的网页之间进行双向通信，那不论加载的是一般网页，还是用 vue 制作的网页，以及其它网页： 一定要使用 trustedurl 属性！ 一定要使用 trustedurl 属性！ 一定要使用 trustedurl 属性！ 重要的话说三遍！ 最后感谢 小米快应用客服 的帮助！

一路有你

补充：在 vue 的网页中使用 system 的事件和方法来与快应用通信，可以这样写，比如下图的代码是在 App.vue 中：

天使小男

你好 我能加下你的微信吗 我的是yanangrace 我遇到了同样的问题 ，但好像 加了 新人地址也不行 我是vue 单向通信没问题 但是一来一回那种 H5 就收不到 就像不触发onmessage 一样

1429715206@qq.c

天使小男 发表于 2020-12-29 11:06 你好 我能加下你的微信吗 我的是yanangrace 我遇到了同样的问题 ，但好像 加了 新人地址也不行 我是vue 单 ...

大佬有做出来么，可以提供下代码么

SIngle-Q

一路有你 发表于 2020-8-6 17:57 在 小米快应用客服 的帮助下，我终于找到了问题所在：我之前没有加 web 组件的 trustedurl 属性！ 其实如 ...

这个和快应用的通信方式是实时通信吗