uni-app 进阶之内嵌应用【day14】

如今，各大 app 平台都有自己的小程序系统，各种应用可以直接嵌入 app 中，实现一站式体验。使用 uniapp 开发的应用程序如何实现这样的功能？答案是嵌入式 web 视图。获取 android 页面中的中的 webView 嵌入 H5 页面。

WebView webView = findViewById(R.id.webView_h5);//webView.loadUrl("http://127.0.0.1/asset/pages/forAndroidAndH5.html");//嵌入H5页面

添加辅助处理 JS，否则一些 JS 函数会失败，如 alert（）方法

webView.setWebChromeClient(new WebChromeClient(){  public boolean onJsAlert(WebView view, String url, String message, JsResult result){        return super.onJsAlert(view, url, message, result);    }});

每个 Vue 页面实际上都是一个 WebView，Vue 页面中的 web 视图组件实际上是 WebView 中的一个子 WebView。子 WebView 附加到父 WebView。Vue 页面将自动覆盖整个页面，并使用 @消息接收 web 视图页面通信；Nvue 页面需要指定页面宽度和高度，使用 @onpostmessage 接收 web 视图页面通信；app Vue 中的 web 视图组件不支持自定义样式，但 v-show 的本质是更改组件样式。也就是说，该组件支持 V-IF 而不是 V-show。默认情况下，<web view>组件是全屏的，并且高于前端组件。应用程序端需要使用 plus 规范来调整大小或覆盖其上的内容。H5 端的 web 视图实际上使用当前浏览器转换为 iframe；应用程序端 IOS 分为 uiwebview 和 wkwebview。自 2.2.5 版本起，默认为 wkwebview；Nvue web 视图必须指定样式宽度和高度；应用程序网页向应用程序发送实时消息；默认情况下，App nvue web 视图没有大小。可以按样式设置大小。如果要填充整个窗口，可以将 flex 设置为：1。标题栏不会在 web 视图页面中自动显示标题。如果要填充整个窗口并显示标题，建议使用 Vue 页面的 web 视图（无法控制默认全屏），如果要自定义 web 视图的大小，请使用 nvue web 视图；如果参数是字符串，则需要“单引号”。如果参数是数值，则不需要该参数。如果没有参数，只需留下一个（）使用无/无参数和返回值调用 JS 函数

int arg1 = 10;int arg2 = 12;String methodH5 = "androidtoh5WithResult(" + arg1 + "," + arg2 + ")";webView.evaluateJavascript(methodH5, new ValueCallback<String>() {  @Override  public void onReceiveValue(String s) {      System.out.println("=====s:" + s);  }});