客户培训appcan移动技术开发

AppCan平台开发技术培训关注官方微信点击热点话题分享到朋友圈奖品关注AppCan官方微信并转发可以领奖品哦QQ群、各地区微信群二维码开班典礼2024/1/24讲师介绍学员介绍目录2024/1/243、项目开发流程新建项目、模拟器调试、真机调试、实时预览2、项目介绍功能介绍、开发工具、项目演示4、“美食”首页功能实现页面拼装、封装样式、UI控件、JSSDK5、“美食”详情页功能实现页面布局、数据获取、插件调用、会员评论及显示6、

“美食”个人中心功能实现页面布局、会员信息修改功能、注册、登录功能1、AppCan平台介绍互联网+、一站式平台1、AppCan平台介绍生活学习工作1、AppCan平台介绍传统APP开发门槛高、开发难IOS开发工程师Android开发工程师项目经理1、AppCan平台介绍开发难成本高企业在移动化道路上最头疼的问题1、AppCan平台介绍1、AppCan平台介绍1、AppCan平台介绍HTML+原生的混合开发方式2、项目介绍2024/1/24项目名称：美食项目演示2、项目介绍开发工具：企业版SDK移动应用开发工具IDEMacMini应用开发服务器协同开发工具本地私有打包服务器开发工具：IDE新特性封装了uexWindow多窗口机制，实现了移动端的iframe效果2、项目介绍开发工具：IDE新特性人性化开发环境-UI控件封装2、项目介绍开发工具：IDE新特性人性化开发环境-内置多套模板2、项目介绍开发工具：IDE新特性人性化开发环境-自定义模板2、项目介绍开发工具：IDE新特性支持安装包全包或部分加密2、项目介绍开发工具：IDE新特性支持真机调试2、项目介绍开发工具：IDE新特性丰富的原生插件资源2、项目介绍协同开发系统介绍云端用户管理应用管理员普通用户超级管理员3、项目开发流程云端创建项目云端应用创建【应用管理员身份登录系统】3、项目开发流程同步应用【开发者或应用管理员身份登录】3、项目开发流程模拟器调试3、项目开发流程真机调试3、项目开发流程断点调试3、项目开发流程知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现4、首页功能实现主窗口浮动窗口布局分析广告区功能区列表区知识点1、首页布局2、窗口跳转3、列表数据获取

知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备1、弹性盒子模型该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间样例知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备1、弹性盒子模型该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间样例代码结构<divclass=“box”><divclass=“box1”>1</div><divclass=“box2”>2</div><divclass=“box3”>3</div></div>知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备1、弹性盒子模型该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间样例CSS代码<styletype=“text/css”>.box{display:box;/*指定父盒子为盒子模型*/

box-orient:horizontal;/*指定子盒子沿横向或纵向排列，纵向值为：vertical*/}.box1{background-color:red;}.box2{background-color:blue;}.box3{background-color:green;}</style>知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备1、弹性盒子模型该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间样例知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备1、弹性盒子模型该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间样例Box-flex属性用于设置子盒子分配父盒子空间比例知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、AppCan封装样式为了让开发者快速对界面进行布局，对常用样式进行了封装封装规划：取属性单词首字母如ub[u代表UI，b代表box],定义弹性盒子属性知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、AppCan封装样式为了让开发者快速对界面进行布局，对常用样式进行了封装针对刚才我们讲过的所以弹性盒子属性统一封装在ui-box.css文件中，不需要各位单独去写样式，直接调用即可，如：Ub：定义弹性盒子模型，用于父盒子Ub-ver：定义子盒子纵轴排列，用于父盒子Ub-rev：定义子盒子反向排序，用于父盒子Ub-f1：定义子盒子占父盒子比例，用于子盒子知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、AppCan封装样式为了让开发者快速对界面进行布局，对常用样式进行了封装对于盒子本身的属性如边框、间距、填充等基本样式都封装在ui-base.css文件中，如：Umar-a：定义盒子外边距uba：定义盒子边框uinn：定义盒子内边距，即填充ulev0：定义盒子内文字大小Uc-a：定义盒子边框为圆角知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、AppCan封装样式为了让开发者快速对界面进行布局，对常用样式进行了封装对于盒子本身的属性如边框、间距、填充等基本样式都封装在ui-base.css文件中，如：Umar-a：定义盒子外边距uba：定义盒子边框uinn：定义盒子内边距，即填充ulev0：定义盒子内文字大小Uc-a：定义盒子边框为圆角知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备3、AppCan封装UI控件为了让开发者快速对界面进行布局，对常用UI控件进行了封装，如按钮、列表、导航等知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现布局实现1、主窗口双击index.html文件进入主窗口，修改标题文字修改配色文件基础标题颜色为绿色知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现布局实现2、浮动窗口知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现布局实现2、浮动窗口之广告区实现方法：打开浮动窗口文件，插入图片滑块控件并添加图片知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现布局实现2、浮动窗口之功能区实现方法：手动布局第1层第2层第2层第2层第2层第3层第3层知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现布局实现2、浮动窗口之功能区实现方法：手动布局知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备1、AppCanJSSDK介绍AppCanjavascriptsdk是AppCan根据自己的需求封装的一个开发库，对底层的接口进行更高层的封装，该库依赖backbonejs、zeptojs、underscorejs，默认打包在基础库中，开发者不需要进行额外的引用，另外在该库的基础上提供了丰富的插件，能让开发者更高效的开发app。具体可参照：

