2019-06-02

2019-06-02

[2019-06-21]vue-cli3.x项目, 开发构建时使用ie10访问报错
[2019-06-20]axios请求走了系统代理导致504
[2019-06-20]vue-cli3.x, 设置环境变量
[2019-06-19]小程序请求限制
[2019-06-18]只改变了文件名大小写时如何提交到git
[2019-06-14]简单扩展axios, 实现预处理与后处理
[2019-06-13]axios下载文件
[2019-06-11]部分安卓机使用wx.startSoterAuthentication时直接到fail回调, errCode为-1
[2019-06-10]git pull cannot lock ref ‘xxx’: ref xxx is at xxx but expected
[2019-06-09]使用travi-ci进行npm包发布时, 提示401 must be logged in to publish packages
[2019-06-07]使用body-parser处理过后的请求不能直接通过http-proxy-middleware来转发
[2019-06-02]微信小程序部分安卓机器, 使用手写输入法会因为草稿状态导致不能触发input事件

[2019-06-21]vue-cli3.x 项目, 开发构建时使用 ie10 访问报错

开发过程中, 使用 IE10/11 访问Webpck.devServer会报错script1002脚本错误

查看报错行的时候, 发现打包的代码中没有把 ES6 的语法进行编译

找到原因是 vue-cli3.x 的配置中, babel 默认不处理 node_modules 里面的资源, 所以当程序依赖一个没有发布 ES5 版本包的 npm 模块时, 就会导致这个问题

这个时候需要我们在配置文件中申明相关模块需要被 babel 处理

// vue.config.js
module.exports = {
  // ...
  transpileDependencies: ["normalize-url", "sort-keys", "prepend-http"]
  // ...
};

相关资料

[2019-06-20]axios请求走了系统代理导致504

在node端使用axios请求时, 疯狂的报504错误, debug观察axios响应对象才发现不知道为什么请求的url被拼接上了系统代理的url

// 请求
try {
  const html = await axios.get('http://127.0.0.1/8080');
} catch (err) {
  console.log(err);
}

// err中有类似的数据
_currentUrl: 'http://system.proxy.com:8080:127.0.0.1:5001/' // system.proxy.com:8080为本机系统代理

之前一直的请求都是没有问题的, 出现这个问题之后可以显示设置让axios不走代理

// 请求
try {
  const html = await axios.get('http://127.0.0.1/8080', { proxy: false });
} catch (err) {
  console.log(err);
}

而诡异的是, 在我记录这条note的时候, 我把{ proxy: false }去掉了之后又能正常访问了

还没定位到关键问题是什么, 也有可能是系统代理的问题

[2019-06-20]vue-cli3.x, 设置环境变量

根据文档说明, 只有以VUE_APP_为开头的环境变量才会被webpack.DefinePlugin嵌入到客户端js的包中

{
  "scripts": {
    "dev": "VUE_APP_MODE=value vue-cli-service serve"
  }
}

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量： NODE_ENV - 会是 “development”、”production” 或 “test” 中的一个。具体的值取决于应用运行的模式。 BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。 所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

详情可参考vue官方文档

[2019-06-19]小程序请求限制

根据微信官方文档所说

wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个；

而团队应为之前就已经沉淀了一个控制小程序请求队列的工具, 我也一直这么用了下来

和小伙伴讨论起这个问题, 结果小伙伴搜到说微信已经内部实现了请求队列的维护, 所以是不需要我们开发者再自行处理的orz…

详情可以看这篇文章https://segmentfault.com/a/1190000017342011

[2019-06-18]只改变了文件名大小写时如何提交到git

https://stackoverflow.com/questions/17683458/how-do-i-commit-case-sensitive-only-filename-changes-in-git

踩了个坑才知道原来git是大小写不敏感的, 如果需要改动文件名的大下写时, 可以通过git mv命令来触发

# 官方文档说明 https://git-scm.com/docs/git-mv
git mv [-v] [-f] [-n] [-k] <source> <destination>

git mv [-v] [-f] [-n] [-k] <source> ... <destination directory>

除了使用git mv之外, 还可以修改git配置让其文件名大小写敏感, 不过一般并不推荐这样设置

这个How do I commit case-sensitive only filename changes in Git?问题的回答中有相关讨论

[2019-06-14]简单扩展axios, 实现预处理与后处理
// axios
import axios from 'axios';
import post from './mid/post';
import errorHandler from './mid/errorHandler';

const before = [post];
const after = [errorHandler];

axios.interceptors.request.use(
  async config => {
    let mids = [...before];
    if (config.before) {
      mids = [...before, ...config.before];
    }

    try {
      for (let v of mids) {
        await v(config);
      }
    } catch (err) {
      return Promise.reject(err);
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

axios.interceptors.response.use(
  async res => {
    let mids = [...after];
    if (res.config.after) {
      mids = [...after, ...res.config.after];
    }

    try {
      for (let v of mids) {
        await v(null, res);
      }
    } catch (err) {
      return Promise.reject(err);
    }

    return res;
  },
  err => {
    after.forEach(async v => {
        await v(err);
    });

    return Promise.reject(err);
  }
);

export default axios;

// 预处理例子 mid/post.js
export default config => {
  if (config.method === 'post') {
    config.headers = {
      'Content-Type': 'application/x-www-form-urlencoded'
    };
    config.transformRequest = [
      function(data) {
        // Do whatever you want to transform the data
        var ret = '';
        for (var it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
        }
        if (ret.length > 1) {
          ret = ret.substring(0, ret.length - 1);
        }
        return ret;
      }
    ];
  }
};
[2019-06-13]axios下载文件

https://stackoverflow.com/questions/49040247/download-binary-file-with-axios

axios.get("http://my-server:8080/reports/my-sample-report/",
  {
    responseType: 'arraybuffer',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/pdf'
    }
  })
  .then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf'); //or any other extension
    document.body.appendChild(link);
    link.click();
  })
  .catch((error) => console.log(error));
[2019-06-11]部分安卓机使用wx.startSoterAuthentication直接回调fail方法, errCode为-1

部分安卓手机使用该api唤起手机生物识别时, 停顿一下之后会直接到fail回调的逻辑, errCode为-1, 实际并没有唤起生物识别.

微信侧回应是手机系统底层报错了, 建议升级手机系统, 并删除指纹重新录入.

所以处理相关需求时, 需要我们自己做兼容, 处理errCode为-1的情况, 进行降级验证.

[2019-06-10]git pull cannot lock ref ‘xxx’: ref xxx is at xxx but expected

又遇到一次, 非下面提到的情况, 这次在stackoverflow找到略微靠谱的解决方案

git pull fails “unable to resolve reference” “unable to update local ref”

git gc --prune=now
git remote prune origin

原解决方案

相关文章

产生原因

  • 有人操作git/yousa/feature_01这个分支，在git push的时候使用了git push –force，（当然这个人的git push是push不上去），导致远端分支被覆盖，你本地的refs与远端无法一致，导致问题
  • git分支是不区分大小写的，如果有人删除掉这个远端分支又重新新建了一个这个分支也会出现同样的问题。

解决办法

  • 删除有问题的refs，可以直接在.git/refs下面根据错误提示删除对应的refs文件，比如这个就是需要删除refs/remotes/origin/git/yousa/feature_01文件（嫌麻烦直接删除整个refs目录也行）
  • 使用git命令删除相应refs文件，git update-ref -d refs/remotes/origin/git/yousa/feature_01
  • 简单粗暴强行git pull，执行git pull -p
[2019-06-09]使用travi-ci进行npm包发布时, 提示401 must be logged in to publish packages

相关issue如下

travis-ci/travis-ci#9403 travis-ci/travis-ci#10232

[2019-06-07]koa使用body-parser处理过后的请求不能直接通过http-proxy-middleware来转发

相关参考issue

  • https://github.com/nodejitsu/node-http-proxy/issues/1279
  • https://github.com/chimurai/http-proxy-middleware/issues/299
  • https://github.com/nodejitsu/node-http-proxy/blob/master/examples/middleware/bodyDecoder-middleware.js
const proxyMiddleware = async (ctx, next) => {
  const host = getProxyHost(ctx);
  const proxy = httpProxy({
    target: host,
    logLevel: 'debug',
    onProxyReq: (proxyReq, req, res) => {
      // @TODO: 知道如何解决了，但还没搞请求bodyparser对请求动了什么手脚导致代理失败
      req.body = ctx.request.body;
      if (!req.body || !Object.keys(req.body).length) {
        return;
      }

      var contentType = proxyReq.getHeader('Content-Type');
      var bodyData;

      if (contentType === 'application/json') {
        bodyData = JSON.stringify(req.body);
      }

      if (contentType === 'application/x-www-form-urlencoded') {
        bodyData = queryString.stringify(req.body);
      }

      if (bodyData) {
        proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
        proxyReq.write(bodyData);
      }
    }
  });

  await koaConnect(proxy)(ctx, next);
};
[2019-06-02]微信小程序部分安卓机器, 使用手写输入法会因为草稿状态导致不能触发input事件

如图所示

输入法

草稿状态即用户输入之后还要再点一下选哪个字或点确认才算输入完成

有时候用户发现出来的第一个字就是他们想要输入的, 他们可能就不会去再去点击确认

但是微信小程序的input组件在部分安卓机器下, 只有点击选取某个字或确认才会触发bindinput事件

如果使用的bindinput来获取用户输入要注意在页面上提示用户

针对这种情况, 还没试过使用form#bindsubmit事件能不能获取到用户输入