前言

少侠，请留步，相见必是缘分，赠与你一部《踏坑秘籍》

扎马步

踏坑第一式

ios竖屏拍照上传，图片被旋转问题

解决方案

1
2
3
4
5
6
7
8

// 几个步骤
// 1.通过第三方插件exif-js获取到图片的方向
// 2.new一个FileReader对象，加载读取上传的图片
// 3.在fileReader的onload函数中，得到的图片文件用一个Image对象接收
// 4.在image的onload函数中，利用步骤1中获取到的方向orientation，通过canvas旋转校正，重新绘制一张新图
// 注意iPhone有3个拍照方向需要处理，横屏拍摄，home键在左侧，竖屏拍摄，home建上下
// 5.将绘制的新图转成Blob对象，添加到FormData对象中，然后进行校正后的上传操作
// 代码有点杂，待整理后上传，网上应该是可以找到的

踏坑第二式

ios：DOM元素固定一边，另一边滚动，滚动很卡的问题

1
2

// (横向滚动用的多些)简单粗暴的办法，样式添加如下属性
-webkit-overflow-scrolling: touch;

踏坑第三式

部分手机第三方输入法会将页面网上挤的问题

1
2
3
4
5
6

// 特定需求页面，比如评论页面，输入框在顶部之类的
const interval = setInterval(function() {
    document.body.scrollTop = 0;
}, 100)
// 注意关闭页面或者销毁组件的时候记得清空定时器
clearInterval(interval);

踏坑第四式

iPhoneX适配

1
2
3
4
5
6
7
8
9
10
11
12
13

// 1.viewport meta 标签增加属性viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
// 2.body元素增加样式
body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有fixed底部的元素，也增加上面样式
xxx {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff; // 记得添加background-color，不然会出现透明镂空的情况
}

踏坑第五式

某些机型不支持video标签的poster属性，特别是安卓

1
2
3

用图片元素 <img />来代替poster
播放前显示<img />，隐藏 <video />
播放后显示<video />，隐藏 <img />

踏坑第六式

CSS透明度颜色设置问题

1
2

Android部分不支持 hex写法，推荐用rgba的写法
#0000009c --> rgba(0, 0, 0, 0.61)

踏坑第七式

flex对低版本的ios和Android的支持问题

1
2
3
4
5
6
7
8

使用postcss的autoprefixer插件，自动添加浏览器内核前缀，
并且增加更低浏览器版本的配置，自动添加flex老版本的属性和写法
autoprefixer({
    browsers: [
        'iOS >= 6',     // 特殊处理支持低版本IOS
        'Safari >= 6',  // 特殊处理支持低版本Safari
    ],
}),

踏坑第八式

ios 页面回退到长列表出现灰色遮挡问题

1
2
3
4
5
6

方案1：对列表数据进行缓存，比如redux之类的用法。
方案2：回退时，跳到页面顶部。
const timer = setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
}, 0);

踏坑第九式

ios 日期转换NAN的问题

1
2

将日期字符串的格式符号替换成'/'。
栗子：'yyyy-MM-dd'.replace(/-/g, '/')

踏坑第十式（React）

未知错误异常，导致页面崩溃，空白

1
2

React 16.x 增加了componentDidCatch() 生命周期方法
捕获全局异常来进行页面的友好提示（具体用法网上有很多资料）

打完收招

晋级还需要多多修炼

前端攻城狮②群：592688854。欢迎感兴趣的各路武林豪杰加入。

一个对腾讯web地图简单封装的React组件

GitHub源码地址：戳我

栗子：戳我

栗子源码：戳我

安装

1
2
3

yarn add react-qmap  
or npm install react-qmap

阅读全文

React Native 模仿网易云音乐手机客户端，兼容安卓和IOS两个平台。

GitHub 完整源码地址https://github.com/yezihaohao/NeteaseCloudMusic

老规矩，先上图~😄

总览

音乐播放

阅读全文

前言

以前写前端项目打包部署，都是手动运行命令，打包完，然后压缩，再上传到服务器解压。
这种方式确实有点low并且效率也不高。
自从用了Jenkins持续集成工具，写前端项目越来越工程化，再也不用担心忘记部署项目，也不用烦躁每次打包压缩后还要部署多个服务器和环境，更开心的是每次家里写完代码，不用远程公司部署项目，提交代码后自动会为你部署。
本文基于React的前端项目和GitLab的代码仓库以及Windows(其他系统平台大同小异)，简述Jenkins实现自动部署的配置。

安装Jenkins

前提：已配置好java环境

1.下载对应的安装程序点我进入下载网站或直接下载war包

2.根据提示安装完成（默认端口是8080）

war包启动方式： java -jar jenkins.war –httpPort=8080（端口自定义），然后访问http://localhost:8080

3.查看插件

点开系统设置的插件管理页面，如果可选插件列表为空，点击高级标签页，替换升级站点的URL为：http://mirror.xmission.com/jenkins/updates/update-center.json
并且点击提交和立即获取

4.返回可选插件，选择如下插件安装（如果已安装，请忽略）

1.Publish Over SSH
2.GitLab Plugin
3.Email Extension Plugin

阅读全文

最下方增加版本更新日志😁

前言

网上react后台管理开源免费的完整版项目比较少，所以利用空余时间集成了一个版本出来，已放到GitHub
启动和打包的时间都稍长，请耐心等待两分钟

• GitHub地址
• 预览地址(已增加响应式，可手机预览😄)

依赖模块

项目是用create-react-app创建的，主要还是列出新加的功能依赖包

点击名称可跳转相关网站😄😄

