Webpack

1. npm run build 自闭合标签问题和属性值引号问题

我上一个项目的是我build扔到后台当作静态资源发布的，但当我build之后扔给后台的时候，后台和我说报错了，原因是解析错误，看了下日志是缺少闭合标签和引号，只需要在html-webpack-plugin里配置一下即可：

xhtml: true, // 将link标记渲染为自动关闭（符合XHTML）
minify:{
  removeAttributeQuotes: false, // 元素属性引号
  keepClosingSlash: true // 自闭合元素“/”
}

这只是针对于webpack打包后link标签的结果，另外我们可以在index.html模板里手动改变meta的闭合标签

Vue

1. element-ui 事件传参问题

在Table组件里使用表单组件的时候，比如Radio，因为Radio有一个自己的change事件，参数是值变化时触发的事件，但与此同时我还想拿到到scope.row，问题就来了：假如说我们这么写：

<el-table-column label="地址" show-overflow-tooltip>
  <template slot-scope="scope">
    <el-radio-group @change="change(scope.row)">
      <el-radio :label="1">备选项1</el-radio>
      <el-radio :label="2">备选项2</el-radio>
    </el-radio-group>
  </template>
</el-table-column>

这样的话scope.row就会把change的默认参数给覆盖掉，因为change默认是不传参的：@change="change"，这意味着我们不能同时拿到两个值，要不就是change的值，要不就是scope.row的值，查了一下vue中事件可以用$event代替，所以我们可以这么写：

<el-table-column label="地址" show-overflow-tooltip>
  <template slot-scope="scope">
    <el-radio-group @change="change($event, scope.row)">
      <el-radio :label="1">备选项1</el-radio>
      <el-radio :label="2">备选项2</el-radio>
    </el-radio-group>
  </template>
</el-table-column>

这样一来我们就可以同时拿到拿到change的值和scope.row的值。

混合开发问题

1. js调用Native

最简单的方法就是Native通过js注入在window对象上挂载要执行的函数，浏览器通过调用这个方法来达到交互的目的。

2. Android下H5页面重定向问题

Native下h5页面重定向，Android端的表现是又打开了一个浏览器加载，而ios没问题，可以在app内跳转，这个问题的主要原因是Android监听不到window.location.href所以不会触发shouldOverrideUrlLoading，解决方案是模拟点击：

const A_TAG = document.getElementById("jump");
A_TAG.setAttribute("href", this.href);
A_TAG.click();

3. ios下Promise失效

我在某个项目里使用Promise来获取ios的回调，触发回调后调用ios的登陆组件。第一次正常跳出登陆组件，关闭后再次触发不跳转（Android正常）。debugger之后发现promise回调执行完毕后并没有触发resolve，很是不解，查了很多资料也没有查到，没办法到最后只能用回调函数解决。

React

1. 使用`react-intl`国际化问题 >2018.11.29

日前项目里使用react-intl进行国际化，项目里要求简体中文、英文、繁体中文，所以按照官网我们要引入：

import { IntlProvider, addLocaleData } from "react-intl";

import zh_CN from "./langConfig/zh_CN.js"; //导入配置文件
import zh_HK from "./langConfig/zh_HK.js";
import en_US from "./langConfig/en_US.js";

import en from "react-intl/locale-data/en"; //导入地点数据库，作用于日期格式化或单复数等
import zh from "react-intl/locale-data/zh";

addLocaleData([...en, ...zh]);

const langMap = {
  zh: zh_CN,
  "???": zh_HK, // 繁体中文包在哪？
  en: en_US,
};

查看了一下react-intl/locale-data下并没有类似于zh_HK或zh_TW的包，那么这个繁体中文的国际化在哪呢？

经过我和同事的一番努力，在源码里，发现这个addLocaleData方法实际上是引用了intl-messageformat，我们在intl-messageformat的locale-data文件夹下发现了未编译的地点数据库文件，查看了zh.js，如下：

原来他们把中文简体和繁体都放在一起了，仔细看会发现，虽然上面罗列了八种中文字体，但是所以简体使用的是同一套规则，所有繁体也是同一套规则。

明白了之后我们就可以这么写了：

const langMap = {
  zh: zh_CN,
  zh_Hant: zh_HK, // 繁体中文包在哪？
  en: en_US,
};

然后你就会发现不报错了啦，解决！

日常问题