毕业设计总结篇之中篇——基于android的创意展示平台（混合app） -一个渣渣

题外话，话说今晚一边吃饭一边看《蜡笔小新》XX部之北海道旅行，心情轻轻松松的，纯粹的搞笑场景让我回想起小时候看《蜡笔小新》的感觉，又有点不一样了，不知道怎么说。

还是步入正题吧，“玩转创意街”是我第一个相对完整的作品，在设计这个原型和交互的过程中，我尽量去参考现有比较出名的app，像微信，QQ，蘑菇街，创意相关，快看漫画等等，进行快速的对比和设计，同时体验这些app的交互效果。我相信站在巨人的肩膀上，我可以看得更远！

设计完这个系统以及界面之后，首先需要先搭建开发环境，webstorm基本上没有多大问题，主要是ADT和cordova,

ADT需要配置好java环境，更新android-tool的版本号等，cordova主要会遇到编译不成功的问题，我已收录在以下的csdn博文里面：http://blog.csdn.net/chenshuyang716/article/details/50969970

然后对“玩转创意街”进行代码架构的组织，在毕设实现过程中，我需要在ADT 以及在webstorm上进行IDE的切换，如下图1所示显示在ADT 上的代码目录，主要是按照模块放置view：

图1

在实现代码过程中，主要的难点在于跨域问题以及用phonegap camera实现本地获取相册和拍照，然后上传图片到服务器上的问题，后面实践表明在Android4.4上获取照片还是比较稳定的，关于跨域问题已经收录在以下博文中 http://blog.csdn.net/chenshuyang716/article/details/51188633

“玩转创意街”实现过程中前端的核心技术：

1.懒加载，为了优化用户在移动端加载图片所消耗流量以及网速问题，采用前端前沿懒加载技术实现，主要通过jquery.lazy.load.js，API参考如下：

$("img.lazy").lazyload({
	placeholder: "/android_asset/www/originality_show/images/pp.png", 
	effect:"fadeIn",
	threshold: 100
});

其中，json对象参数中“placeholder”是指一开始加载的伪图片url,”effect”是指图片出现的特性效果，

“threshold”是指当图片加载到的某个可视化位置才出现真正的图片。

2.轮播图片，主要应用在首页以及用户创意的详情页面，使用swiper插件；

3.corodva获取本地相册以及拍照上传到服务器的核心代码如下：

    var pictureSource; // 定义图片路径
    var destinationType; //  定义输出格式
    document.addEventListener("deviceready",onDeviceReady,false);
    // 设备准时操作
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // 拍照成功时,相关事件操作
    function onPhotoDataSuccess(imageData) {
    	$backlayer.hide();
        var $img=$(".img-lib").eq(clickTimes);
        $img.attr("src","data:image/jpeg;base64," + imageData);
        $img.css("display","inline-block");
        clickTimes++;
    }

    //选取本地图片成功时操作
    function onPhotoURISuccess(imageURI) {
    	$backlayer.hide();
       var $img=$(".img-lib").eq(clickTimes);
       $img.attr("src",imageURI);
       $img.css("display","inline-block");
       clickTimes++;
    }
    //拍照控制
    function capturePhoto(source) {
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
            quality:70,
            allowEdit: true, 
            destinationType: destinationType.DATA_URL
        });
    }
    //选取图片操作
    function getPhoto(source) {
        // Retrieve image file location from specified source
        navigator.camera.getPicture(onPhotoURISuccess, onFail, {
            quality: 50,
            destinationType: destinationType.FILE_URI,
            sourceType: source
        });
    }
    //拍照失败操作
    function onFail(message) {
        layer.msg('Failed because: ' + message);
    }

我设置最多只能9张图片，因此我在js文件中设置了一个全局变量“clickTimes”,初始化为0，每成功获取一张图片，我就让变量自加1，如果成功删除一张图片便会自减1，每次触发“从手机中选择”以及“拍照”的按钮事件会先判断clickTimes是否小于9，满足条件才会允许获取图片和调用摄像头。

4.在首页展示图片方面，我参考蘑菇街的图片,在图片展示方面我做了一个比较好的处理，如果图片的张数是一张，宽高都是100%，如果是两张或者四张，图片宽高将占据父元素的49%，如果是三张以及小于九张的图片，图片的宽高将占据父元素的32%，图片核心代码如下

     //判断图片的张数
    common.testImg=function($img,$imgParent){
            var length=$img.length;
            if(length>0){
                if(length==1){
                    $img.css({"height":"300px","width":"100%"});
                }else if(length==2||length==4){
                    $img.css({"height":"200px","width":"49%"});
                }else{
                    $img.css({"height":"100px","width":"32%"});
                }
            }else{
                $imgParent.css("height","0px");
            }
}

实现效果图（按照模块区分）如下：