native.js设置可缩放的webview并隐藏缩放控件

需求明确:webview页面可以手指缩放,并且不要那个原生控件;

实现思路:

1.使用h5+封装好的方法:设置scalable 属性,并在html中设置meta标签:user-scalable=yes 或不设置,minimum-scale 和maximum-scale 需要注意不要都设为1:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />

mui.openWindow({
    url: "someThing",
    id: "someThing",
    styles: {
        scalable:true
    },
})

如此一来,webview已经可以实现缩放功能,但是会有安卓原生的缩放控件存在,如下图:

如此一个不能更改样式的控件出现在右下角,客户一定会怒发冲冠的,但是在经过研究之后,发现html5plus不提供隐藏这个控件的api,只能通过native.js来写:

2.native.js的方法依旧需要设置meta 标签,但是记得去掉scalable:true ,这个会覆盖我们的代码:

//获取WebSettings
var Webview = plus.android.importClass("android.webkit.WebView");
var WebSettings = plus.android.importClass("android.webkit.WebSettings");
var wv = plus.android.currentWebview();
var setting = plus.android.invoke(wv, "getSettings");
console.log(setting)

//支持缩放
setting.setSupportZoom(true);
setting.setBuiltInZoomControls(true)
//隐藏控件
setting.setDisplayZoomControls(false)

有人在h5+社区里问怎么获取安卓里的WebSettings ,以下就是打印的setting ,可以见到WebSettings 里面的方法都可以调用啦! 各位可以在文档中找到自己需要的:

WebSettings 官方文档:https://developer.android.com/reference/android/webkit/WebSettings.html#setBuiltInZoomControls