Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
(https://baike.baidu.com/item/hybrid%20app/270520?fr=aladdin)
APICloud应用架构是Client+Cloud架构,终端实现UI布局和功能,云端提供数据和服务。开发APICloud应用,与服务器端程序的实现方式和开发语言没有任何关系。
api对象:https://docs.apicloud.com/Client-API/api
APICloud前端框架:https://docs.apicloud.com/Front-end-Framework/framework-dev-guide
apicloud下载:https://docs.apicloud.com/Download/download
apicloud论坛:https://community.apicloud.com/bbs/forum.php
文档路径:APICloud_SDK ->apidoc->Seven
视频地址:https://www.apicloud.com/video_play
如何开发出优秀的APICloud应用:
https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=54774
APICloud新手教程集合贴:
https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=7926&extra=page%253D1
推荐学习资料: https://www.apicloud.com/vipservice/attest 下的
7天培训课文档资料:https://docs.apicloud.com/Seven/Day1
https://docs.apicloud.com/Seven/Day 2~7 (APICloud SDK 下载压缩包也包含该资料文档)
7天培训课文档资料github(包含每日优鲜静态页面):https://github.com/apicloudcom/APICloud-7Days-Online-Training-Tutorials/
Day1(新手必看篇)
梳理app需求(涉及的功能需求、页面数,第10讲)
前后端分离的app架构(第11讲):
移动端: 界面+功能
服务端:数据+服务
APICloud界面布局5大组件: Widge、Layout、window、Frame、 UIModule (概念理解,实现思维导图:UI架构设计(设计稿界面实现分析)ui-architecture.xmind )
应用证书和第三方key申请 (第17讲)
证书、包名 ->第三方key
解决应用名称、身份问题
注意:
- 文件引用使用相对路径;(api.js引用路径错误,会导致页面切换效果会出现页面显示错位异常,console日志无法查看该路径错误,可直接使用实时预览查看文件引用路径是否报错);
- 页面跳转动画由apicloud实现,页面跳转使用 openWin() ,可响应手机键”返回上一页”操作;而页面的返回则调用api.closeWin()实现(跟h5页面跳转和返回操作,实现方法完全不同);
- Layout通过定义好的布局来组织一组Window或Frame来完成整体的界面布局效果,打开FrameGroup: api.openFrameGroup() (涉及到页面有公用区域的页面跳转,都用openFrameGroup方式切换,组合页面,非h5页面的tab切换 实现思路);
- openFrameGroup()打开的frame页面,调试代码会执行2遍,原因:openFrameGroup()方法会通过参数preload设置预加载的 frame 个数,默认加载当前页后面一个;
- 执行openFrameGroup()后再调用openFrame(),会把openFrame窗口显示到最前面并显示,反之亦然;如果需要强制某frame显示到最前面并显示,可使用bringFrameToFront()实现;
- Window中加载Frame:页面弹动效果,支持独立渲染;
- 代码同步:右键代码管理-一键同步,apicloud后台代码才会生成svn log记录
- wifi真机同步,若apploader已连接的情况下,还一直提示“当前网速过慢或没有设备处于连接状态,可能会影响相关同步功能的使用”,解决方法:
windows 上,如果有了 sublime ,可能 10915 端口 会被占用;可以手动修改下端口,在顶部菜单 ---> APICloud 偏好设置--> packages --> apicloud --> WIFI 调试端口
或者去 管理器,把sublime的真机同步服务给关掉 "apicloudwifisync.exe"
又或者直接在sublime右键项目把”wifi同步”服务关掉!
Day2
1、Webkit内核浏览器点击事件为什么会有默认的300m响应延迟,怎么解决?
为了识别用户是点击还是长按操作,解决延迟方法: 标签加 tapmode属性 或 添加 api.parseTapmode方法; (h5用 fastclick)
另外添加tapmode属性值,如:tapmode="active" 能给点击元素添加点击交互效果,效果为.active选择器定义的css属性(也可为点击元素添加:active定义实现!)
2、下拉刷新在header之下,怎么让下拉刷新功能不加载整个页面,而加载header之下的列表页面?
用openWin和openFrame分别打开header的部分和列表页面,下拉刷新写在frame列表页面里。
Day3
js Ajax status和statusText状态对照表:
https://blog.csdn.net/qi1271199790/article/details/60465859
- apicloud ajax()在引擎级别通过Native方式实现,支持跨域异步请求,无浏览器中同源请求的数量限制;
- ajax() 若参数未声明returnAll:true ,则callback(ret,err)的ret直接返回body字段里面的内容;
- ajax() 若参数未声明dataType:text,则callback(ret,err)的ret直接返回json数据格式内容;
- 字符串&json 互转
字符串转json: parse(str) //原生
$api.strToJson(str) //apicloud
json转字符串: JSON.stringify(json) //原生
$api.jsonToStr(json) //apicloud
注意:json转字符串会自动给原json的键值对的key键加上双引号. - 跨窗口通信(传值)可在openWin()/openFrame/openFrameGroup方法中传入参数pageParam,再在新页面通过pagePrame获取传值;
- 跨窗口通信调用函数execScript() 处理逻辑为:exec->window->frame,该方法只适合简单的“跨页面传字符串”类的应用场景(参数本身是字符串内容,即使是变量名传入,也必须添加双引号),如:
api.execScript({
frameName: 'frmName',
script: ‘jsfun(“‘+string+’”)’
});
- 跨窗口通信,涉及页面数据联动(如:城市定位后,其它页面内容联动)使用sendEvent(),定义name来指定要被其它页面监听的事件,并使用参数extra传参,在监听页面使用addEventListener监听sendEvent name定义的事件,并在回调里面通过 value 获取extra传过来的参数
- frame里面css定义height:100%,再定义页面背景色,页面有滚动条时会出现“背景色填充不完整”的效果,可设置openFrame的bgColor解决,但openFrame设置bgColor要生效,对应url页面必须声明css html,body{background:transparent;}
Day4
APICloud平台开发的一些常用JS组件
https://github.com/apicloudcom/APICloud-JS-Modules
doT.js模板引擎
https://jinlong.github.io/doT/
- 使用doT,四步骤:
第1步:创建doT模板标签代码
<script type="text/template" id=”eleTpl">
<!-- doT模板标签代码(根据请求回来的数据data格式确定,确定语法格式) -->
</script>
第2步:编译模板函数
eleTempFn=doT.template($api.html($api.byId('eleTpl')));
第3步:调用模板函数,生成代码段,供后面调用 (官方声称的”多次使用模板函数“)
eleHtml=eleTempFn(“请求回来的数据data”);
第4步:调用doT生成的代码段,在页面呈现
$api.html(ele, eleHtml);
注意:doT模板标签如果使用script标签 type值不能使用“text/javascript” 否则标签里面的doT语句会导致报js错误,可改成<script type="text/template"></script> type声明形式;
- 使用doT模板获取的列表中的图片怎么缓存?
图片url加载默认的缩略图,设置自定义属性如data-url保存图片真实url地址,再在图片onload事件中获取data-url,再使用imageCache做缓存,再把缓存图片地址赋给图片元素。 - 验证图片是否成功缓存:在imageCache callback函数内打印 url 看地址是否是手机本地地址;
- 下拉加载更多scrolltobottom callback函数没有ret参数,apicloud studio 智能提示代码上屏的callback 写法有错;
- 应用沙箱:存放app 缓存、下载文件、上传图片等资源
4-1默认的沙箱位置
Android的默认沙箱位置:sdcard/UZMap/”appId”
iOS的默认沙箱位置:Documents/uzfs/”appId”
4-2修改Android默认沙箱位置
通过修改config.xml文件中的sandbox属性,来指定Android虚拟沙箱位置
<widget id="A1234567890123", sandbox="myBox">
注:Android UZMap目录下wgt保存的是app所有源文件
5、资源访问协议(widget:// 类写法只能在原生模块里用。H5页面无法使用)
widget://(访问widget包中资源)
fs://(访问APICloud应用虚拟沙箱中资源)
cache://(访问缓存中资源)
box://(访问应用真实沙箱中的资源)
api.wgtDir(返回widget包根路径,真机中才能获取到)
api.fsDir(返回APICloud应用沙箱根路径,fs:file system)
api.cacheDir(返回缓存根路径)
api.boxDir(返回应用真实沙箱根路径)
Day5
apicloud模块github:https://github.com/apicloudcom
UIScrollPicture模块
- 先调用open实例化占位,请求回图片数据后再调用reloadData方法更新图片;
- 重点设置fixedOn、fixed、contentMode、reloadData属性用法;
- Caption上的”三角形”指示标志,当滑至最左或右边再次滑动时,显示位置有问题!
- UIScrollPicture callback方法会在模块加载成功后、用户点击图片时被触发;
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}