知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、窗口模块—组成具体可参照：

FooterContentBodyPageheader显示区HTMLHeadscript脚本区知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、窗口模块—打开主窗口方法appcan.window.open(name,data,aniId,type,dataType,width,height,animDuration)name:新窗口的的名称，如果窗口存在直接打开，如果不存在先创建然后打开data:新窗口填充的数据dataType:新窗口填充的数据类型aniId:动画类型Idtype:窗口类型animDuration:动画执行时间知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、窗口模块—对话框appcan.window.alert(title,content,buttons,callback)

弹出一个确认弹出窗口,如果只有一个按钮弹出是警告框，如果是一个以上的按钮弹出的是提示框

title:弹出框的标题

content:弹出框的内容

buttons:弹出框的按钮列表最多是三个知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、窗口模块—对话框appcan.window.confirm(title,content,buttons,callback)

弹出一个提示框

title:弹出框的标题

content:弹出框的内容

buttons:弹出框的按钮列表最多是三个知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、窗口模块—界面间通信appcan.window.evaluateScript(name,scriptContent,type)

在指定的窗口脚本执行

name:要执行脚本的窗口名称

scriptContent:要执行的脚本

type:窗口类型知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备3、打开浮动窗口FooterContentHeaderFrame知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备3、打开浮动窗口appcan.frame.open(id,url,left,top,name,index,change)

id:要打开浮动窗口的名称url:浮动窗口要加载的页面的地址,如果url是一个数组则打开多页面浮动窗口left:浮动窗口距离左边的距离

top:浮动窗口距离上边的距离name:强制改变打开窗口的名称index:设置选中的多页面窗口的默认索引change:如果多页面浮动窗口改变时会触发该回调知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现功能实现首页打开“美食专题”、“当地美食”、“更多功能”、“个人中心”窗口实现方法1、使用自定义模板拼装4个页面【】2、给每个按钮起个名字2、打开主窗口方法知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备1、本地存储即源界面把需要传递的数据写入全局对象中，目标界面通过全局对象获取到写入的数据，完成参数的传递，我们在全局参数传递中，使用appcan.locStorage对象来实现

存值：

appcan.locStorage.setVal(key,val)取值：appcan.locStorage.val(key)知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备2、本地存储全局参数更多应用于具有确定先后顺序的场景，源窗口写然后启动目标窗口，目标窗口启动时获取参数。但很多场景并没有固定的先后顺序，更多的是相互间的状态变化。对于此种场景，我们可以采用窗口事件机制来提供支撑。appcan.window.subscribe接口来监听订阅一个自定义的频道appcan.window.publish向订阅的频道，发送消息知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现知识准备3、异步数据请求方法appcan.request.ajax(options)如：appcan.ajax({url:'',type:'GET',data:{a:'helloword',b:'page'},offline:true,offlineDataPath:'wgt://aaa/',success:function(data){alert(data);},error:function(e){alert(e);}});知识点1、首页布局2、窗口跳转3、列表数据获取

4、首页功能实现数据获取功能实现关键点：1、数据获取及显示2、列表数据跳到详细页面3、存储相应数据ID知识点1、页面布局2、数据获取3、收藏功能4、评论功能5、打开地图

5、详情页功能实现5、详情页功能实现知识准备1、功能逻辑点击首页某条数据并存储商品ID详情页获取用户及商品ID，根据商品ID获取详细数据并展示，根据用户ID判断用户是否收藏此商品发布评论和收藏商品必须先登录知识点1、页面布局2、数据获取3、收藏功能4、评论功能5、打开地图

5、详情页功能实现知识准备2、AppCan插件网络通讯系统功能第三方API界面布局知识点1、页面布局2、数据获取3、收藏功能4、评论功能5、打开地图

5、详情页功能实现功能实现方法：模板+手动布局知识点1、页面布局2、数据获取3、收藏功能4、评论功能5、打开地图

5、详情页功能实现功能实现关键点：获取商品及用户ID|数据显示将静态转为动态知识点1、页面布局2、数据获取3、收藏功能4、评论功能5、打开地图

5、详情页功能实现功能实现关键点：用户已登录判断其是否收藏，收藏后图标显示为黄色用户未登录转到登录页面页面间传值知识点1、页面布局2、数据获取3、收藏功能4、评论功能5、打开地图

5、详情页功能实现功能实现关键点：评论显示用户未登录转到登录页面页面间传值知识点1、页面布局2、数据获取3、收藏功能4、评论功能5、打开地图

5、详情页功能实现功能实现关键点：高德地图插件调用方法知识点1、页面布局2、数据获取3、收藏功能4、评论功能5、打开地图

6、个人中心功能实现知识点1、页面布局2、用户信息修改3、用户登录4、我的收藏5、用户注册

6、个人中心功能实现功能实现关键点：模板拼装知识点1、页面布局2、用户信息修改3、用户登录4、我的收藏