phonegap 2.9 webview iframe designMode 无法删除图片&键盘event 捕获异常

注:发现影响到键盘的使用,不想误导人,所以这个处理保留,后面想到解决方式再记录到这里。

不要吐槽我为什么还用2.9,一个一两天搞定的小工具,去更新后不知道要花多少时间,现有的东西会出什么问题….修复小问题,比折腾新版本妥当点。尝试过找相对近的版本3.x发现都一样。就自己查了下原因解决

这些版本有个问题,虚拟键盘捕获的keycode都为0,而且还出现一些比较奇葩的问题,简单的富文本编辑器里的图片无法删除。

补充个原来先简单应付的删除处理,加了一个按钮,根据获取的光标索引删除内容,现在这个是phonegap里的,其它地方出现的时候,实在不行还是得上。。

					$('#edit_note_btn_delete_img')
							.click(
									function() {
										if (window.edit_note_content.window.document
												.getSelection().focusNode
												.toString() == '[object HTMLBodyElement]') {
											var focusOffset = window.edit_note_content.window.document
													.getSelection().focusOffset;
											$(
													window.edit_note_content.window.document.body.childNodes)
													.eq(focusOffset - 1)
													.remove()
										} else {
											$('body', $edit_note_d).html()
										}
									});

 

http://stackoverflow.com/questions/18093067/cant-delete-image-in-contenteditable-div-on-android/24591285#answer-24591285

解决的代码,参考回答
http://stackoverflow.com/questions/14560344/android-backspace-in-webview-baseinputconnection

org.apache.cordova.CordovaWebView

@Override
public boolean deleteSurroundingText(int beforeLength, int afterLength) {       
    // magic: in latest Android, deleteSurroundingText(1, 0) will be called for backspace
    if (beforeLength == 1 && afterLength == 0) {
        // backspace
        return super.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL))
            && super.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_DEL));
    }

    return super.deleteSurroundingText(beforeLength, afterLength);
}

 

phonegap 一个简单的离线存储小记事本

phonegap 官方的存储文档说明

http://docs.phonegap.com/en/2.9.0/cordova_storage_storage.md.html#Storage

这几天(注意发布时间),公司需要简单写个记事本工具,支持文本和图片(将图片以base64形式插入到可编辑的iframe页面中),需要支持离线,即用户可以将数据保存到本地,有登录的情况下,点同步可以将数据同步到服务器,同时将服务端的数据更新到下面。

考虑了几个数据存储的方式。

1.cookie 咔嚓不适合

2.locationStorage 支持的数据不大,约5m~15M左右,因为图片数据的关系,所以不够。当然,原来居然考虑过,保存文件路径,再单独写个函数将图片放到系统里,后面想想太麻烦了。。。哈哈。。。.但是只能当成一个比较大的数组来使用,查询检索相关不方便,排序什么的就还是按照原来数据的操作方式,节点数和容量都有相当限制,而且需要注意安全。不小心清除了就扑街了。

2.1 一个在线识别浏览器locationStorage容量脚本

https://arty.name/localstorage.html

3.webSql 适合本地使用,虽然这个东西的情况有点尴尬,一个是,基本上主流的新的浏览器都支持了它,问题是这个标准现在又是放弃的阶段。。哈哈。。不过已经有了,就拿来先用,同时支持模糊搜索,增删改查,所以也方便了很多。主要一个优势是,用这种方式开发,完全可以在浏览器端开发完,最后再直接复制到phonegap里进行打包。所以开发上相对来说方便很多。不过大文件的情况下,还是需要考虑和服务器端一样,文件放本地,然后只保存文件路径到数据里。

(附带一个封装好的sqlite.js,在文章底部)

 

Sqlite.js来源

http://www.oschina.net/code/snippet_202842_10588

