APP开发平台 > Blog > APICloud开发者进阶之路 | 深入挖掘Frame的各种应用场景

今日周五!


又到了我们储存知识,开心过周末的时间了,上次《30天,App开发从0到1》中的内容我们已经分享到了第八章,不知道你学习的怎么样呢?不太理解的地方欢迎通过社区讨论或者后台留言告诉我们。今天我们继续学习第九章深入挖掘Frame的各种应用场景。


主要内容


本章将介绍 API 对象的高级内容,读者可以通过这些内容构建用户体验更好的app。


  • 示例 1 巧妙地展示了如何使用 Frame 的系统特性,去模拟实现一些功能组件;

  • 示例 2 展示了 UIScorllPicture 模块的另类使用场景;

  • 示例 3 ~示例 5 展示了模块在复杂逻辑下的实现方式;

  • 示例 6 详细讲解了 api.ajax 方法在实战中的使用技巧和需要注意的事项。理解此示例的讲解内容,对以后的项目开发工作帮助很大。


学习目标


  • (1)使用 Frame 模拟实现按钮功能、窗口组件和侧滑式窗口布局。

  • (2)使用 UIScrollPicture 模块完成引导页的开发。

  • (3)使用 photoBrowser 模块实现自定义样式的图片浏览功能。

  • (4)使用 UIInput 模块实现自定义搜索界面。

  • (5)使用 UIChatBox 模块实现聊天界面。

  • (6)使用 api.ajax 进行接口调用。


9.1 深入挖掘 Frame 的各种应用场景▲▲▲


APICloud app 应用的页面是由 Window+Frame 方式构成,通常认为 Frame 就是作为Window的一个子页面存在的。本节将介绍 Frame 的更多使用场景。本示例所使用的技术难度并不高,但本示例使用的方法和技巧,在 Frame的相关介绍文档中并没有明确的提及和说明。


换一种思维模式,换一个角度,可能会看到不同的风景。本示例更多想展示的是使用这种技巧进行发的思维方式。


下面具体列举几种利用 Frame 的窗口特性来实现不同效果页面的方法。


9.1.1 模拟页面按钮


在 APICloud app 中,UI 类模块的显示级别较高,一般的 DOM 元素无法覆盖在其上。通常遇到需要在 UI 类模块上添加按钮功能时,都使用 UIButton 模块来实现。


在遇到一些UIButton 模块难以实现的特殊 UI 样式时,就可以利用 Frame 与 UI 模块显示层级同级的特性: 在 UI 类模块上,使用 api.openFrame() 方法,创建一个 Button 尺寸的 Frame,在此 Frame 中 使用 HTML 元素实现 UI 设计样式的按钮,从而完成 Frame 版本的 Button 效果。


常见使用场景是在地图类模块上实现自定义按钮,如定位按钮、放大和缩小按钮等。


注意


在打开 Frame 页面后,需要开发者要自己负责 Frame 页面的显示与隐藏。因为 Frame 页面与 其他 Frame 及 UI 类模块之间没有关联关系,所以在需要按钮与模块界面一起显示及一起隐藏的 功能逻辑时,要开发者自己封装方法完成同步显示或同步隐藏的关联。


本书第 8 章的 8.3 节也对 Frame 的特性和使用做了相关说明,可以关联起来进行学习。


Frame 初始化后是无法跟随页面滑动的,所以此种方法不适合需要按钮跟随页面滑动的场景。


9.1.2 模拟窗口组件


App 中的各种模态对话框组件也可以通过Frame 来模拟实现,这样能让页面的布局变得更加灵活。


1.实现原理


下面介绍两种模拟窗口组件的实用方法。有兴趣的开发者可以根据本例展示的方法,自行模拟实现更多特性的窗口组件。


一种是利用 CSS 动画实现窗口组件的滑入效果。


另一种是利用 Frame 窗口实用特性设置窗口背景的透明度,这一点是 Window 窗口无法达到的。通过这一特性可以模拟出页面遮罩效果,从而实现当前多种窗口组件。


2.组件效果图


下面列出了几种窗口组件的效果图,实现的技术难度并不高。由于篇幅所限,读者可在本书的 GitHub 分支中查看本示例的源码。


  • 模拟 Alert 弹窗,如图 9-1 所示。


6401.jpg

图 9-1


  • 模拟 Confirm 弹窗,如图 9-2 所示。

  • 模拟 Sheet 弹窗,如图 9-3 所示。


6402.jpg

图 9-2

6403.jpg

 图 9-3


补充说明:第8章的 8.1 节和 8.2 节中的实例就是两个特殊效果的 Sheet 弹窗。


9.1.3 模拟侧滑窗口


通过 Frame 和 CSS 动画模拟侧滑窗口,效果如图 9-4 所示。 根据实际场景需要,考虑是否屏蔽当前 Frame 所在的 Window 窗口的返回功能,如 Android的物理返回键功能和 iOS 的侧滑返回功能。


• 监听并拦截 Android 的物理返回键按键事件(keyback 事件),定义一个空回调函数即可,代码如下:

api.addEventListener({

name: 'keyback'

},function(ret,err){

/* 留空,不执行任何方法 */

});

• 禁止 iOS 的侧滑返回功能,设置 Frame 所在的 Window 窗口的侧滑返回属性为 false,示例如下:

api.setWinAttr({

slidBackEnabled: false //禁止滑动返回

});


6404.jpg

图 9-4


从项目优化角度出发,以上两个方法应在 Frame 所属的 Window 窗口中定义。在 Frame 打开和关闭两个生命周期事件中,使用api.execScript 远程控制该功能属性的启用和禁用。


  • Frame 弹窗出现时,拦截 keyback 事件和禁止侧滑返回功能。

  • Frame 弹窗关闭时,取消拦截 keyback 事件和禁止侧滑返回功能。


补充说明:api.openSlidLayout 方法可实现侧滑抽屉式布局,本示例仅为了展现 Frame的多种可塑性。


更多app资讯,请关注www.apicloud.com

提交app定制需求,了解报价和周期:

https://app.apicloud.com/index?uzchannel=500


2018-09-01 来源:APICloud

An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements