appcan学习与开发实践（一）

一 appcan介绍

1.1 背景介绍

随着电脑用户的增长趋于饱满和手机与平板等移动设备的使用人群在不断扩展，Android、Iphone、Win Phone等app开发刻不容缓有了极大的需求量，但是由于三大移动操作系统的，假如你一旦考虑到你的app获得更多流量，你就必须开发三款app，多么令人蛋疼啊~

还好幸好，html5标准出来了，流行起来，而且这三大系统都发出声明会完全支持其特性，所以国外国内找到一个跨平台的解决方案，就是利用html5技术开发一个类似native app的hybird app，你只需要开发一套html代码，就可以兼容三大系统，从而拥有三大系统的用户群。

就目前而言，国外有phonegap(cordova)，那么国内流行的有appcan等，由于语言不通，学习phonegap比较困难，因此在选择开发框架上，我优先选择了appcan。

1.2 appcan简介

1.2.1 平台概述

  AppCan.cn开发平台是基于HTML5技术的跨平台移动应用快速开发一体化解决方案。开发者利用HTML5+CSS3+JavaScript技术可以快速地开发与本地应用体验相媲美的移动应用。AppCan.cn平台提供了UI快速开发框架、本地功能调用API接口、应用打包系统、IDE集成开发环境和本地应用调试模拟器，预置数百套界面模板和数十种应用插件，提供多套应用模板。完善的框架接口，人性化的开发环境，丰富的开发资源，强大的服务支持，使开发者可以快速迈入移动开发领域。

1.2.2 平台构成

  AppCan开发引擎

  UEX UI框架

  UEX 平台硬件接口

  AppCan 集成开发环境

  AppCan应用服务平台

1.2.3 平台构架　

1.2.4 应用框架　　

AppCan提供了丰富的界面模板、高效的窗口管理系统、窗口消息系统和数据视图映射库，构成了强大的AppCan应用开发框架，并以AppCan IDE集成开发环境形式提供给开发者。

AppCan IDE集成开发环境提供应用向导和界面向导，预置数百种界面模板和多套应用模板。开发者可以利用丰富的平台调用接口和各种扩展功能，采用HTML5技术快速开发功能强大的富客户端应用。通过定制的UI适配方案，开发者可以用极少的工作量完成各种终端的适配工作。

1.2.5 平台接口　　

AppCan.cn提供了丰富的平台接口库，覆盖了移动应用开发中的常用场景。同时，AppCan.cn还提供了数十种应用插件和灵活的自定义插件架构，方便开发者快速集成自定义功能到应用开发中。

1.3 appcan优势劣势

1.3.1 优势

第一、国内开发的开源项目，无语言障碍直接开发（LGPL宽通用公共许可证协议）

第二、采用多窗口机制（其他类似框架采用单一窗口机制）

第三、自由插件扩展（Widget 插件扩展机制）

第四、含有微信、QQ、百度、新浪等平台对接插件

第五、入门简单，模板插件丰富，可直接饮用

1.3.2 劣势

第一、UI元素固定，设计含有局限性

第二、文档api不够完善

第三、论坛问题搜索求助不到

1.3.3 综合意见

丰富的模板插件只符合开发场景为多平台手机（小屏幕）app开发模式，同时要求开发人员对html5和css3有一定开发经验，要求有Android或Iphone app开发经验。

在家教机应用，建议可参考其独特多窗口机制的webview开发模式，由安卓开发人员开发一套类似webview窗口，或者不需要用到其UI模板，独立设计一套app样式，只采用其外开发的接口。

其生产安装包过程中，有些参数无法修改。

1.4 其他

公司官网：http://appcan.cn/

文档中心：http://newdocx.appcan.cn/ http://docx.appcan.cn/#!/api 老版

免费培训：http://edu.appcan.cn/

插件中心：http://plugin.appcan.cn/

技术交流：http://bbs.appcan.cn/

二 appcan下载与安装

下载地址：http://newdocx.appcan.cn/index.html?templateId=368#setup_down

安装过程很简单，点击下一步就可以了

注册个账号，可以保存代码到其服务器上

三 appcan实践

新手推送使用开发全教程：

http://bbs.appcan.cn/forum.php?mod=viewthread&tid=16732&fromuid=96511

3.1 初步实践——界面开发

开始时间：2015-04-07 结束时间：2015-04-09

3.1.1 界面规划

布丁乐园后台app，思路是开发一个没有后台接口交互，纯粹只包含前台界面的app。

界面有：

1. 登陆界面（注册，忘记密码界面）
2. 主界面：
   1. home页面：展示常用的反馈信息模块，允许自主添加常用模块，固定模块包括：乐园2.2以下
   2. feed页面：

• 展示用户反馈信息列表（是否已解决标识）;
• 所属模块名和负责团队
• 图片展示
• 含筛选条件按钮

3. back界面：回复意见反馈（含有快速回复按钮展示 快速回复信息列表选择框）

4. me界面：

其他操作列表展示

个人资料修改

统计界面

收藏界面：收藏反馈意见会跳转到回复意见界面

设置界面

3.1.2 开发步骤

3.1.2.1 创建项目

点击完成，一个新项目就搞定了，文件目录如下图：

温馨提示：

config.xml是用于修改项目配置，如下图：

3.1.2.2 新建appcan页面（选择模板页面）

1 登陆界面

步骤一：新建appcan页面——登陆界面

步骤二：修改样式和增加记住密码、自动登陆选项

菜单栏选择appcan选择插件选择复选框，添加到页面处

修整代码，添加样式，完成修改

步骤三：跳转到注册页面 appcan.window.open js函数

新建注册页面，使用模板，同时在login_content 立即注册按钮增加点击事件：appcan.window.open跳转到register.html

步骤四：跳转到忘记密码

同注册页面一样，不过需要在填写完用户名，弹出获取密码成功后跳转回登陆界面，弹出窗口函数为appcan.window.alert

步骤五：登陆跳转到主界面

最后结果如下图：

温馨提示：

点击完成appcan页面后，文件夹phone下会自动产生login.html和login_content.html以及login_content文件夹，login.html包括头部内容，login_content.html主要存放正文

2 主界面

步骤一：分别创建index.html（首页）、feed.html（反馈）、self.html（自己）三个页面，其中:

index.html为首页，采用主页模板：

feed.html 为反馈，采用列表模板：

self.html为自己，采用列表模板：

步骤二：index.html 组成部分为header和tabview，header为标题栏，tabview处于底部，采用appcan插件tabview实现tab选项切换功能，如下图：

步骤三：使用appcan.frame.open创建多个浮动窗口，引用地址为：index_content.html、feed_content.html、self_content.html，其中监听浮动窗口的change事件：tabview随机改动。最终结果如下图：

3 预览调试

在appcan的IDE中，允许进行预览调试，选中需预览的页面，右键便可以看到预览按钮，之后就会出现如下窗口：

在这个调试窗口可以调分辨率等，其实就是个谷歌浏览器，按F12可以调出调试窗口，完全和开发网页一样进行开发，如下所示：

3.1.3 生成安装包

在项目目录下有个phone文件夹，右键点击生成安装包，会出现一些输入安装包信息，如下步骤：

1. 应用图标

2. 选择安装包的系统和选择apk打开前图片

3. 选择app应用到的插件，可自动选择已经应用到的插件

4. 点击完成，等待生成过程会自动弹出文件

5. OK，所有东西都弄好，放到机子上进行安装测试吧

四 其他注意

暂无