//copyright by lanxyou  lanxyou[at]gmail.com
var lanxDB=function(dbname){
    var db=openDatabase(dbname,'1.0.0','',65536);
    return{
        //返回数据库名
        getDBName:function(){
            return dbname;
        },
        //初始化数据库,如果需要则创建表
        init:function(tableName,colums){
            this.switchTable(tableName);
            colums.length>0?this.createTable(colums):'';
            return this;
        },
        //创建表,colums:[name:字段名,type:字段类型]
        createTable:function(colums){
            var sql="CREATE TABLE IF NOT EXISTS " + this._table ;
            var t;
            if (colums instanceof Array && colums.length>0){
                t=[];
                for (var i in colums){
                    t.push(colums[i].name+' '+colums[i].type);
                }
                t=t.join(', ');
            }else if(typeof colums=="object"){
                t+=colums.name+' '+colums.type;
            }
            sql=sql+" ("+t+")";
            var that=this;
            db.transaction(function (t) { 
                t.executeSql(sql) ;
            })
        },
        //切换表
        switchTable:function(tableName){
            this._table=tableName;
            return this;
        },
        //插入数据并执行回调函数,支持批量插入
        //data为Array类型,每一组值均为Object类型,每一个Obejct的属性应为表的字段名,对应要保存的值
        insertData:function(data,callback){
            var that=this;
            var sql="INSERT INTO "+this._table;
            if (data instanceof Array && data.length>0){
                var cols=[],qs=[];
                for (var i in data[0]){
                    cols.push(i);
                    qs.push('?');
                }
                sql+=" ("+cols.join(',')+") Values ("+qs.join(',')+")";
            }else{
                return false;
            }
            var p=[],
                d=data,
                pLenth=0,
                r=[];
            for (var i=0,dLength=d.length;i<dLength;i++){
                var k=[];
                for (var j in d[i]){
                    k.push(d[i][j]);
                }
                p.push(k);
            }
            var queue=function(b,result){
                if (result){
                    r.push(result.insertId ||result.rowsAffected);
                }
                if (p.length>0){
                    db.transaction(function (t) { 
                        t.executeSql(sql,p.shift(),queue,that.onfail);
                    })
                }else{
                    if (callback){
                        callback.call(this,r);
                    }
                }
            }
            queue();
        },
        _where:'',
        //where语句,支持自写和以对象属性值对的形式
        where:function(where){
            if (typeof where==='object'){
                var j=this.toArray(where);
                this._where=j.join(' and ');
            }else if (typeof where==='string'){
                this._where=where;
            }
            return this;
        },
        //更新数据,data为属性值对形式
        updateData:function(data,callback){
            var that=this;
            var sql="Update "+this._table;
            data=this.toArray(data).join(',');
            sql+=" Set "+data+" where "+this._where;
            this.doQuery(sql,callback);
        },
        //根据条件保存数据,如果存在则更新,不存在则插入数据
        saveData:function(data,callback){
            var sql="Select * from "+this._table+" where "+this._where;
            var that=this;
            this.doQuery(sql,function(r){
                if (r.length>0){
                    that.updateData(data,callback);
                }else{
                    that.insertData([data],callback);
                }
            });
        },
        //获取数据
        getData:function(callback){
            var that=this;
            var sql="Select * from "+that._table;
            that._where.length>0?sql+=" where "+that._where:"";
            that.doQuery(sql,callback);
        },
        //查询,内部方法
        doQuery:function(sql,callback){
            var that=this;
            var a=[];
            var bb=function(b,result){
                if (result.rows.length){
                    for (var i=0;i<result.rows.length;i++){
                        a.push(result.rows.item(i));
                    }
                }else{
                    a.push(result.rowsAffected);
                }
                if (callback){
                    callback.call(that,a);
                }
            }
            db.transaction(function (t) { 
                t.executeSql(sql,[],bb,that.onfail) ;
            })
        },
        //根据条件删除数据
        deleteData:function(callback){
            var that=this;
            var sql="delete from "+that._table;
            that._where.length>0?sql+=" where "+that._where:'';
            that.doQuery(sql,callback);
        },
        //删除表
        dropTable:function(){
            var sql="DROP TABLE IF EXISTS "+this._table;
            this.doQuery(sql);
        },
        _error:'',
        onfail:function(t,e){
            this._error=e.message;
            console.log('----sqlite:'+e.message);
        },
        toArray:function(obj){
            var t=[];
            obj=obj || {};
            if (obj){
                for (var i in obj){
                    t.push(i+"='"+obj[i]+"'");
                }
            }
            return t;
        }
    }
}
 
/*
examples:
var db=new lanxDB('testDB');
db.init('channel_list',[{name:'id',type:'integer primary key autoincrement'},{name:'name',type:'text'},{name:'link',type:'text'},{name:'cover',type:'text'},{name:'updatetime',type:'integer'},{name:'orders',type:'integer'}]);
db.init('feed_list',[{name:'parentid',type:'integer'},{name:'feed',type:'text'}]);
db.switchTable('channel_list').insertData([{name:'aa',link:'ss',updatetime:new Date().getTime()},{name:'bb',link:'kk',updatetime:new Date().getTime()}]);
db.where({name:'aa'}).getData(function(result){
    console.log(result);//result为Array
});
db.where({name:'aa'}).deleteData(function(result){
    console.log(result[0]);//删除条数
});
db.where({name:'bb'}).saveData({link:'jj'},function(result){
    console.log(result);//影响条数
})
})
*/

注意函数里

 if (callback){
                    callback.call(that,a);
                }

这个地方有些问题,我是处理成

 if (callback){
                    callback(that,a);
                }

前端图片压缩,兼容体积.

https://github.com/think2011/LocalResizeIMG

一个bug,webview无法删除里面插入的图片。比较奇葩,而且delete也无法监听,所以需要从程序上内部进行处理,监听键盘,然后进行实时判断。这边简单搞,加了个删除图片的按钮,点击进行删除。后面有时间琢磨看看。

					$('#edit_note_btn_delete_img')
							.click(
									function() {
										if (window.edit_note_content.window.document
												.getSelection().focusNode
												.toString() == '[object HTMLBodyElement]') {
											var focusOffset = window.edit_note_content.window.document
													.getSelection().focusOffset;
											$(
													window.edit_note_content.window.document.body.childNodes)
													.eq(focusOffset - 1)
													.remove()
										} else {
											$('body', $edit_note_d).html()
										}
									});

 

流程图工具 draw.io

在线版本

https://www.draw.io/

不是很稳定,最好开vpn。无敌的天朝。什么都能封。

桌面版本,谷歌版

https://chrome.google.com/webstore/detail/pebppomjfocnoigkeepgbmcifnnlndla

安装后,在应用管理里可以将启动方式放到桌面上。

两年前找相关工具时,发现Pencil,又免费又很全(其实需要资助的…)

比较pencil 和 draw

pencil线条只有直线和曲线,没法进行大角度转弯,也不好控制,需要重新绘制,但是重新加线条,重新加的线条,在拖动的情况下又会偏移,需要重新调整比较麻烦。同时最大的问题是渲染。在画比较复杂的页面时,元素移动,拖动非常的卡,这个比较致命,如果无法优化好,只能拿来当原型编辑器。不过绘制各类型应用的原形图还是比较强大的。

draw.io线条控制相对灵活可以任意节点转弯。而且页面渲染,处理速度很快,多元素拖动也不会出现卡顿情况。缺点桌面版本不支持导出图片。但是支持导出svg 和 html,html文件需要请求到draw.io的一个js文件。所以。。。网络不好时,打开不方便。国内最好手动修改下,不然加载很卡。不过svg和html的优势是图像效果是矢量的,所以放大情况下,不会模糊。比图片方便查询细节。

<script type="text/javascript" src="https://www.draw.io/js/embed-static.min.js"></script>

 

php模拟app请求数据

Fiddler 监听手机请求地址详细教程

http://jingyan.baidu.com/article/925f8cb81e3a52c0dde05616.html

filddler抓包可以解决http 和 https的数据。Wireshark 设置相对繁琐。

需要注意:https情况下,数据预览是需要点击解密操作才可进行查看。

 

提供chrome一个插件”EditThisCookie” 可以直接将cookie设置到指定的域名中,方便一类,登录后,直接进行页面访问的操作,相对php模拟要方便些。

提供一个cookie串转json格式的脚本:

		$cookie = 'xxx=xxx;xxx=xx;';
		$cookies = preg_split ( '/\;\ /', $cookie );
		$json_cookie = array ();
		foreach ( $cookies as $_cookie ) {
			$_cookie = explode ( '=', $_cookie );
			$json_cookie [] = array (
					'domain' => 'xxxx.com',
					'expirationDate' => '1518752038',
					'hostOnly' => false,
					'httpOnly' => false,
					'path' => '/',
					'secure' => false,
					'session' => false,
					'storeId' => '0',
					'session' => 'false',
					'name' => $_cookie [0],
					'value' => $_cookie [1] 
			);
		}
		echo json_encode ( $json_cookie );
		exit ();