跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信_uniappjsbridgeready(2)

├─common      
├─components        
├─hybrid  
│  └─html  
│          test.html        
├─pages              
├─static  
│  App.vue  
│  main.js  
│  manifest.json  
│  pages.json

与 html 文件相关的 css、js 等本地资源，同样放在这个 hybrid->html 目录下。

这个hybrid目录不会被编译器编译，所以这里的不能放vue文件，而其他目录也不能放本地HTML文件。

未来hybrid目录还会支持其他语言在uni-app的中的混合使用。

二、注意事项

📢 注意事项：
APP中有vue页面及nvue页面，两种页面均可内嵌web-view，但两种页面的表现不一：

• 每个vue页面，其实都是一个webview，而vue页面里的web-view组件，其实是webview里的一个子webview。这个子webview被append到父webview上。
• vue页面会自动铺满整个页面，接收web-view页面通信使用的是@message；
• nvue页面则需要指定页面宽高，接收web-view页面通信使用的是@onPostMessage；
• app-vue下web-view组件不支持自定义样式，而v-show的本质是改变组件的样式。即组件支持v-if而不是支持v-show。
• <web-view> 组件在 vue页面默认铺满全屏并且层级高于前端组件。App端想调节大小或在其上覆盖内容需使用plus规范或通过subNvue实现。
• H5端的web-view其实是被转为iframe运行，使用的是当前的浏览器；
• App端，iOS，是分为UIWebview和WKWebview的，2.2.5+起默认为WKWebview；
• nvue web-view 必须指定样式宽高；
• App 网页向应用 postMessage 为实时消息；
• app-nvue web-view 默认没有大小，可以通过样式设置大小，如果想充满整个窗口，设置 flex: 1 即可，标题栏不会自动显示 web-view 页面中的 title。如果想充满整个窗口且想要显示标题，推荐使用 vue 页面的 web-view(默认充满屏幕不可控制大小), 想自定义 web-view 大小使用 nvue web-view；

注意⚠️：使用uni-app发布为H5项目时，若存在页面嵌套，可使用web-view，但是消息通信不支持通过@message实现，可从官方文档的平台差异说明处获悉。可通过 window.postMessage 实现双端通信。

有关 window.postMessage ，详参博文：

• 《Vue进阶（八十六）：iframe 结合 window.postMessage 实现跨域通信》
• 《Vue进阶（九十二）：应用 postMessage 实现窗口通信》
• 《