首页 » 技术分享 » 毕业设计总结篇之中篇——基于android的创意展示平台(混合app)

毕业设计总结篇之中篇——基于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");
            }
}

    实现效果图(按照模块区分)如下:

                     

                                 

                               

                            

                            

                              


                                    



转载自原文链接, 如需删除请联系管理员。

原文链接:毕业设计总结篇之中篇——基于android的创意展示平台(混合app),转载请注明来源!

0