快應用初入坑(分頁上拉加載，錨點定位)

剛接觸快應用，只能說，就是個大坑，好氣人，不想說話了，全程都在調樣式，還不知道樣式爲何超出預想（今日 2019-9-10）

css樣式，樣式無法繼承

1.不支持絕對定位，相對定位

• 快應用中只支持fixed固定定位，不支持絕對定位
• display也只支持flex和none兩種佈局
• 想要達到絕對定位的效果，可以用stack層疊組件來實現，但是，有意料之外的樣式佈局

關於overflow

• 不支持overflow屬性，但是支持text-overflow
• 文本超出省略可以使用下面的代碼

/* lines 用於控制行數，超過多少行則顯示省略號 */
lines: 1;
text-overflow: ellipsis;

• background不支持rgba，無法直接實現半透明效果，可以使用背景色加opacity實現，必須使用全稱，如#ffffff不能簡寫成#fff

background-color: #ffffff;
opacity: 0.8;

animation和transform

• 這兩個屬性都不能動態的使用，只能在css中寫死，比如，animation中的動畫持續時間，在style中使用變量是無法實現的，tranform也是一樣

4.css不支持nth-child選擇器，導致我的頁面的最後的元素都沒有預期的效果，最後的子元素無法去掉margin，無法去掉border，氣人啊...

2.組件，標籤

text組件

• 所有的文本節點必須使用text、span來包裹，使用div無法顯示
• 在text中使用text-align：center無法居中
• 文本的樣式必須設置在對應的text標籤上才能生效

使用list

• 使用list組件實現列表渲染，同時，這個組件能達到上拉加載的效果，但是，使用list會導致在真機上佈局出現高度只有一個list-item的高度

<list class="vrContainer" scrollpage="true" @scrollbottom="handleLoadMore">
  <block for="{{item in imageList}}">
    <list-item type="div"  @click="skipShop(item.uniacid)">
      <stack class="listItem">
        <image class="itemImg" src="{{item.vr_img}}"></image>
        <div class="VRIntroduce">
          <text class="mainVRTitle">{{ item.vr_title }}</text>
          <text class="subVRTitle">{{ item.shopname }}</text>
        </div>
      </stack>
    </list-item>
  </block>
  <list-item type="loadMore" class="loadingContainer">
    <progress type="circular" class="loadingIcon" if="{{!noMore}}"></progress>
    <div class="noMore" else>
      <div class="textLine"></div>
      <text class="noMoreText">沒有更多了~</text>
      <div class="textLine"></div>
    </div>
  </list-item>
</list>

• 雖然官方文檔中說最好不要開啓scrollpage，但是，我這裏要是不開啓，list組件就只有一個list-item的高度，即使list能夠滾動，可能我佈局有點問題，但是沒有找到原因

使用input輸入框

• 使用輸入框輸入完成後，無法自動的收起輸入法，要手動調用focus方法

/* inputBox爲輸入框id */
this.$element('inputBox').focus({focus:false});

3.接口

• 在快應用中，每個接口的使用都需要在manifest.json中進行聲明

上傳圖片

• 這裏因爲官方提供的上傳圖片接口不會對圖片進行壓縮，需要自己調用接口進行壓縮，而我後端中限制了圖片的大小，導致拍照上傳圖片一直報502，這裏雖然沒有進入後臺中自己定義的方法，應該是有點像那個路由攔截器一樣，先報502，而不進入後臺中的自己定義的方法

import media from '@system.media'
import request from '@system.request'
import image from '@system.image'
/* 對圖片進行壓縮處理 */    
image.compressImage({
    /* uri 圖片地址，可以是數據文件或應用內的資源。如果是應用內資源，必須使用絕對路徑 */
    uri: filePath,
    /* quality 圖片的壓縮質量，0-100 之間，默認是 75 */
    quality: 80,
    /* radio 尺寸壓縮倍數，必須大於 0，尺寸會變爲原圖的 1/ratio 大小 */
    radio: 2,
    /* format 圖片保存格式，支持 JPEG，PNG，WEBP 三種格式。默認使用 JPEG 格式 */
    format: 'JPEG',
    success: data => {
      consoel.log(data);
    },
    fail: function(data, code) {
      console.log(`handling fail, code = ${code}`)
    }
})

