elaninhust / h5skills Goto Github PK

h5skills's Issues

Node处理文件上传中转

项目背景

最近项目要处理一个文件上传到功能（当时是一个比较普遍简单的功能），但是在node这层无法原生处理formdata，需要借助第三方库来完成，再加上node层的网络请求工具我们使用的是第三方库urllib，api上支持stream的方式上传文件，所以准备舍弃formdata的方式，采用stream文件流的方式来搞

具体操作

在controller层，我们直接处理浏览器的上传文件请求，然后讲流文件直接中转给后端借口：

async uploadFile() {
    const { ctx, config } = this;
    const url = `XXXXXXXXXXXXX`;
    const res = await ctx.fetchApi(url, {
      method: 'POST',
      stream: ctx.req,
      headers: ctx.req.headers,
      timeout: [60000, 60000],
      dataType: 'text',
    });
    ctx.body = res.data;
 }

问题来了

在上面的处理中，我们一股脑的讲浏览器上传文件请求的header部分全部复制了过来。在开发环境和测试环境都没有问题，但是在仿真环境的时候上传文件报错了（苦大仇深脸。。。），这就很尴尬了。。。

解决办法

经过多番检查，我们发现在仿真环境下我们node的上传文件请求并没有发送到目的url上，我们初步怀疑是请求头上host的问题，满心欢喜的删除完请求头中的host以后，发现还是不行。。。

再后来，查阅伟大的google，发现还必须删除referer和origin。。。

delete ctx.request.headers.host;
delete ctx.request.headers.cookie;
delete ctx.request.headers.referer;
delete ctx.request.headers.origin;

完美。。。

H5 页面横向滚动条隐藏

客户端内嵌或者微信内部,我们都可能碰到横向滚动条隐藏的高(bian)端(tai)需求

以前普遍的做法

::webkit-scrollbar {
    display: none;
}

但是

webview 内核由 UIWebView 升级到新内核 WKWebView 后，就不生效了

问题分析：只要添加了 -webkit-overflow-scrolling: touch 平滑滚动属性，隐藏滚动条样式就会失效。

新的思路

给最外层的容器添加伪类...利用伪类元素占位来遮住滚动条(亲测好使)

ul::after{
    content: '';
    position: absolute;
    width: 100%;
    box-sizing: content-box;
    padding: 0 0.4rem;
    height: 0.26667rem;
    bottom: 0;
    left: 0;
    background: #f2f2f3; 
    z-index: 9999;
}

客户端内嵌H5页面中判断iPhone X、iPhone XS、iPhone XS Max、iPhone XR

在iPhone XS、iPhone XS Max、iPhone XR系列新机未出来之前,我们可以这么来判断iPhone X,进而来做刘海屏的兼容.

/**
 * iPhone X、iPhone XS
 */
export const isIPhoneX = () => {
  return /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
}

同样,在客户端没有对iPhone XS Max的超视网膜屏做特殊兼容的时候,我们这样判断是没有问题的,但是在客户端做了兼容以后,这样的判断就对iPhone XS Max、iPhone XR不好使了(###哭瞎###),所以我们必须添加特殊处理.

/**
 * iPhone XS Max
 */
export const isIPhoneXSMax = () => {
  return /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
}

/**
 * iPhone XR
 */
export const  isIPhoneXR = () => {
  return /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
}

webpck不能编译这个属性-webkit-box-orient: vertical

用autoprefixer处理css的同学估计都遇到过-webkit-box-orient: vertical被处理掉的问题

一般的做法是添加以下注释:

/*! autoprefixer: off */
-webkit-box-orient: vertical
/*! autoprefixer: on */
...

但是,最近突然不好使了...

于是查了资料,发现autoprefixer的新版本已经变更了这块

6.1的版本
 8.4.0版本

从版本更新的内容可以看到,8.4.0以后的版本都必须采用一下的写法:

/* autoprefixer: ignore next */
user-select: none; /* ← ignored */
mask: url(mask.jpg); /* ← will be prefixed */

elaninhust / h5skills Goto Github PK

h5skills's Issues

Node处理文件上传中转

项目背景

具体操作

问题来了

解决办法

H5 页面横向滚动条隐藏

以前普遍的做法

但是

新的思路

客户端内嵌H5页面中判断iPhone X、iPhone XS、iPhone XS Max、iPhone XR

webpck不能编译这个属性-webkit-box-orient: vertical

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent