appcan的基本使用（原文地址http://www.xinxueqi.com/course/12191）

基于Appcan开发手机客户端之配置、调试、生成安装包

Cosey 2012-05-17 01:10 热度：3345

学它

课程简介

《企业网站手机同步客户端》是由沈阳亿钮曼科技基于appcan平台开发制作的中小型企业网站的手机同步客户端。包括中小型企业网站最基础的功能企业简介，企业新闻，图片，联系方式……，在制作企业网站的同时，设计制作一款与网站同步的手机客户端。并通过这款应用来实例讲解appcan开发流程。

课程内容

（本文出现所有链接，请手动复制访问。）

    接上篇（http://www.xinxueqi.com/course/12169），本打算从这篇教程开始讲一些实例中技术上的问题，后来决定先讲更基础的东西，开发过程中的调试和各平台安装包的生成。

配置文件

    每个应用创建完成后都会自动生成一个config.xml文件，这个文件是appcan应用的配置文件，记录应用ID，名称等基本信息，如下图所示。



    应用ID是唯一的，在同一个手机中，同一个ID的应用不能重复安装，只能覆盖安装。
    起始页默认为index.html，当然你可以定义为其它的任何名字，作为应用启动后首先打开的页面。
    屏幕旋转设置应用显示的方向，如果只选一个，那么无论设备屏幕处于什么方向，都会只按照设置的方向显示。
    还有作者信息的设置就不多解释了，大家可以自己去看看研究一下。

调试应用

PC端调试

    在项目开发过程中，最重要一项应该就是代码调试了，检查是否按照预期正常运行。
    Appcan IDE提供一个强大的基于Chromium模拟器，与iOS/Android中的浏览器采用同样的内核webkit，并且模拟了部分API操作接口，比如打电话，发短信等，效果如图。



    在需要预览的HTML页面上点击右键预览，即可打开模拟器进行调试。

    

在模拟器器按F12键可调出开发人员工具与javascript控制台，使用方法和Chrome中的方法一样。

    

看到这里，可能有人会说，我不太习惯这个调试环境该怎么办呢？没有关系，可以按照普通web开发用Chrome来浏览写好的代码。



    这里千万注意尽量不要使用其它浏览器，因为Chrome内核与模拟器内核甚至和iOS/Android中的浏览器中采用的是同一内核，最大限度的保证了代码兼容性问题，同时在这里特别强调一下，使用这种方式调试代码时，所有以uex开头的方法都不能正常执行，甚至造成错误，影响页面显示，这种调试方式我们一般不推荐用来调试代码！对于调试CSS布局来讲还是不错的，但也要注意窗口的尺寸问题（在以后的教程中会讲到CSS布局注意的问题）。

真机环境调试

    说完了PC上的调试，下面就来看看更接近真实效果（之所以说更接近，是因为毕竟不是最后打包的应用，或存在细小区别）的真机调试。
    Appcan 同样为我们提供了强大的真机调试工具——Appcan Player，安装在手机上的调试器。
    下载地址：http://st.appcan.cn/dev/dev_debug.html
    调试器原理大概就是将写好的代码文件复制到手机中指定的位置，然后从调试器中查看效果。



安装好后的界面



appcan player 加载界面



    此为iOS上的启动效果，Android上不会显示hiAppcan这个应用，请注意。
    调试器安装好了，现在就将写好的代码复制到手机上看看效果吧！
    进入项目开发目录中，复制android_iphone文件夹（可以先复制到其它位置，重命名备用）。



     iOS系统将复制的android_iphone文件夹，放入到appcan_player安装目录中的/Documents/widgetone/widgetapp/ 下面，如图所示。



    Android 系统则将android_iphone文件夹复制到SD卡中的widgetone/widgetapp/ 下面，如图所示。



     由于iOS系统的原因，不能直接修改文件，所以这里使用iTools来完成操作，有关iTools的使用方法，请自行谷歌，其官方地址为http://itools.hk/tscms/ 。
     再强调一下：
     复制的是android_iphone文件夹整体。
     iOS 放置到appcan_player安装目录中 /Documents/widgetone/widgetapp/ 下面。
     Android 放置到SD卡下的widgetone/widgetapp/ 下面。
     放置到手机后的android_iphone 文件夹可以重新命名，或者复制之前命名，只要把文件夹复制到相应的位置即可，名字可以自己起。

     完成以上操作后，重新进入appcan_player，OK，我们的应用已经显示出来了。


    点击应用图标即可进入应用界面，是不是很Cool？

