漠
  • 发布:2017-12-27 20:47
  • 更新:2017-12-27 20:47
  • 阅读:4210

新窗口&子页面

分类:HTML5+

如果是第一次制作混合app的话,我觉得第一个比较重要的事情是打包,把之前写的页面以一个app的方式呈现出来,会是一件非常令人兴奋的事情。
其次比较重要的事情是窗口的概念。

这里有一个教程,窗口一窗口二,不是我录的……咳咳,其实我也没看。。。。
这个是mui对于窗口的解释:mui窗口

首先,打开新页面,好几种方式;

  1. 使用a连接的href属性,官方不推荐,我也没有研究
  2. 使用plus.webview.open() 简单的open新窗口
  3. 使用plus.webview.create().show(),经检验,这个方法最靠谱,兼容性很高,在安卓4.4以下可以完美兼容,而且可以定义extras//额外扩展参数

最后,子页面。
其实子页面是一个非常有意思的东西。
普通的html中div可以随意的定位和更改显示层级,js也可以随意的更改这个页面的数据和dom。其实,只使用普通的html制作混合app也是可以的
然后,子页面可以理解为一个普通页面的普通div。只是这个div很特别,它是一个自治区,父界面的话(js,css)它听或者不听,完全看它自己的心情。甚至父页面出现滚动条,子页面也不一定随着滚动条滚动。如果之前学习过vue的话,他的子组件的概念和子页面的概念是非常像的。

为什么使用子页面,效率和布局。
效率,官方解释说,某个html的dom树过深的话,会引发卡顿。切割为不同的子页面会更好,我没有测试过,不知道具体的数值,不过应该是真的,但是效率绝对不会低太多,现在手机的cpu我觉得还是可以的。
布局,现在版本的H5 ,优化的还是比较好的。对于布局挺好的。这个地方需要讲的东西太多,说了也没用。太杂了。
声明子页面:plus.webview.getWebviewById().append(plus.webview.create());

需要特别注意的地方:

  1. 作用域:子页面拥有独立的作用域。这个好理解,都已经是html级别了,当然有自己的作用域
  2. 传值:父子页面间的传值可以通过plus.webview.getWebviewById().evalJS();或者在子页面创建的时候,定义extras属性,后期可以直接当作dom自定义属性点出来。
  3. 归属权:父页面关闭的时候,子页面跟着关闭。其余的事情包括show,close,hide,setStyle,都是自己玩自己的。
  4. 获取当前页面: plus.webview.currentWebview();在安卓4.4,及以下,这个属性显示的是当前正在显示的页面,在其余版本,获取的是本身所在的html
  5. 显示级别:子页面的显示优先级永远高于父页面本身的dom的优先级。//上帝视角?
2 关注 分享
1***@qq.com 7***@qq.com

要回复文章请先登录注册