APP使用hbuilder打包,技术文档请参考 官方文档
WebView中用vue开发的单页应用
注意:Hbuilder的webview中注入了plus对象,这是js能够调用系统接口的基础,并且安卓和ios在注入时机上存在差异
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,viewport-fit=cover"><!-- IOS沉浸式状态栏兼容 --> <title>oa</title> <!-- 提前注入plus对象 --> <script src="html5plus://ready"></script> </head> <body> </body> </html>
为了APP的显示更加美观,要使用沉浸式状态栏,这个配置安卓和ios存在差异,具体如下:
- 在hbuilder的配置文件中增加节点(immersed只对安卓起作用,UIReserveStatusbarOffset只对ios起作用)
{ "plus" : { "kernel" : { "ios" : "WKWebview" //换webview内核,解决ios环境input获得焦点抖动问题 }, "softinput" : { "navBar" : "none", //去掉软键盘的导航 "auxiliary" : false, "mode" : "adjustResize" //当软键盘弹出时,改变窗口大小 }, "statusbar" : { "immersed" : true /*沉浸式状态栏*/ }, "distribute": { "apple" : { "UIReserveStatusbarOffset" : false/*沉浸式状态栏*/ } } } }
- 开启这两个设置后,还需要在html的mete中增加viewport-fit=cover,这是解决ios的兼容问题的
文档更新时间: 2019-10-07 18:16 作者:吴俊源