调试经验与技巧

    基于appcan开发移动项目的两种基本调试环境已经介绍完毕，那是不是这些就够了呢？当然不是，有些时候我们需要知道某个代码块是否执行，某个变量值是多少，这时就要打印出信息，加以验证。
    最多使用到的可能就是alert方法了。没错，alert是一种的简单的信息输出方法，并且在appcan中两种调试环境中都能够正常使用。
    Alert虽然简单，但未必适合在所有情况下使用，alert执行时，会影响后面代码继续执行，点确定后，才会继续执行下面代码，当集中使用时，你一定很感觉很烦，没效率，连续弹出那么多确认框，得点多少次啊？
    这里再介绍另外两种能够实现和alert功能相同的方法。
    console.log() 与 uexLog.sendLog()
    前者是浏览器自带的，后者则为appcan提供的调试方法。
    区别在于：
    console.log() 可以在模拟器和浏览器中运行，变量结构清晰显示。
    uexLog.sendLog() 可以在模拟器和真机调试环境中运行，不能显示变量结构。
    console.log() 会将信息打印到浏览器中的控制台中（模拟器或浏览器中按F12调出， console即是）。



    uexLog.sendLog() 会将信息打印到IDE中的Appcan Log文本框中。



    从上面两张图中，就可以看出来，打印同一个变量，显示上的差异。
    uexLog.sendLog() 方法官方文档地址为 http://st.appcan.cn/dev/dev_api_uexlog.html 
    关于uexLog.sendLog() 需要说的是，无论是在模拟器中还是appcan player环境都必须在config.xml文件中配置logserverip为IDE所在设备的IP地址，因为它的机制是需要通过UDP协议进行通信。
    所以在appcan player环境中需要将手机连接到IDE所在电脑的同一网络中，并可以访问，uexLog.sendLog() 才会正常将信息打印到IDE窗口中以便查看，这一点切记！避免不必要的麻烦。

生成安装包文件

    在调试完成后，就可以生成安装包，发布应用了。
    在appcan中打包应用是一件非常简单的事情，点几下鼠标就搞定了。
    目前本地打包只支持iOS和Android，其它平台需要将应用上传至云端生成。
    在需要打包的项目中，在 android_iphone 文件夹上点右键，选择生成安装包。



    按照下图说明设置即可。



     这里有个一键配置选项，可以快速配置图片设置，避免每次重复操作。制作方式可以参考官方提供的启动页主题，下载地址为http://st.appcan.cn/dev/dev-theme-down.html 点击生成按钮，开始生成操作，时间视项目大小而定，android生成比较慢，耐心等待就好，成功后会打开文件夹显示已生成好的安装文件，文件名为应用名称，如果已存在，将在覆盖已有文件。如果出错会提示错误信息，按提示操作即可。



正在打包



打包成功，显示应用文件

    最后

    本篇教程到这里就结束了，新学期会陆续更新更多的教程，如果对教程有什么意见或建议可以在教程下方提问或到论坛交流，论坛反馈地址为http://bbs.appcan.cn/forum.php?mod=viewthread&tid=2789 。
    如果你对教程的形式、内容等有什么更好的想法，或者对appcan某些技术需要进一步了解，可以与我们联系，我们会联合appcan酌情制作教程并发布。
    最后感谢对新学期及appcan的支持！