/* 圖片上傳 */
request.upload({
    url: '',
    method: 'post',
    /* 要上傳的文件列表，name對應的是服務器端中form表單的名字 */
    files: [
      {
        uri: filePath,
        name: 'file'
      }
    ],
    header: {
        'Content-Type': 'multipart/form-data; charset=UTF-8'
    },
    success: file => {
      console.log(file)
    },
    fail: (data, code) => {
      
    }
})

在真機調試中要進行打印，需要在manifest.json中開啓

"config": {
   "logLevel": "debug",
},

頁面跳轉

• 使用router進行跳轉時，直接在跳轉後的頁面接收參數，如

router.push({
  uri: 'pages/index?id=1'
})

在跳轉後的頁面接收參數則直接使用this.id
但是這個id字段需要是唯一的

• router中跳轉的路徑和vue中的router是差不多的，直接使用的是router中的path，而不是和微信那樣，跳轉的是頁面對應的路徑
• router還能直接跳轉外部鏈接

錨點定位

• 使用list來實現，但是他是利用索引值來實現，有點坑

<template>
  <div class="areaIndex">
    <div class="sortWord">
      <list class="wordContainer">
        <list-item type="sort-word" class="sortItem" for="{{(index, item) in sortWord}}" @click="handleScroll(item, index)">
          <text class="wordText">{{item}}</text>
        </list-item>
      </list>
    </div>
    <div class="word" if="{{showWord}}"><text class="wordName">{{scrollToView}}</text></div>
    <list class="areaList" id="list">
      <list-item type="currentCity" class="cityContainer">
        <list-item type="addresslist" class="listItem" for="{{items in addressList}}">
          <text class="sort">{{items.key}}</text>
          <block for="{{item in items.item}}">
            <text class="sortCityItem">{{item.city}}</text>
          </block>
        </list-item>
    </list>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        sortWord: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        address: [
          {
            "key": "A",
            "item": [{
                "city": "\u5b89\u5e86",
                "N": "30.31",
                "E": "117.02",
                "firststr": "A"
            }, {
                "city": "\u6fb3\u95e8\u5e02",
                "N": "21.33",
                "E": "115.07",
                "firststr": "A"
            }]
        },
        {
            "key": "B",
            "item": [{
                "city": "\u868c\u57e0",
                "N": "32.56",
                "E": "117.21",
                "firststr": "B"
            }, {
                "city": "\u5df4\u4e2d",
                "N": "31.51",
                "E": "106.43",
                "firststr": "B"
            }]
        },
        {
            "key": "C",
            "item": [{
                "city": "\u5de2\u6e56",
                "N": "31.36",
                "E": "117.52",
                "firststr": "C"
            }, {
                "city": "\u6ec1\u5dde",
                "N": "32.18",
                "E": "118.18",
                "firststr": "C"
            }]
        }],
        scrollToView: 'a',
        showWord: false,
      }
    },
    onInit() {
    },
    /* 排序字母的點擊事件 */
    handleScroll(item, index) {
      this.scrollToView = item;
      this.showWord = true;
      /* 利用scrollTo來實現錨點定位 */
      this.$element('list').scrollTo({ index: index })
      setTimeout(() => {
        this.showWord = false;
      }, 2000)
    },
  }
</script>
<style lang="less" scoped>
.areaIndex{
    padding: 15px 13px;
    width: 100%;
    .sortWord{
      position: fixed;
      display: flex;
      width: 25px;
      right: 6px;
      top: 56px;
      flex-direction: column;
      .wordContainer{
        display: flex;
        height: 550px;
        flex-direction: column;
        .sortItem{
          width: 100%;
          height: 25px;
          line-height: 25px;
          text-align: center;
          .wordText{
            font-size: 15px;
            color: #6ab3d1;
          }
        }
      }    
    }
    .areaList{
      display: flex;
      margin-top: 50px;
      height: 100%;
      flex-direction: column;
      .cityContainer{
        display: flex;
        flex-direction: column;
      }
      .sort, .sortCityItem{
        height: 30px;
        line-height: 30px;
        font-size: 15px;
      }
    }
    .word{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      flex: 1;
      justify-content: center;
    }
    .wordName{
        margin-top: 200px;
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 40px;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        color: white;
        border-radius: 4px;
    }
    .listItem{
      display: flex;
      flex-direction: column;
    }
}
</style>