GaHingZ 发布的文章

puppeteer初探-测试webrtc


介绍

puppeteer是什么?

它是一个nodejs的库,支持调用Chrome的API来操纵Web 它的dom操作可以完全在内存中进行模拟而不打开浏览器

功能强大,可用于截图、pdf生成、UI测试、表单提交、数据爬取、性能诊断...

官方接口地址:https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

安装

通过npm i puppeteer安装

正常是会报错的。

解法方法1:

1.采用cnpm i puppeteer

解法方法2:

1.使用npm i --save puppeteer --ignore-scripts安装并忽略chromium的下载 2.自行下载 chromium 或 采用本地chrome (后面会说明这样的好处)


Vue 第一个组件,浏览器后退无法触发beforeRouteLeave的问题与解决


已提issue: https://github.com/vuejs/vue-router/issues/1951

现象

加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为待监听组件)时,正常跳转其他页面可以触发beforeRouteLeave。 但是按浏览器的后退按钮监听不到该事件。

解决方案

目前采用比较土且不实用的解决方案。加一层组件,再router.push到待监听组件,使得待监听组件非第一个组件,可以正常监听beforeRouteLeave事件。

注意点:

由于打乱了原来的路由。需要在main.js中添加全局的路由监听

router.beforeEach((to, from, next) => {
  if (to is '用于跳转的组件' && from is '待监听组件') {
    router.go(-1) 
    next(false)
  } else {
    next()
  }
  // 这样当从一个普通页面A进入待监听组件时,在待监听组件中按返回键时能正常进入A
})

存在的问题:

  1. 若访问不是访问中转组件而是直接访问待监听组件,则没有效果
  2. 增加路由后,多了白屏时间。

可能官方有什么解决方案,或者我用错了。欢迎评论

后记:

VUE路由控制是基于h5的history API实现

beforeRouteLeave又是基于window.onpopstate

该事件的官方描述:

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as clicking on the back button (or calling history.back() in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.

简而言之:该事件仅在按了浏览器按钮或者调用history.back()方法时生效,且在同一document的两条历史记录条目间的导航才会生效,而上文出现的原因正是不属于同一document


Android模拟触控解决方案


数据采集

Android端

重写onTouchEvent,收集event数据,以一定的编码传输

public boolean onTouchEvent(MotionEvent event){
    String rec="";
    int pointerCount = event.getPointerCount();
    if (pointerCount > MAX_TOUCHPOINTS) {
        pointerCount = MAX_TOUCHPOINTS;
    }
    int opt=event.getAction();
    boolean isFirst=true;
    if(opt==2){
        for (int i = 0; i < pointerCount; i++) {
            int id = event.getPointerId(i);
            int x = (int) event.getX(i);
            int y = (int) event.getY(i);
            if(isFirst){isFirst=false;}
            else rec+=";";
            rec+=id+",2,"+x+","+y;
        }
    }else if(opt==0||(opt-5)%256==0){
        //为了简化,我们假设这过程不会进行MOVE
        int ind=(event.getAction()-5)/256;
        for (int i = 0; i < pointerCount; i++) {
            if(i==ind){
                int id = event.getPointerId(i);
                int x = (int) event.getX(i);
                int y = (int) event.getY(i);
                if(isFirst){isFirst=false;}
                else rec+=";";
                rec+=id+",0,"+x+","+y;
                break;
            }
        }
    }else if(opt==1||(opt-6)%256==0){
        int ind=(event.getAction()-6)/256;
        for (int i = 0; i < pointerCount; i++) {
            if(i==ind){
                int id = event.getPointerId(i);
                if(isFirst){isFirst=false;}
                else rec+=";";
                rec+=id+",1";
                break;
            }
        }
    }
    return true;
}


Diigo技术调研


简介:

Diigo:像在本子上一样为网页做笔记,后面再进入(本地)该页面会显示原来做的笔记

功能调研

功能一:选择一段文字 可以设置背景颜色

diigo不支持选择文字的再选择,我们调研时 做成可再选择的。 比如一段

<div class="test">
    <p>对于选中的一段文本 应该记录其在dom节点的所有段 给其加标签</p>

    <ol>
        什么鬼啊
        <li>回复数阿飞</li>
        666
        <li>找商店帖</li>
        <li>言论是对的,在100年</li>
    </ol>
</div>

然后选中了

                                             有段 给其加标签</p>

    <ol>
        什么鬼啊
        <li>回复数阿飞</li>
        666
        <li>找商

如果是直接输出window.getSelection()的话是有段 给其加标签什么鬼啊回复数阿飞666找商 与标签无关,没有任何意义 这时候应该按如下步骤去操作:

获取Range

var range=window.getSelection().getRangeAt(0);

什么是Range及用法请参考这里

利用Range得到选中文字两端所在的dom节点

var startNode = range.startContainer; //得到‘选择文字’左部所在的容器节点(文本节点,nodeType=3)
//如这边startNode.nodeName是#text 而不是p
var endNode = range.endContainer; 
//文本节点获取其父节点:Element节点 用parentElement 也可以
//不能只记录父节点,需要记录父节点的第几个#TEXT 因为文本节点的父节点不一样只有一个child文本节点 如本例中的<ol>
//不能记录文本节点,因为getElementsByTagName不支持search #TEXT
var startParentNode = startNode.parentNode;
var endParentNode = endNode.parentNode;