• 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存在差异,具体如下:

  1. 在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/*沉浸式状态栏*/
             }
         }
     }
    }
  2. 开启这两个设置后,还需要在html的mete中增加viewport-fit=cover,这是解决ios的兼容问题的
文档更新时间: 2019-10-07 18:16   作者:吴俊源