发表于 |

使用微信小程序云函数功能，可以做到不需要后端服务就能完整运行一个小程序，涉及到文件存储、数据库等

阅读全文 »

发表于 |

检查本地安装包跟package.json的版本、数量是否一致

多人协作项目中有这样的场景：组内A同学新增或者升级了某个包，package.json产生变化，A同学提交package.json到仓库，B同学拉取仓库最新代码，可能忘了install一下了，直接提交代码到xx环境了，这里实现一个方法在打包时给出包差异..

1
2
3
4
5
6
7
8
9
10
11
12
let chalk = require('chalk')
module.exports = function() {
require('check-dependencies')({scopeList:['dependencies', 'devDependencies']})
    .then(function (output) {
      /* handle output */
      // console.log(JSON.stringify(output));
      if(output.status === 1) {
        console.log(chalk.red(output.error.join('\n')));
        process.exit(1);
      }
    });
}

    check-dependencies在每次打包之前检查一些，有差异直接退出当前打包进程～,这样就可以避免同组成员包之前差异了～ 当然有统一的打包机器jenkins就没这种问题了

发表于 | 
1
2
3
4
5
6
7
8
9
10
11
12
13
fetch('/api/getList',
     {credentials: 'include', 
     //表示用户代理是否应该在跨域请求的情况下从其他域发送cookies
     //omit:不发，same-origin:同源才发，include：不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息。
      method: 'post', //请求方式
      headers: {'content-Type':'application/json;charset=UTF-8'}, //设置请求header头
      body:JSON.stringify({'prescriptionNumbers':'450','outpatientNumber':'1524450117626','patientId':'5000008149'})}) //参数传递 字符串
.then(res=>res.json()) //解析json
.then((data)=>{
  console.log(data);
}).catch(err=>{  //捕获异常
  console.log(err);
})

发表于 |

vue服务端渲染在项目中的应用

很多项目首页的渲染方案，都是通过js去拉接口数据回来然后动态生成dom结构，这样有个不好的地方，就是你需要通过一个loading来遮挡页面的初始化渲染，为了视觉上的体验，不能让用户看到页面从无到有这么的一个加载过程，影响体验效果，通过chrome查看source里面的页面文件，你就只看到一个简单的html，页面结构是没有的，这样也不利于现在搜索引擎去爬页面数据，不利于SEO，一是考虑页面能尽快的呈现给用户、二是SEO，那么服务端渲染就很有必要了

阅读全文 »

发表于 |

mockjs

    官网 前后端分离项目，在和后端定义好接口数据格式后，前端可以不需要等到后端把接口开发完了才做联调,以前我的做法是直接在js里面写死一个json来达到模拟效果，而今在vue项目里面，结合webpackdevserver+mockjs可以生成随机数据，拦截请求，更方便、更真实的模拟接口场景，这里mockjs的更深入内容请结合官方网站来看，我这里只列出我项目中用到的使用方式~

阅读全文 »

发表于 |

用户在页面提交某个请求时，会触发页面按钮事件，有时候网络响应慢，用户可能等不急，就会多次点击，在前端没用做预防措施的情况下造成多次发送请求，量大的时候可能会导致服务器奔溃，这篇文章罗列了我做业务时所用到的几种预防措施

阅读全文 »

发表于 |

DllPlugin、CommonsChunkPlugin插件

运用webpack打包项目时，通常会提取第三方不经常更改的库到一个vendor里面，业务代码另行处理，但如果是用CommonsChunkPlugin插件来做的话，存在每次打包打到第三方库的vendor的hash也会改变，这样每次发版hash变了，客服端强缓存就失效了，本无改变的代码，hash也变，这跟莽荒时代静态文件全局统一版本号有什么区别呢，并且每次都要重新构建一遍，大大增加了降低了构建效率。打包慢～。这里就有了DllPlugin插件，它需要单独对其配置，然后再webpack.config里面通过new webpack.DllReferencePlugin引入，具体配置如下

阅读全文 »

发表于 |

弹窗弹出时页面不能滚动

在做移动端业务的时候，经常会有弹出弹窗组件的需求，如dialog、toast，有一个用户体验是弹窗弹出后，用户手指滑动页面的时候，原始页面应该是不能再滚动的，而弹窗内的滚动又是可以滚动的,那么如何在来屏蔽页面滚动，释放弹窗内的滚动呢，首先想到的是给html、body标签添加class使其overflow:hidden;这样做的问题是：手机端用户滚动到屏幕一定位置后再去触发弹窗，这时候设置overflow:hidden的属性，页面会滚到页面顶部，这样肯定是不行的，这里用js去禁用touchmove事件的默认行为，而弹窗内的滚动又做一下差异处理，代码如下(zeptojs实现)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
 params:{
  $dialog:弹窗类名,
  $inner-dialog:弹窗内需要滚动的类
 }
 eg:fixedDialog('#wx_follow','.js-dialog-body')
*/
var fixedDialog = function($dialog,$inner-dialog) {
     /*弹窗滚动与下拉刷新的兼容解决办法*/
      var y;
      var top;
      var $scroll = $dialog.find($inner-dialog);
      $dialog.on('touchmove', function (e) {
          e.preventDefault();
      });
      //弹窗内需要滚动的地方
      $scroll.length && $scroll.on('touchmove', function (e) {
          var dy = (y - e.touches[0].clientY)*1.2;
          $scroll.scrollTop(top + dy);
      }).on('touchstart', function (e) {
          y = e.touches[0].clientY;
          top = $scroll.scrollTop();
      });
}

很小的一个产品体验细节，但是好的产品都是慢慢通过细节来打磨的～