如今,各大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。 默认情况下,组件是全屏的,并且高于前端组件。应用程序端需要使用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);
}
});
|