今日周五!
又到了我们储存知识，开心过周末的时间了，上次《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 所示。
模拟 Confirm 弹窗，如图 9-2 所示。
模拟 Sheet 弹窗，如图 9-3 所示。
图 9-2
补充说明:第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 //禁止滑动返回
});
从项目优化角度出发，以上两个方法应在 Frame 所属的 Window 窗口中定义。在 Frame 打开和关闭两个生命周期事件中，使用api.execScript 远程控制该功能属性的启用和禁用。
Frame 弹窗出现时，拦截 keyback 事件和禁止侧滑返回功能。
Frame 弹窗关闭时，取消拦截 keyback 事件和禁止侧滑返回功能。
补充说明:api.openSlidLayout 方法可实现侧滑抽屉式布局，本示例仅为了展现 Frame的多种可塑性。
更多app资讯，请关注www.apicloud.com
提交app定制需求，了解报价和周期：
https://app.apicloud.com/index?uzchannel=500
安全验证