跨平台移动 APP 开发进阶 (三):hbuilder+mui mobile app 开发心酸路
1.问题描述:在实现图片轮转时,若将
置于图片加载之前,图片不会显示,
解决措施:将其置于图片显示之后才会显示。
2.问题描述:
同上面的问题,会遇到报指针为null
的异常。若要获取一个组件的id
,可能带获取的组件还未加载,导致获取失败。
解决措施:将获取组件id
的js
脚本在定义组件id
之后完成。
3.问题描述:页面是由主页面加内容页面组合而成。在主页面做弹出菜单时,弹出菜单无法显示。
问题根源:内容页面遮挡了弹出菜单,致其无法显示。
解决措施:弹出层放在内容页面里,父页面通知内容页面来显示。(使用遮罩蒙板技术解决)
注:在popover
、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover
弹出后,除popover
控件外的其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方的逻辑,而会关闭popover
同时关闭蒙版;再比如侧滑菜单界面,菜单划出后,除侧滑菜单之外的其它区域都会遮罩一层蒙版,用户点击蒙版会关闭侧滑菜单同时关闭蒙版。
这是一个跨webview
的popover
示例,在父webview
中,点击后通过自定义事件通知子webview
,子webview
再执行popover
的显示隐藏逻辑;
思想来源于 Hbuilder 群,启发了自己。通过 HBuilder 自带的示例可以很好的解决自己遇到的问题。
折腾了将近一天这个问题还是没能得到解决!弹出菜单还是被内容页面遮挡。如图一所示,其实自己是想实现图二:
疑惑:父页面如何与内容页面传递数据?
4.问题描述:一个view
有诸多button
,可不可以通过一个函数判断点击的是哪一个button
?并获取其 id
解决措施:
//on中参数的含义依次为事件、选择器、参数、方法,其中选择器与参数为可选项
mui('.mui-content').on('tap','body',function(){
alert(this.id);// (根据id判断是哪一个button)
})
总结:mui
中的方法都是封装的jquery
,所以自己还得从jquery
着手,因为好多方法不会用,不知道参数的含义。
5.问题描述:由于index
页面的顶部导航栏与分类页面的头顶部导航栏相同,header
和content
在不同的webview
中。我想提升代码的复用性(即多个content
页面均使用同一个header
页面),如何解决?Mui
能够做到吗?
解决措施:使用webview
模式选项卡。何谓webview
模式?webview
模式其实就是每个选项卡内容都是一个独立的webview
,彼此之间互相独立、互不影响; 对于较为复杂的业务系统,推荐使用该模式。另外,基于webview
模式的选项卡,支持原生加速的下拉刷新。如下图:
感触:其实很多问题都可以从Hello mui demo
中得到答案。自己要经常操作以求更加熟悉。
6.问题描述:见下
解决措施:见上。
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/3d7a8063d76b6b562f7166fda】。文章转载请联系作者。
评论