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 }