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

刚接触快应用，只能说，就是个大坑，好气人，不想说话了，全程都在调样式，还不知道样式为何超出预想（今日 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的高度

  
    
      
        
        

          {{ item.vr_title }}
          {{ item.shopname }}
        
      
    
  
  
    
    

      

      没有更多了~
      

    
  

• 虽然官方文档中说最好不要开启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来实现，但是他是利用索引值来实现，有点坑

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

• 往期推荐：

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