最近在使用antd-mobile开发新项目，使用了它提供的高清方案。按照其设计规范，开发过程中使用px为css单位，build根据1rem=100px(dpr=2)换算，所以用到了postcss-pxtorem。

以下是项目中webpack.config.js的主要配置：

1
2
3
4
5
6
7
8
9

loaders: [
{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader!postcss')
 }],
postcss: [
    autoprefixer({browsers: ['last 5 versions']}),
    pxtorem({rootValue: 100, propWhiteList: []})
]

然后出现了个“诡异”的问题，正常的.scss文件中的px都正常转成rem了，但是当scss文件中import了其他的scss文件，引入的文件中的px不会被转成rem。当时认为是pxtorem插件的问题，还傻傻的去pxtorem的GitHub上提了个issue。后面在postcss-loader的文档上找到了问题：

You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

就是postcss要放到sass-loader之前执行，所以改成下面问题就解决了：

1
2
3
4

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss!sass-loader')
 }

在开发webapp时，经常会用到UI给的小图标，UI一般会提供png和svg两种格式。使用png经常需要考虑不同分辨率和dpr设备的差异，一个图标UI可能会提供两到三种不同大小的图片，这样处理很不方便。直接使用svg的话，svg单独一个文件会耗网络请求，嵌入到html中又会使html变得臃肿，重复利用率不高。使用icon-font可以直接使用class的方式，显示图标，而且和字体一样，可以设置大小和颜色，非常方便。

介绍一种可以直接将svg创建icon-font字体的网站，https://icomoon.io/app，如下图所示，直接导入UI给的svg（最好提前用class的方式进行命名，方便后续使用）。

选择要导出的图标，点击“生成字体”按钮，在该页面可以预览要导出的字体图标及对应的编码。

点击设置，可以设置字体的名称和class前缀，还可以生成对应的sass、stylus、less文件等。

点击“download”，就可以下载字体，然后进行使用啦。

在Angular中，加载图片的方法是使用ng-src标签，如：

1

<img ng-src="{{imgUrl}}"/>

其中imgUrl为图片地址，如果图片正常能显示，那这么使用一点问题没有，但是，如果图片加载失败了（例如该图片已经不存在，从而出现404错误），在该放图片的地方就会出现一个难看的图片加载失败图标，如果想把这个图标换成你自定义的图片，可以如下这么做：
一、自定义指令（推荐）
HTML:

1

<img ng-src="{{imgUrl}}" err-src="{{errUrl}}"/>

JavaScript:

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

var app = angular.module("MyApp", []);
app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        if (attrs.src != attrs.errSrc) {
          attrs.$set(‘src‘, attrs.errSrc);
        }
      });
    }
  }
});

这样一来，就把错误图标换成了你自己指定的地址errUrl，前提是errUrl这个图片是存在的。

二、使用onerror属性

1

<img ng-src="{{imgUrl}}" onerror="this.src='/img/404.png'" />

使用这个方法，只适用于固定地址的图片，不能使用ng-bind的形式。

参考：

AngularJS中如果ng-src 图片加载失败怎么办

本文记录在开发过程中，使用UC Android浏览器遇到的一些问题。
不支持的JS方法：

1

console.table();

这两天在使用angular进行开发的时候，出现了如下错误：

1

TypeError: Cannot read property 'insertBefore' of null

在网上找了一些资料，总结了下，需要在ng-repeat、ng-if等标签外面再加个div标签，
加上了就没有报错。如果当前页面没有用到ng-repeat、ng-if之类的标签，就需要从父路由中找了。
错误前：

1
2
3

<div ng-if="view.type !== 'ali'">
    <div>其他内容</div>
</div>

修改后：

1
2
3
4
5

<div>
    <div ng-if="view.type !== 'ali'">
        <div>其他内容</div>
    </div>
</div>

之前建的博客是基于Jekyll的，然后也没发过博客。现在试试hexo，以后就用它了。