快应用初入坑(分页上拉加载，锚点定位)

刚接触快应用，只能说，就是个大坑，好气人，不想说话了，全程都在调样式，还不知道样式为何超出预想（今日 2019-9-10）

css样式，样式无法继承

1.不支持绝对定位，相对定位

• 快应用中只支持fixed固定定位，不支持绝对定位
• display也只支持flex和none两种布局
• 想要达到绝对定位的效果，可以用stack层叠组件来实现，但是，有意料之外的样式布局

关于overflow

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

/* lines 用于控制行数，超过多少行则显示省略号 */
lines: 1;
text-overflow: ellipsis;

*background支持rgba，背景色使用16进制，必须使用全称，如#ffffff不能简写成#fff

background-color: #ffffff;

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>

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期推荐：

  • 实现单行及多行文字超出后加省略号
  • 判断iOS和Android及PC端
  • 使用vue开发移动端管理后台
  • 画三角形