2018-09-25

☞ gulp报错

gulp[11720]: srcnode_contextify.cc:631: Assertion `args[1]->IsString()' failed.

原因：node 升级到10.0.0后出现这种情况 回退版本即可。即卸载node重新安装低版本的node。

---

☞ [class^="icon_"]、[class*=" icon_"]是什么意思

[class^="icon_"] 这个表示以icon_开头的class
[class*=" icon_"] 这个表示包含icon_的class

---

☞ vue项目在手机上查看

修改config/index.js下的host为本机ip地址，重新npm run dev运行，利用草料文本二维码生成二维码。

---

☞ 内置 Logger 插件

如果正在使用 vue-devtools，你可能不需要此插件。

Vuex 自带一个日志插件用于一般的调试:
这是会在浏览器console打印出：

---

☞ map的运用

//state.arr为[{id:"0",name:"小红",age:19},{id:"1",name:"小李",age:20}]
indexType: (state, getters, rootState) => {
    return state.arr.map(({ id, name}) => {
      return { id, name}
    })
  }
//返回[{id:"0",name:"小红"},{id:"1",name:"小李"}]

以上代码，运用map遍历数组state.arr，通过解构赋值id和name，返回包含id和name的新数组。

---

☞ 移动端横竖屏检测

(function () {
       let timer;
       let type = 'onorientationchange' in window ? 'orientationchange' : 'resize';
       if (type === 'orientationchange') {
           window.addEventListener(type, function () {
               if (window.orientation === 180 || window.orientation === 0) {
                   //竖屏
               }
               if (window.orientation === 90 || window.orientation === -90) {
                   //横屏
               }
           }, false);
       } else {
           window.addEventListener(type, function () {
               timer && clearTimeout(timer);
               // 设置定时器是为了防止window的size变化，不断触发触发resize事件
               timer = setTimeout(function () {
                   if (window.innerWidth > window.innerHeight) {
                       //横屏
                   } else {
                       //竖屏
                   }
               }, 300);
           }, false);
       }
   })();

改进：如果有多个地方需要监听横竖屏，就需要注册多个window.addEventListener("resize", function(event) {……})。能不能通过订阅与发布模式来改进一下，只注册一个resize负责监听横竖屏变化，只要横竖发生变化就发布通知订阅的对象。其他需要监听横竖屏的地方只需订阅一下即可。

---

☞ 移动端下载问题

移动端微信不具有下载功能，需要提示点击右上角的...，打开浏览器。但根据vue-router的路由，#号后面的地址，微信内置浏览器无法识别，如http://10.16.22.161:5562/#/detail，微信内置浏览器只识别#前面的，所以当点击右上角的...时，会在浏览器默认跳到首页，用户体验不好，需求是当打开浏览器的时候默认直接下载。
解决办法是在static文件夹新建一个html文件，作为中转站，当该页面加载的时候，判断是微信还是浏览器，如果是微信则弹出提示，否则直接下载。

 (function () {
        var ua = navigator.userAgent.toLowerCase();
        function is_weixin() {
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                // 微信内置浏览器
                return true;
            } else {
                // 不是微信内置浏览器
                return false;
            }
        }
        function bindEvent() {
            var button = document.getElementById("download");
            var isAndroid = ua.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            button.addEventListener("click", function () {
                //在此处判断是苹果还是安卓手机，安卓下载
                if (isAndroid) {
                    //普通浏览器可以打开，但是微信屏蔽了下载apk的链接，不能正常下载
                    location.href = "http://20170504update/_APP_449_20170817_004.apk"
                } else {
                    //直接跳转到苹果appStore,携带上app的id
                    location.href = "https://itunes.apple.com/cn/app/id529479190?mt=8&from=singlemessage"
                }
            });
        }
    })();

---

☞ Vue-router 中hash模式和history模式的区别

1 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
2 history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
3 结合自身例子，对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。