开发随手记

2018-08-23
开发经验

星云链来的请点这里 ➡ 星云链DApp《Article》


开发随手记

视屏自动播放方案

jsmepg

音频加载及自动播放方案

soundjs

手动控制失焦

1
2
3
if(document.activeElement.nodeName === 'TEXTAREA' || document.activeElement.nodeName === 'INPUT') {
document.activeElement.blur();
}

弹性布局

属性 说明 资料
box 2012年之前的规范 查看详情
flex 新规范,iOS8.0不兼容 查看详情
  1. flex
  1. 只设置flex-grow: 1;是无法保证盒模型按比例划分的,还需要设置原始长度flex-basis:0%;

css小坑

  1. 父亲容器如果设置了overflow:hidden;,并且子元素是position:fixed;,在pc上子元素会全部展示,但在mobile上子元素超出父级那部分会被隐藏
  2. -webkit-overflow-scrolling: touch;该属性在iOS上极大的提升了滚动效果,但是会带来很多莫名其妙的BUG。(暂未有很好的解决方案)
  1. 在vue中会出现部分元素渲染不出来,甚至是白屏。
  2. iOS下::-webkit-scrollbar {display:none}将会失效。

webpack项目相对路径解决方案

webpack配置使用几乎都是绝对路径,对相对路径不是很友好,如果需要配置使用相对路径需:

  1. 配置webpack.config
1
2
3
4
5
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: './'
},

或,无需配置publicPath

1
2
3
4
output: {
path: config.build.assetsRoot,
filename: '[name].js',
},
  1. 使用node处理build之后的css中的部分静态文件,如字体文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require('path');
const fs = require('fs');

exports.replaceFontsPath = (cb) => {
const root = path.join(__dirname, '../');
fs.readdir(path.join(root, 'dist/static/css'), (err, files) => {
if (err) throw err;
files.forEach((item) => {
fs.readFile(path.join(root, 'dist/static/css', item), 'utf8', (errRead, data) => {
if (errRead) throw errRead;
if(!data.match(/static\/fonts/g)) {
cb('Fonts Path, No need to modify');
return;
}
let str = data.replace(/static\/fonts/g, '../fonts');
fs.writeFile(path.join(root, 'dist/static/css', item), str, 'utf8', (errWrite) => {
if (errWrite) throw errWrite;
cb('Font Path, modify success')
});
});
});
});
}

关于babel

includes等新增方法,需要引入polyfill才能兼容,iOS 8.2不支持

其他解决方案待更新。。。