launcher项目踩坑小结

Posted xiaoya625

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了launcher项目踩坑小结相关的知识,希望对你有一定的参考价值。

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项目踩坑小结的主要内容,如果未能解决你的问题,请参考以下文章

2017-6-14 踩坑小结(Android文件读写 相关问题)

element-ui Form表单校验小结及踩坑

组件库文档工具 dumi 的介绍与对比及踩坑小结

组件库文档工具 dumi 的介绍与对比及踩坑小结

组件库文档工具 dumi 的介绍与对比及踩坑小结

android framework项目开发案例-动态隐藏Launcher上图标2