前端切图周记-1

文章发布于2020年05月21日 22:22, 归类于: 前端

2020年5月21日 雨

本命五行缺金、水,我爹给我起的名字带有“三点水”,以至于现在每逢下班,必遭凶煞暴雨,今天也一样,被迫在桥洞躲雨喂蚊子。

记录下这周前端切图踩坑的情况,以下代码摘自工作项目,非完全复制,且有大部分代码删减、盲打,缺少类型判断,可能无法运行,仅供参考。

微信小程序日期选择器,设置start和end在ios手机上不生效

  • 解决方法:
    1. start和end两个必须设置日期,不能为空
    2. 在ios手机上,把日期中的字符'-'替换成'/'
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01">
  <view class="picker">
    当前选择: {{date}}
  </view>
</picker>
data () {
  return {
    date: '',
    start: '',
    end: '',
  }
},
methods:{
  getSystemInfo () {
  this.start = null
  this.end = null
    wx.getSystemInfo({
      success: res => {
        if (res.platform === 'devtools') {
          // PC
          this.isIos = false
        } else if (res.platform === 'ios') {
          // IOS
          this.isIos = true
        } else if (res.platform === 'android') {
          // android
          this.isIos = false
        }
        let q = this.isIos ? '/' : '-'
        this.start = `2020${q}01${q}01` // 2020/01/01
        this.end = `2020${q}11${q}12` // 2020/11/12
      }
    })
  },
}

微信小程序轮播中放置视频组件,切换轮播时控制暂停、播放状态

<swiper @change="onChange">
  <div v-for="(item, index) in list" :key="index">
    <swiper-item> 
      <video
        :id="'myVideo-'+index"
        :src="item.src"
        :poster="item.poster"
        @play="onPlay"
      ></video>
    </swiper-item>
  </div>
</swiper>
data () {
  return {
    currentIndex: 0,
    videoDom: {}
  }
},
methods:{
  onChange({ target: { current } }){
     this.currentIndex = current
  },
  onPlay () {
    this.setVideoStatus()
  },
  // 轮播切换时,暂停非当前轮播的视频
  setVideoStatus () {
    this.list.forEach((i, index) => { 
      let key = `myVideo-${index}`

      if(!this.videoDom[key]) {
        this.videoDom[key] = wx.createVideoContext(key) // 获取视频节点,储存节点是不是好一点
      }

      this.currentIndex !== index && this.videoDom[key].pause() // pause:暂停,play:播放
    })
  }
},
watch: {
  currentIndex (n) {
    this.setVideoStatus()
  }
}

node.js 上传文件到阿里云oss,预览图片

今晚群里有人问,阿里云oss上传图片后,期望打开图片地址是预览,而不是直接下载。

我回复:“给oss配置自定义域名,上传后,使用域名地址打开图片”。

阿里云oss如何绑定自己的域名 阿里云oss解析自己的域名

然而,刚才我使用自己写的接口上传了一张图片到oss,打开图片地址居然变成了下载,我对比了以前上传的图片,发现以前上传成功的图片可以在浏览器预览,再看了刚刚上传的域名,显示的是阿里云的oss域名,并不是我自己的域名。

https://eoway-images.oss-cn-shenzhen.aliyuncs.com/upload/files/2020-05-21-22-56-53-rn665.png

有问题 ,先看文档,oss-Node.js-配置项

可能是oss接口更新,默认不开启自定义绑定的域名了。

  • 解决方法:
    1. 开启支持上传自定义域名
    2. 设置绑定OSS域名

我的后端是node.js,此处为oss上传文件配置项:

let client = new OSS({
  region: 'oss-cn-shenzhen',
  accessKeyId:yourAccessKeyId,
  accessKeySecret:yourAccessKeySecret,
  bucket: 'eoway-images',
  secure: true, // 开启https,
  cname:true, // 开启域名
  endpoint:'http://oss.eoway.cn/' // oss 域名 (自己的域名,需要再oss绑定)
});

重新上传图片,返回自己的域名的图片地址

http://oss.eoway.cn/upload/files/2020-05-21-23-17-55-rn220.png

swiper.js,预览三个swiper-slide,中间swiper-slide完全显示,左右swiper-slide显示部分,前后设置间隔,实现方法

swiper.js官网

最近在切移动端官网,用gulp配置了下,写起来轻轻松松,rem布局,整个项目一个swiper通吃了大部分项目内的组件,有个组件要做成预览三个swiper-slide,中间swiper-slide居中完全显示,左右swiper-slide显示部分,前后设置间隔10px,百度发现很多人在问这个解决方法,其实官网有,但是文档实在太多东西,让人不愿意看,宁愿百度。

swiper预览三个,中间swiper-slide完全显示,左右swiper-slide显示部分,实现方法

这个效果我之前在微信小程序也做过,微信小程序轮播组件有属性可以设置,虽然swiper.js也有,但是文档太多内容,看得头皮发麻。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="cover-box">
        <img class="cover" src="1.png" alt="cover">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="cover-box">
        <img class="cover" src="2.png" alt="cover">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="cover-box">
        <img class="cover" src="3.png" alt="cover">
      </div>
    </div>
  </div>
</div>

sass,这里有个注意点,swiper-slide的宽度应该加个!important

.swiper-container {
  height: 4.8rem;
  .swiper-wrapper {
    .swiper-slide {
      width: 4.26rem !important;
      height: 4.8rem;
      padding: 0.15rem;
      box-sizing: border-box;
      .cover-box {
        width: 4.26rem;
        height: 4.5rem;
        box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(35, 111, 251, 0.17);
        .cover {
          width: 4.26rem;
          height: 4.5rem;
          background-color: #ffffff;
          display: block;
        }
      }
    }
  }
}
var mySwiper = new Swiper('.swiper-container', {
  loop : true, // 环路
  centeredSlides: true, // 居中
  slidesPerView : 'auto', // 自动
  loopedSlides :3, // 显示个数
  spaceBetween: 10, // 间距
  observer: true,// 修改swiper自己或子元素时,自动初始化swiper
  observeParents: true,// 修改swiper的父元素时,自动初始化swiper
})

rem布局遇到的问题

rem布局文章

把基数设置成100,正常。

如果基数设置为10,不正常,在手机谷歌浏览器或者你可以看到正常的设计稿比例的网页,但是,在qq浏览器或者夸克等浏览器中,并不会等比例,而是变形的网页。

// rem 布局设置根字体
! function (n) {
  var doc = n.document,
    el = doc.documentElement,
    designW = 750,
    p = designW / 100, // 基数 100
    event = "orientationchange" in n ? "orientationchange" : "resize",
    fun = function () {
      var clientW = el.clientWidth
      el.style.fontSize = clientW / p + "px"
    };
  doc.addEventListener && (n.addEventListener(event, fun, false), doc.addEventListener("DOMContentLoaded", fun, false))
}(window);
body {
  font-size: 16px;
}

设置html声明,在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。如果没有设置DOCTYPE。

不加这个声明,会产生样式兼容问题,同时js获取到的文档信息也会有差异。

<!DOCTYPE html>

这是一张750px的设计图。 前端rem布局设计稿宽度750px

将px单位转成rem单位,基数设置成100。 前端rem布局设计稿px转换rem

转载请注明来源:《 前端切图周记-1》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1590070954.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:vue2.x遇到ie11不兼容的坑 下一篇:uniapp开发微信小程序时设置app.json不生效