记录一些学习资料

发表于 2017-07-12 | 分类于其他

记录下一些学习网站，方便日后查询

webpack

webpack学习

React

TypeScript

TypeScript 入门教程

阅读全文 »

git常用命令

发表于 2017-06-23 | 分类于其他

记录下工作中常用的那些git命令

1、分支相关

git branch <branch-name> 基于当前分支新建分支
git checkout -b <branch-name> 基于当前分支新建分支，并切换到branch-name分支
git checkout <branch-name> 切换到branch-name分支
git branch -m dev dev2 将dev分支重命名为dev2分支
git branch 查看当前分支
git branch -a 查看本地和远程的所有分支
git branch -vv 查看分支的跟踪情况
git branch -D <branch-name> 删除本地分支
git branch -ｒ 查看远程分支
git branch -r -d origin/<branch-name> ------- git push origin :<branch-name> 删除远程分支并推送到远程
git fetch origin <branch-name> 拉取远程分支到本地

2、用户相关

git config --list 查看用户配置信息
git config user.name XXX 更改用户名
git config user.email XXX 更改邮箱

3、拉取推送相关

git merge dev 合并dev分支到当前分支
git push origin dev -f 同步本地dev分支到远程（慎重），会将远程分支覆盖，不融合

4、标签相关

git tag 查看当前分支下的标签
git tag <tagname> 创建轻量标签
git tag -a v0.1.2 -m "0.1.2版本" 创建附注标签
git checkout <tagname> 切换到标签
git tag -d <tagname> 删除标签
git push origin --delete tag <tagname> 删除远程标签
git push origin --tags 将本地所有标签推送到远程
git push origin <tagname> 将本地某个标签推送到远程

阅读全文 »

记录vue移动开发中碰到的问题

发表于 2017-06-18 | 分类于 vue

记录vue移动开发中碰到的问题

1、微信ios 向上向下拉动会露出底色的问题

出现原因：

全局滚动：滚动到页面顶部或底部时继续向下向上滑动，就会出现

局部滚动：滚动到页面顶部或底部时，手指离开停下，再继续向下向上滑动，就会出现

解决方法：

局部滚动：使用scrollFix

function scrollFix(elem){
    // Variables to track inputs
    var startY, startTopScroll;
    
    elem = elem || document.querySelector(elem);
    
    // If there is no element, then do nothing  
    if(!elem)
        return;
    // Handle the start of interactions
    elem.addEventListener('touchmove', function(event){
        startY = event.touches[0].pageY;
        startTopScroll = elem.scrollTop;
        
        if(startTopScroll <= 0){
            document.body.scrollTop=0;  /* 最新ios版本，同时控制body才行 */
            elem.scrollTop = 1;
        }
        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
            document.body.scrollTop=0;  
    }, false);
}

全局滚动暂时没看到比较好的方案。

使用iscroll 插件算是一种解决方案，可以有效的防止弹性滚动的问题，浏览器自带的滚动条会被禁止.

2、移动端scroll事件，不能实时触发

原因分析

ios的webview 内核设定了其在进行momentum scrolling(弹性滚动)时,会停止所有的事件响应及 DOM操作引起的页面渲染 (亲测),故 onscroll 不能实时响应

参考文章：https://segmentfault.com/q/1010000004453730

解决方法

用touchmove事件代替scroll事件。

网上有人提到使用 setInterval 来监听 scrollTop ，试了下感觉效果也不是特别好，有时候触发迟缓。

阅读全文 »

图片上传相关操作

发表于 2017-05-18 | 分类于 javascript

记录下图片上传的相关操作，File 文件转base64,base64格式转二进制流

获取图片路径

var file = e.target.files[0];
function getFullPath(file) {
    window.URL = window.URL || window.webkitURL;
    if (window.URL && window.URL.createObjectURL) {
        return window.URL.createObjectURL(file);
    } else {
        return null;
    }
}

用canvas方法获取图片的base64

/*
    传入File格式,返回base64格式数据
*/
function getThumbnail(file, area, callback) {
    var canvas = document.createElement("canvas"),
        context = canvas.getContext('2d');
    var img = new Image();
    img.onload = function() {
        var target_w;
        var target_h;
        var imgarea = img.width * img.height;
        if (imgarea > area) {
            var scale = Math.sqrt(imgarea / area);
            scale = Math.ceil(scale * 100) / 100;
            target_w = img.width / scale;
            target_h = img.height / scale;
        } else {
            target_w = img.width;
            target_h = img.height;
        }
        canvas.width = target_w;
        canvas.height = target_h;
        context.drawImage(img, 0, 0, target_w, target_h);
        try {
            var base64Data = canvas.toDataURL("image/jpeg", 0.5);
            callback(file, base64Data);
        } catch (e) {
            callback(file, null);
        }
    };
    img.src = this.getFullPath(file);
}