題外話，話說今晚一邊吃飯一邊看《蠟筆小新》XX部之北海道旅行，心情輕輕鬆鬆的，純粹的搞笑場景讓我回想起小時候看《蠟筆小新》的感覺，又有點不一樣了，不知道怎麼說。

     還是步入正題吧，“玩轉創意街”是我第一個相對完整的作品，在設計這個原型和互動的過程中，我儘量去參考現有比較出名的app，像微信，QQ，蘑菇街，創意相關，快看漫畫等等，進行快速的對比和設計，同時體驗這些app的互動效果。我相信站在巨人的肩膀上，我可以看得更遠！

    設計完這個系統以及介面之後，首先需要先搭建開發環境，webstorm基本上沒有多大問題，主要是ADT和cordova,

    然後對“玩轉創意街”進行程式碼架構的組織，在畢設實現過程中，我需要在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");
            }
}

    實現效果圖（按照模組區分）如下：