一些开发总结

• dom.getBoundingClientRect().height与dom.clientHeight
  dom.getBoundingClientRect().height能获取小数点级别的px像素，dom.clientHeight只能获取到整数的

• 实现h5的pdf文件预览功能

1. 下载pdf.js相关文件地址：http://mozilla.github.io/pdf.js/getting_started/#download
   image.png
2. 引入文件到项目中
3. 访问地址： xxxx(域名)/pdf/web/viewer.html?file=encodeURIComponent(pdf地址)

• 通过new URL()生成链接，语法文档

new URL(
  require('@img/start/sub_health_share.png'), // => 'start/sub_health_share.png'
  location.href // =>https://aa.com.com/bb/cc/index.html
)
// => 得到URL实例
URL {
 hash: ""
 host: "aa.com.com"
 hostname: "aa.com.com"
 href: "https://aa.com.com/bb/cc/start/sub_health_share.png"
 origin: "https://aa.com.com"
 password: ""
 pathname: "/bb/cc/start/sub_health_share.png"
 port: ""
 protocol: "https:"
 search: ""
 searchParams: URLSearchParams {}
 username: ""
 __proto__: URL
}

// ===================
new URL(
  'start/sub_health_share.png',
  location.href // =>https://aa.com.com/bb/cc/index.html
).href
// => https://aa.com.com/bb/cc/start/sub_health_share.png

new URL(
  '/start/sub_health_share.png',
  location.href // =>https://aa.com.com/bb/cc/index.html
).href
// => https://aa.com.com/start/sub_health_share.png

• css属性：white-space
  属性值：
  normal 默认。空白会被浏览器忽略。
  pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止。
  pre-wrap 保留空白符序列，但是正常地进行换行。
  pre-line 合并空白符序列，但是保留换行符。
  inherit 规定应该从父元素继承 white-space 属性的值。
  值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。可以使用设置该属性值使/n能够换行。

• require一个node模块什么时候需要加上.default？详细解释
  babel@6及之后，不再把export default转成node的module.exports，而是module.exports.default，所以在require的时候需要加上.default。通过引入babel-plugin-add-module-exports这个plugin可以解决这个问题。

// 方式1：在index.js中使用ES6的import方法导入方式
import router from './router'

//方式2：在index.js中使用CommonJS的模块导入方式require引入router模块，则需要使用 .default 来获取实际的组件选项
const router = require('./routes').default;

• 图片的pointer-events属性
  要留意图片操作是否有设置pointer-events属性，会禁用用户行为，比如长按识别图片二维码，长按保存等

• 微信h5长按识别二维码

1. 安卓表现，touchstart，弹出二维码，不会执行touchend事件，需要再点一下屏幕才会触发touchend事件；
2. ios无此问题，touchstart后执行touchend

• 视频自动播放hack
  安卓可自动播放，ios则通过微信内调动wx.getNetworkType()接口触发用户行为点击后调用video.play().

wx.getNetworkType({
     complete: () => {
         video.play()
     }
})

• 输入法实现搜索按钮
  input的type="search"，安卓生效，ios中失效，需要在input外面增加一层form标签.

<form class="form" action="javascript: void(0);" @submit.prevent>
          <input
            ref="input"
            v-model="innerValue"
            type="search"
          />
 </form>