launcher是一個安卓端的活動頁面。它在pc端的形式則是由資源，桌面和發布三大板塊組成。其中資源部分則是由素材圖片，APK資源，網頁資源和圖片資源四個頁面組成。

在完成素材部分頁面的過程中，主要梳理和總結了的技術點如下：

1?? 往數組中的前序添加、往數組中最後一項追加元素、刪除數組中的一項、往數組中指定的某一項前添加元素

　　a. 前序添加就是往數組的第一項之前添加一個元素， 方法是unshift

　　　　eg. let arr = [a, b, c, d, e]

　　　　　 let f = 1

　　　　　 arr = arr.unshift(f)

console.log(arr)

結果為： [1,a,b,c,d,e]

b. 　後續追加就是在數組的最後一項之後添加一項， 方法是push

　　　　 eg. let arr = [a,b,c,d,e]

let f = 1

arr = arr.push(f)

　　　　　　console.log(arr)

　　　　　　結果為：[a,b,c,d,e,1]

　　 c. 刪除數組中的一項， 方法是splice(index, n）（聯想：splice與slince的區別）　　

　　　　 eg. splice(2, 1)

　　　　 就是從下角標為2的那一項開始， 刪除1項。 其中index代表下角標， n代表從這一項開始， 一共要刪除幾項。

　　　　splice與slince的區別？

　　　　slince:返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

eg. arr = [1,2,3]

　　　　　console.log(arr.slince(1))

　　　　　結果爲： [2,3]

　　　　如果slince後面有兩個參數， 則表示， 返回值是第一個參數到第二個參數（包括第二個參數）這一段區間的部分。

d. 往數組中指定的某一項前面添加一項

這裏也是用到的是splice

這裏splice後面有三個參數，即 splice(index, 0, obj),也就是把在數組中下角標為index的元素的前面添加一個元素。

如果這裏將第二個參數改爲1，即splice(index, 1, obj),則是刪除了下角標為index的元素， 並且新添加一個元素代替被刪除的元素。

2?? 如何寫出可以自適應最大高度的滾動條

　之前用到滾動條的時候， 第一反應就是給需要滾動的元素外層加上max-height, 然後給父元素設置overflow:scroll.

可是後來發現， 這樣做在元素需要滾動時候會出現滾動條， 但是元素本身高度沒有達到max-height的時候也會出現滾動條。

後來發現， 這裏可以通過設置overflow： auto來代替overflow: scroll。 這樣就可以使滾動條在沒有達到max-height的時候消失，超過max-height時候出現。

3?? 深度克隆/淺克隆（項目中沒有用到，但可以進行優化時使用）

淺克隆就是將一個元素的值賦給另一個元素， 但是他們引用這個值的路徑又是同一個， 因此儅一個值改變時， 另一個值也會隨之改變。

深度克隆則是所有元素或屬性均完全復制，與原對象完全脫離，也就是說所有對於新對象的修改都不會反映到原對象中。

這裏引用了兩篇請前輩的文章： ① 轉載：http://www.jianshu.com/sign_in ② 載自：http://www.2cto.com/kf/201409/332955.html

4?? 圖片上傳 DataForm

這是在launcher項目中， 資源部份， 圖片資源和素材資源部分上傳圖片時候用到的功能。

最初沒有使用DataForm，而是直接上傳。這樣的結果就是， 本來使用的是post請求， 但是後臺卻會報錯， 說接收到的是get請求。

然後百度了一下， 才知道， 上傳圖片時候需要修改請求頭如下：

 postImg (url, data, config) {
    return axios({
      method: ‘post‘,
      baseURL: baseURL,
      url,
      data: data,
      loadingConfig: config,
      timeout: 5000,
      headers: {
        ‘Content-Type‘: ‘multipart/form-data;charset=UTF-8‘
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  },

然後在傳遞參數時候應該先創建DataForm對象，再對應選用相應的格式如下：

 let param = new FormData()// 創建form對象
            param.append(‘imgName‘, _this.changeForm.name) // 通過append向form對象添加數據
            param.append(‘imgHigh‘, _this.naturalHeight) // 通過append向form對象添加數據
            param.append(‘imgWide‘, _this.naturalWidth) // 通過append向form對象添加數據
            param.append(‘showId‘, _this.showId) // 通過append向form對象添加數據
            param.append(‘file‘, _this.files) // 通過append向form對象添加數據
            param.append(‘editType‘, _this.editType) // 通過append向form對象添加數據
            param.append(‘alterRemark‘, _this.changeForm.state) // 通過append向form對象添加數據
            param.append(‘chunk‘, ‘0‘) // 添加form表單中其他數據

這樣才能成功的進行參數的傳遞。

5?? 圖片的選擇獲取和圖片回顯

圖片回顯， 就是在上傳完一張圖片之後， 如果上傳成功， 就將這張圖片顯示出來， 供圖片的上傳者查看。

這裏用到的是FileReader()。

HTML：

<div class="appPicCon">
              <div class="add-pic" v-show="picFlag" v-if="images === ‘‘ || images === ‘noImgNew‘">＋
                <input @change="addPic" name="file" type="file" accept="image/jpeg,image/x-png,image/gif" class="newImgIpu">
              </div>
              <div class="add-pic" v-show="picFlag" v-if="images !== ‘‘ && images !== ‘noImgNew‘">＋
              </div>
            </div>

JS：

addPic: function (event) {
        let _this = this
        $(‘.add-pic‘).css(‘margin-left‘, 10)
        _this.showX = true
        _this.getImgs = 1
        if (event.target.files.length > 0) {
          _this.files = event.target.files[0]
          let FileReaders = new FileReader()
          FileReaders.onload = function (evt) {
            document.getElementById(‘images1‘).src = evt.target.result
//            獲取本地圖片寬高
            _this.images = evt.target.result
            let image = new Image()
            image.onload = function () {
              _this.naturalWidth = this.width
              _this.naturalHeight = this.height
              _this.filesSize = _this.files.size
              _this.file = _this.images
            }
            image.src = evt.target.result
          }
          FileReaders.readAsDataURL(_this.files)
        }
      }

其中， 如果直接獲取image的寬高，那麼獲取的很可能是這個盛放image的容器的寬高， 而非實際寬高。

所以在此處運用了Image()方法，這樣才可以獲得真實的寬高。

代碼如下：

 let image = new Image()
            image.onload = function () {
              _this.naturalWidth = this.width
              _this.naturalHeight = this.height
              _this.filesSize = _this.files.size
            }

launcher項目踩坑小結（1）