• react@15.5.0
• react-router@3.0.2(react路由,4.x的差异还是比较大，暂时还是3.x的版本)
• antd@2.9.3(蚂蚁金服开源的react ui组件框架)
• axios@0.16.1(http请求模块，可用于前端任何场景，很强大👍)
• echarts-for-react@1.2.0(可视化图表，别人基于react对echarts的封装，足够用了)
• recharts@0.22.3(另一个基于react封装的图表，个人觉得是没有echarts好用)
• nprogress@0.2.0(顶部加载条，蛮好用👍)
• react-draft-wysiwyg@1.9.6(别人基于react的富文本封装，如果找到其他更好的可以替换)
• react-draggable@2.2.4(拖拽模块，找了个简单版的)
• screenfull@3.2.0(全屏插件)
• photoswipe@4.1.2(图片弹层查看插件，不依赖jQuery，还是蛮好用👍)
• animate.css@3.5.1(css动画库)
• 其他小细节省略

功能模块

备注：项目只引入了ant-design的部分组件，其他的组件antd官网有源码，可以直接复制到项目中使用，后续有时间补上全部组件。
项目使用了antd的自定义主题功能–>黑色，若想替换其他颜色，具体操作请查看antd官网

阅读全文

前言

了解eslint基础用法，若想更进一步了解其，请查阅官网以及相关资料(中文网)
若有问题请指出或加群264591039与我讨论。

初始化项目

使用create-react-app 创建项目（此过程不做详解），然后运行npm run eject使其暴露webpack等配置文件

自定义eslint

上述步骤并没有暴露react脚手架封装的eslint操作，为了使得项目统一规范化，添加jsx-eslint操作
是非常不错的选择（关于js其他的eslint操作，请参见官网，本文主要针对jsx限制规范配置）。

• 在项目根目录下添加.eslintrc文件

  阅读全文

针对项目中常用的javascript api等，进行一个汇总~

文档持续更新中。。。

前提：有些功能可能浏览器还不支持，需要用babel进行转换，具体的babel环境搭建，请自行Baidu或google。
很多框架的脚手架生成的helloworld项目是已经搭好的环境，比如react或者vue，所以使用脚手架的童鞋大可放心使用。
若有问题可加群264591039与我讨论。

扩展运算符：三个点 …

合并数组

1
2
3
4

let arr1 = [1, 2], arr2 = [3, 4];
arr1.push(...arr2);  // 把arr2合并到arr1的尾部, arr1改变
arr1.unshift(...arr2);   // 把arr2合并到arr1的顶部, arr1改变
[...arr1, ...arr2];  // 生成一个由arr1和arr2组成的新数组，原数组不变

复制对象

阅读全文

前言

socket.io: 包含对websocket的封装，可实现服务端和客户端之前的通信。详情见官网 (虽然是英文文档，但还是通俗易懂)。
Notification: Html5新特性，用于浏览器的桌面通知，只有部分浏览器支持。
通过nodejs+Socket.io+Notification实现服务端往浏览器客户端发送自定义消息。
若有问题可加群264591039与我讨论。
转载请注明出处！

开发前提

本地安装nodejs以及npm
对nodejs以及express框架有一定了解。（本篇将和官方文档一样，采用express 4.10.2）

环境搭建

• 新建一个文件夹notification（以下操作都在该文件夹的根目录进行）
• npm初始化package.json文件 npm init
• 安装express(指定版本4.10.2，没有试过其他版本，感兴趣可以试下) npm install --save express@4.10.2
• 安装socket.io(本人安装的版本是1.7.3) npm install --save socket.io

编写代码

构建通信环境

在根目录下新建一个index.html（注：index页面的样式来自socket.io的官方示例）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!doctype html>
<html>
  <head>
    <title>Socket.IO Notification</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

新建一个index.js文件，并在js文件中构建相应的对象和变量，创建监听端口为8080 的服务器，以及添加映射到index.html的路由。

阅读全文

前言

vue 的组件化开发是一个非常不错的机制.’一处开发,多处引用’，不仅降低的维护成本，提高了开发效率，而且单独的组件有单独的视图和交互数据逻辑，使得系统层次更加分明。若有问题可加群264591039与我讨论~转载文章请标明出处！

开发场景

数据可视化是我们互联网常见的功能，所以难免我们会在项目中插入图表等，找到一个还算可以的图形插件，阿里的G2图形库，详情请参见G2官网。接下来就开始我们的Vue G2组件化之旅。

脚手架搭建helloworld

先用脚手架工具 vue-cli搭建一个vue的helloworld项目(Vue的相关教程请看Vue官网)，按照readme文档正常运行该项目。

安装G2插件

在package.json的目录下用npm包管理工具安装G2插件库

1

npm install --save-dev g2

我用到的版本是2.2.1，现在最新的好像是2.2.2，应该也没什么问题，不过我没测试过

新建G2Line.vue单文件组件

在components目录下新建G2Line.vue文件（当前是以线形图为例的组件）。
在template标签中新增标签

1
2
3
4

<template>
  <!--此处的id用变量，方便同一页面引用多次相同的组件-->
  <div :id="id"></div>
</template>

阅读全文

接着上篇 Nodejs爬虫–抓取豆瓣电影网页数据（上）
本篇主要描述将上次抓取的数据存入mongodb数据库
前提：百度或谷歌mongodb的安装教程，安装本地并成功运行
推荐一款mongodb数据库可视化管理工具：Robomongo。可以加群264591039获取安装包或自行寻找资源

首先用npm安装第三方数据库操作包：mongoose.

关于mongoose详情请查看官方文档

1

npm install --save-dev mongoose

引入mongoose包开始对mongodb进行管理

当前目录下新建一个mongo.js文件方便管理，在该文件中引入相关包：

1
2

let mongoose = require('mongoose'),
    assert = require('assert');

阅读全文