您需要登录后才可以操作登录 | 立即注册
关闭
楼主
AppCan_小助
  • TA的每日心情
    开心
    2016-10-10 11:07
  • 签到天数: 66 天

    连续签到: 1 天

    [LV.6]常住居民II

    [社区活动] AppCan尖课笔记(二)丨IDE开发流程详解 [复制链接]

    2218 0 发表于 2016-10-8 11:03:27

    本帖最后由 AppCan_小助 于 2016-10-13 16:04 编辑

    相信AppCan的小伙伴们对IDE一定都不陌生。在APP开发中,IDE能够帮助开发人员完成开发、调试、跟踪、模拟,并借助内嵌的打包功能,生成可直接安装到手机的本地应用安装包。然而,在使用IDE时,或多或少都会遇到一些疑惑。本文将向大家普及一下如何正确的更好的使用IDE。

    1、注册AppCan账号,下载并安装IDE
    首先,进入appcan.cn官网,注册账号并成为认证开发者。
    然后在“文档中心”-“开发工具IDE”-“AppCanIDE安装下载”处下载IDE,并安装。

    图片1.png

    2、创建应用
    在appcan.cn的开发者中心创建应用,请选择“hybrid”模式。

    图片2.png

    3、登陆IDE
    应用创建完成,启动IDE,使用AppCan账号登陆。

    4、同步项目
    创建AppCan项目,选择同步项目。

    图片3.png

    显示应用列表,选择要同步的应用,点击“完成”,应用即可导入成功。

    图片4.png

    注:如遇到代码检出失败,请先确认登陆账号是否正确、网络服务是否通畅,可使用客户端本地同步验证是否能成功,如有问题,可联系线上客服。

    5、编码
    根据项目需求,对导入下来的应用进行编码开发。
    IDE内集成了UI框架、JSSDK、引擎、插件及海量的应用模板,供大家使用。
    相关开发问题请参考文档或论坛发帖。

    6、预览调试
    开发阶段中,IDE提供了“实时预览”功能。选中要预览的页面,点击 图片5.png ,即可边改边看。

    图片6.png

    在“实时预览”区域中,右键支持“刷新”和“调试”。

    大家也可使用模拟器进行预览调试。
    选择index.html右键,点击“预览”,

    图片7.png

    启动模拟器,支持分辨率、横竖屏切换及调试预览。

    图片8.png 图片9.png

    7、本地打包,真机调试
    在IDE中支持两种调试模拟,一种是真机调试,另一种是安装AppCan调试中心。
    由于项目中用到了原生插件,请尽量采用真机调试,以便校验效果。

    真机调试操作如下:
    编码完成后,先在config.xml文件中勾选真机同步调试,填写调试服务器地址,即当前电脑的ip。

    图片10.png

    保存文件后开始本地打包。
    右键该项目的“phone”文件,选择“生成安装包”,进入打包配置,

    图片11.png

    根据向导提示配置好应用名称、图标、平台、启动页、状态栏,选择要使用的插件,即可打包生成安装包。
    注意:如用到了非IDE中的内置的插件,需要通过“自定义插件管理”手动上传,在打包时注意勾选即可。

    图片23.png

    另外,本地打包出的iOS安装包只支持安装在iOS8系统及以上且越狱环境下。
    打包成功后将应用安装至测试机中,即可查看效果。
    在IDE中启动真机同步调试服务

    图片12.png

    此时需注意测试机与电脑一定要在同一网络环境下,注意关闭防火墙。
    判断方法:在设备浏览器里输入你的ip和端口,如“192.168.1.213:30060”,看一下访问的页面是否是下图的页面

    图片13.png

    启动应用,选择要调试的界面,

    图片14.png 图片15.png
    图片16.png

    在调试窗口中修改某处css样式,真机可实时同步看到效果。
    在调试窗口修改的东西是不能直接缓存到真机上,只是达到调试预览修改后的效果;需要重新打包,装到到手机才能看到调试后的效果。

    8、AppCan调试中心
    AppCan调试中心是AppCan IDE为开发者提供的一款可真机同步调试的门户应用,只需通过网络部署子应用(需测试的应用)后,无需二次打包,就可实时测试修改应用。
    点击”生成AppCan调试中心”,

    图片17.png

    进入到AppCan调试中心打包流程,打包成功后安装至测试机中。
    在IDE中启动AppCan调试服务中心

    图片18.png

    在测试中启动调试中心,点击“开始使用”,进入登录页
    调试依然需要测试机和电脑在统一网络环境下,注意关闭防火墙。
    输入您电脑端的ip地址,点击登录,IDE中左侧导航列表应用均会显示在首页,选择要调试的应用进入即可。
    如有需修改,可编辑IDE中代码,然后在当前应用中点击右下角小球,退出到首页,再次点击应用进入,方可看到修改后效果。

    9、同步代码
    项目在真机调试后无任何问题,就可以同步代码至线上,打包正式版本。
    选择要提交的文件,右键选择“Team”,“更新”或“提交”文件。

    图片19.png

    如此时操作有报错,大多是由于操作不当导致,请翻译报错内容,采取解决办法。

    如第一次要去appcan.cn打包,IDE中支持了插件同步线上功能,这样可免去到线上打包前在一个个选取插件了。
    首先,插件同步勾选三要素:
    1、IDE登录帐号要与AppCan.cn登录帐号一致
    2、线下应用代码要上传至线上;
    3、当前项目config.xml的应用ID要与线上应用ID保持一致。
    满足以上要素后,在IDE中,右键当前应用的phone目录,点击“插件同步勾选”。

    图片20.png

    IDE会默认勾选当前应用中用到的插件(公共插件或自定义插件,使用自定义插件线上也需上传)。

    图片21.png

    点击“确认同步”,插件同步成功。

    10、云端打包,运营管理
    代码更新后,在appcan.cn中开始进行正式包编译。
    进入到在线上创建的应用--开发模块中,选择“应用打包”,

    图片22.png

    按照向导依然配置好相关流程,进行打包。正式版本注意上传证书,相关内容请参看线上文档。
    后续应用发布后,就可在应用管理管理中通过启动上报、终端用户等数据分析,推送等服务运营管理你的应用了。

    以上为IDE的开发、调试、跟踪、模拟、打包、同步等功能的使用方法,在官网文档中也有对IDE相关功能的介绍。在使用过程中有问题、需求或建议,欢迎提交至论坛吧!

    点击进入【直播课堂】

    主题:
    级别:游客
    发帖:
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    快速回复 返回顶部 返回列表