关于html5 通讯录功能

我们手机端的通讯录是用的技术html5 sqlite 加上jquery 实现单机缓存功能 头像是用base 64 进行渲染

/*************************************/
    /* Helman, heldes.com      */
    /* helman at heldes dot com    */
    /* sqlitedb.js           */
    /* SQLite Database Class For HTML5 */
    /*************************************/  

    function cDB(confs){
      var ret = {
        _db: null,
        _response: null,
        _error: null,
        check : function(tbl){
          if(!this._db) return false;
          var _sql = ‘‘, _sqlField=‘‘, _field=[];  

          for(var i=0;i<tbl.length;i++){
            _sql = "CREATE TABLE IF NOT EXISTS "+tbl[i].table+" (";
            _field = tbl[i].properties;
            _sqlField = ‘‘;  

            for (var j=0;j<_field.length;j++){
              _sqlField += ‘,`‘+_field[j].name+‘` ‘+_field[j].type;
            }  

            _sql += _sqlField.substr(1)+");";  

            this.query(_sql,null,null,null);
          }  

          return true;
        },
        getResult:function(){
          return this._response;
        },
        getError:function(){
          return this._error;
        },
        callback_error: function(tx,_er){
          var err = ‘‘;
          if(typeof(tx) == ‘object‘){
            for(var q in tx){
              err += q+‘ = "‘+tx[q]+‘"; ‘;
            }
          }else{
            err += tx+‘; ‘;
          }
          if(typeof(_er) == ‘object‘){
            for(var q in _er){
              err += q+‘ = "‘+_er[q]+‘"; ‘;
            }
          }else if(typeof(_er) == ‘undefined‘){
            err += _er+‘; ‘;
          }
          console.log(err);
          //if(callback) callback();
          return false;
        },
        query: function(sql,callback,params,er){
          if(!this._db) return false;
          var self = this;
          function _er(tx,__er){
            __er = jQuery.extend(__er,{sql:sql});
            if(er) er(tx,__er);
            else self.callback_error(tx,__er);
          };
          this._db.transaction(function(tx){
            tx.executeSql(sql,(params?params:[]),callback,_er);
          }, _er);
        },
        update:function(tbl,sets,clauses,callback){
          var __sql = ‘UPDATE ‘+tbl, _field = null, __set = ‘‘, __clause = ‘‘,__values=[];  

          for(var i=0;i<sets.length;i++){0
            _field = sets[i];
            for(var j=0;j<_field.length;j++){
              __set += ‘,`‘+_field[j].name+‘`=?‘;
              __values.push(_field[j].value);
            }
          }  

          for(var i=0;i<clauses.length;i++){
            __clause += ‘,`‘+clauses[i].name+‘`=?‘;
            __values.push(clauses[i].value);
          }
          __sql += ((__set!=‘‘)?‘ SET ‘+__set.substr(1):‘‘)+((__clause!=‘‘)?‘ WHERE ‘+__clause.substr(1):‘‘)+‘;‘;
          this.query(__sql,callback,__values);
          return true;
        },
        remove:function(tbl,clauses){
          var __sql = ‘DELETE FROM ‘+tbl, __clause = ‘‘;  

          for(var i=0;i<clauses.length;i++)
            __clause += ‘,`‘+clauses[i].name+‘`="‘+escape(clauses[i].value)+‘"‘;  

          __sql += ‘ WHERE ‘+((__clause!=‘‘)?__clause.substr(1):‘FALSE‘)+‘;‘;  

          this.query(__sql);
          return true;
        },
        multiInsert: function(tbl,rows,callback,er){
          if(!this._db) return false;
          var self = this;
          var __sql = ‘‘, _field = null, __field = ‘‘, __qs = [], __values = [];  

          this._db.transaction(function(tx){
            for(var i=0;i<rows.length;i++){
              __qs = [];
              __values = [];
              __field = ‘‘;
              _field = rows[i];  

              for(var j=0;j<_field.length;j++){
                __field += ‘,`‘+_field[j].name+‘`‘;
                __qs.push(‘?‘);
                __values.push(_field[j].value);
              }
              tx.executeSql(‘INSERT INTO ‘+tbl+‘ (‘+__field.substr(1)+‘) VALUES(‘+__qs.join(‘,‘)+‘);‘,__values,function(){return false;},(er ? er : self.callback_error));
            }
          }, self.callback_error, function(){
            if(callback) callback();
            return true;
          });
          return true;
        },
        insert:function(tbl,rows,callback){
          var __sql = ‘‘, _field = null, __field = ‘‘, __qs = [], __values = [], __debug = ‘‘;  

          for(var i=0;i<rows.length;i++){
            __qs = [];
            __field = ‘‘;
            _field = rows[i];  

            __debug += _field[0].name+‘ = ‘+_field[0].value+‘;‘;
            for(var j=0;j<_field.length;j++){
              __field += ‘,`‘+_field[j].name+‘`‘;
              __qs.push(‘?‘);
              __values.push(_field[j].value);
            }
            __sql += ‘INSERT INTO ‘+tbl+‘ (‘+__field.substr(1)+‘) VALUES(‘+__qs.join(‘,‘)+‘);‘;
          }
          this.query(__sql,callback,__values);
          return true;
        },
        insertReplace:function(tbl,rows,debug){
          var __sql = ‘‘, _field = null, __field = ‘‘, __qs = [], __values = [], __debug = ‘‘;  

          for(var i=0;i<rows.length;i++){
            __qs = [];
            __field = ‘‘;
            _field = rows[i];  

            __debug += _field[0].name+‘ = ‘+_field[0].value+‘;‘;
            for(var j=0;j<_field.length;j++){
              __field += ‘,`‘+_field[j].name+‘`‘;
              __qs.push(‘?‘);
              __values.push(_field[j].value);
            }
            __sql += ‘INSERT OR REPLACE INTO ‘+tbl+‘ (‘+__field.substr(1)+‘) VALUES(‘+__qs.join(‘,‘)+‘);‘;
          }
          this.query(__sql,null,__values);
          return true;
        },
        dropTable:function(tbl,callback){
          var __sql = ‘‘;
          if(tbl==null) return false;
          __sql = ‘DROP TABLE IF EXISTS ‘+tbl;
          this.query(__sql,callback);
          return true;
        }
      }
      return jQuery.extend(ret,confs);
    }

这个是sqlite 基本crud代码

输入框搜索 执行代码

<input class="search-input ub ub-f1" id="search_" oninput="OnInput()" placeholder=" "/>

初始化sqlite数据库持久化脚本

db : new cDB({_db:window.openDatabase("websiteDB", "", "website DB", 5*1000*1000*10)}),

创建通讯录表接口

dbTable : [
	        {
	        	table:‘contacat‘,properties:
	        	[
	        		//员工编号,主键
	            	{name:‘empSno‘, type: ‘INT PRIMARY KEY ASC‘},
	            	//姓名
	            	{name:‘username‘,type: ‘‘},
	            	//头像
	            	{name:‘imgBase64‘,type: ‘‘},
	            	//部门
					{name:‘deptName‘,type: ‘‘},
					//邮箱
					{name:‘email‘,type: ‘‘},
					//手机号
					{name:‘mp‘,type: ‘‘},
					//职位
					{name:‘positionName‘,type: ‘‘},
					//公司号码
					{name:‘companySno‘, type: ‘‘} ,
					{name:‘positionNameEn‘, type: ‘‘}  ,
					{name:‘deptNameEn‘,type: ‘‘}
	        	]
	        }
	    ],
modifyTable :
        [  
            {
                table:‘modifyTimeTable‘,properties:
                [  
                    {name:‘companySno‘, type: ‘‘},  
                    {name:‘modifyTime‘, type: ‘‘}
                ]
            }
        ],
        modifyDate:"",
        isGetService:true,
        loadDataFlag:true,
        reloadData:function(){
            //先清空列表
            $("#list").html("")
            //清空搜索框
            $("#search_").val("")
            //开始重新同步
            contact.isGetService=false;
            //设置第一次同步
            setstorage("isCacheContrat",null);
            //变量控制
            contact.isInit=null;
            //获取数据
            contact.initData();    
        },

每次点击同步操作 检查网络 如果是3G情况下提示 每次更新仅仅更新修改过的数据

reData:function(){
			if(!contact.isGetService){
				msgPrompt(getLang("contactWaiting"));
				return false;
			}
			uexDevice.getInfo(‘13‘);

			uexDevice.cbGetInfo = function(opCode, dataType, data)
			{
				//获取手机返回字符串,转换json
				var device = eval(‘(‘ + data + ‘)‘);
				var connectStatus=device.connectStatus;
					//判断当前网络情况
					if(connectStatus!=null&&connectStatus.length>0)
					{
						//网络不可用返回connectionstatus=1 wifi情况下返回0 connectionstatus1或者是conectionstatus=2是3g或者2g
						if(connectStatus==-1)
						{
							//网络不可能用提示操作
							msgPrompt(getLang("wlbukeyong"));
							return;
						}else if(connectStatus==0)
						{
							//wifi情况直接同步
							contact.reloadData()
						}else if(connectStatus==1 || connectStatus==2)
						{
							//如果对话框进行确定或者取消会触发回调函数
							uexWindow.cbConfirm = function ConfirmSuccess(opId, dataType, data)
							{
								//如果点击确定的话data返回0
				                if (data == 0)
				                {
				                	//同步数据
									contact.reloadData()
				                }
	           				};
	           				//如果是3g情况进行弹出confirm进行提示
	           				uexWindow.confirm(getLang("sureMsg"), getLang("tongbutishi"), [getLang("sure"), getLang("nosure")]);
						}
					}
			}

		},

查询sqlite 代码

//清空列表
			$("#list").html("");
			//渲染操作控制
			if(!contact.loadDataFlag)
			{
					return false;
			}
			contact.loadDataFlag=false;
			var query = "";
			//如果有搜索操作进行追加搜索条件
			if(filter!=null)
			{
				query = ‘SELECT * FROM contacat  where  (username like "%‘+filter
				           +‘%" COLLATE NOCASE or email like "%‘+filter+‘%" COLLATE NOCASE or mp like "%‘
						   +filter+‘%" COLLATE NOCASE  )  and companySno="‘+contact.user.companySno+‘"  order by email asc‘;
            }
			else
			{
				query = ‘SELECT * FROM contacat  where    companySno="‘+contact.user.companySno+‘"  order by email asc‘;
			}
			contact.db.query(query,function(tx,res)
			{
  				if(res.rows.length)
				{
					//获取数据循环操作
					for (var i = 0; i < res.rows.length; i++)
					{
						//根据下标进行获取数据
						var result = res.rows.item(i);
						var imgpt = "";
						//如果二进制图片不存在显示默认图片
						if (result.imgBase64 == null || result.imgBase64 == undefined|| result.imgBase64 == "") {
								imgpt = "css/myImg/person.png";
						}
						else
						{
							//显示二进制图片
							imgpt = "data:image/gif;base64," + result.imgBase64;
						}
							contact.pullAppend(result, imgpt);
					}
  				}
				contact.loadDataFlag  = true;

因为后台是sass 架构  所以A 的通讯录看不到B通讯录  防止切换账号产生脏数据

//根据companysno查询修改时间 防止切换用户重新加载数据
			var query = "select * from modifyTimeTable where companySno=‘"+contact.user.companySno+"‘";
			//查询操作 进行回调 因为是查询是异步操作所以需要把同步数据放到回调操作
			contact.db.query(query,function(tx,res)
			{
				//如果有数据操作把数据取出来
    			if(res.rows.length)
				{
					//把上次同步时间
					contact.modifyDate = res.rows.item(0).modifyTime;
				}else
				{
					//如果是null表示没有进行同步操作
					contact.modifyDate="";
				}
				//如果是第一次操作或者是修改为空的情况进行同步操作,否则直接从数据库渲染
				if (contact.isInit == null||contact.isInit==""||contact.modifyDate=="") {
					//进度条
					uexWindow.toast(1, 5,getLang("loadContacts"), -1);
					//延迟加载数据
					setTimeout(function(){
					contact.loadGetData();
					},200);
				}else{
					//渲染加载
					setTimeout(function(){
					contact.insertList(null);

					},1000);
				}

刚装机器第一次同步时候

//根据companysno查询修改时间 防止切换用户重新加载数据
			var query = "select * from modifyTimeTable where companySno=‘"+contact.user.companySno+"‘";
			//查询操作 进行回调 因为是查询是异步操作所以需要把同步数据放到回调操作
			contact.db.query(query,function(tx,res)
			{
				//如果有数据操作把数据取出来
    			if(res.rows.length)
				{
					//把上次同步时间
					contact.modifyDate = res.rows.item(0).modifyTime;
				}else
				{
					//如果是null表示没有进行同步操作
					contact.modifyDate="";
				}
				//如果是第一次操作或者是修改为空的情况进行同步操作,否则直接从数据库渲染
				if (contact.isInit == null||contact.isInit==""||contact.modifyDate=="") {
					//进度条
					uexWindow.toast(1, 5,getLang("loadContacts"), -1);
					//延迟加载数据
					setTimeout(function(){
					contact.loadGetData();
					},200);
				}else{
					//渲染加载
					setTimeout(function(){
					contact.insertList(null);

					},1000);
				}

递归请求获取每个用户的头像

//获取完毕进行操作
			if(index>length-1){
				setTimeout(function(){
					contact.isGetService=true;
					//查询最后一次操作事件
					var query = "select * from modifyTimeTable where companySno="+contact.user.companySno;
					contact.db.query(query,function(tx,res)
					{
						var data=
						[
						{
					 		‘name‘: ‘companySno‘,
					 		‘value‘: contact.user.companySno
					 	},
						{
					 		‘name‘: ‘modifyTime‘,
					 		‘value‘: new Date().getTime()
					 	}
						]
						//存在进行先删除后插入
    					if(res.rows.length)
						{
							contact.db.remove(‘modifyTimeTable‘, [{
					 					‘name‘: ‘companySno‘,
					 					‘value‘: contact.user.companySno
					 		}]);
						}
						var row = [];
						//存放数据
						row.push(data);
						//进行插入操作
					 	contact.db.insert(‘modifyTimeTable‘, row);
					 	//进行渲染列表
						contact.insertList(null);
						uexWindow.closeToast();
						setstorage("isCacheContrat",123);
					})

				contact.isInit=123;
			},3000)
				return false;
			}

			var 	empSno = pep[index].empSno
			var url = ApIp + "ManagerDemo/user/empPhotoAction.do?token=" + contact.token + "&empSno=" + empSno+"&index="+index;
			$.ajax({
				url: url,
				data:
						{
							"userName": contact.user.userName,
							"privilegeGroupId": contact.privilegeGroupId
						},

				type: ‘POST‘,
				dataType: "json",
				error: function(){
					contact.getImage(index,pep.length,pep)
				},
				success: function(data)
				{
					 //获取单个头像登录失效
					 if (data.msg == 205) {
					 	//登录失效进行跳转登录页面置空session
					 	uexWindow.toast(1, 5, getLang("loginFail"), 0);
					 	setInterval(function(){
					 		setstorage("sessionId", null);
					 		uexWindow.closeToast();
					 		openNewWin(‘login‘, ‘../login/login.html‘, ‘5‘);
					 		winClose()
					 	}, 2000)
					 }else
					 {
					 	uexWindow.toast(1, 5, sync1 + (parseInt(data.index) + 1) + sync2 + sync3 + pep.length + sync4, -1);
					 	empSno1 = pep[data.index].empSno

					 	var query = ‘SELECT * FROM contacat where empSno =‘ + pep[index].empSno;

					 	contact.db.query(query, function(tx, res){
					 		if (pep[data.index].status == "0") {
					 			contact.db.remove(‘contacat‘, [{
					 				‘name‘: ‘empSno‘,
					 				‘value‘: pep[data.index].empSno
					 			}]);
					 		}
					 		else {
					 			var contactData =
					 			[

					 				{‘name‘: ‘empSno‘,‘value‘: pep[data.index].empSno},
					 				{‘name‘: ‘positionName‘,‘value‘: pep[data.index].positionName},
					 				{‘name‘: ‘mp‘,‘value‘: pep[data.index].mp},
					 				{‘name‘: ‘email‘,‘value‘: pep[data.index].email},
					 				{‘name‘: ‘deptName‘,‘value‘: pep[data.index].deptName},
					 				{‘name‘: ‘username‘,‘value‘: pep[data.index].name},
					 				{‘name‘: ‘companySno‘,‘value‘: pep[data.index].companySno},
					 				{‘name‘: ‘imgBase64‘,‘value‘: data.data},
									{name:‘positionNameEn‘, value: pep[data.index].positionNameEn}  ,
									{name:‘deptNameEn‘,value: pep[data.index].deptNameEn}
					 			]
					 			if (res.rows.length) {
					 				contact.db.remove(‘contacat‘, [{
					 					‘name‘: ‘empSno‘,
					 					‘value‘: pep[data.index].empSno
					 				}]);
					 			}

					 			var row = [];
					 			row.push(contactData);
					 			contact.db.insert(‘contacat‘, row);
					 		}

					 		//下标
					 		index = parseInt(data.index) + 1;
					 		//获取下一个用户的头像
					 		contact.getImage(index, pep.length, pep)

					 	});
					 }
				},error:function(XMLHttpRequest, textStatus, errorThrown){
							index=index+1;
							contact.getImage(index,pep.length,pep)
				}
			}); 
时间: 2024-10-22 02:22:14

关于html5 通讯录功能的相关文章

一个利用HTML5 localStorage功能的todo应用(angularJs+Bootstrap)

今天在网上看到一个简单的todo应用,使用angularJs做前端数据绑定,利用localStorage来存储数据,觉得挺有意思的. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="todoApp"> <head> <me

HTML5新功能之八 《web works多线程》

一.什么是历史管理 HTML5新功能之七 <历史管理> HTML5新功能之八 <web works多线程>,布布扣,bubuko.com

iOS开发——高级技术&amp;通讯录功能的实现

通讯录功能的实现 iOS 提供了对通讯录操作的组建,其中一个是直接操作通讯录,另一个是调用通讯录的 UI 组建.实现方法如下: 添加AddressBook.framework到工程中. 代码实现: 1 -(IBAction)onClickbutton:(id)sender 2 { 3 NSMutableArray* personArray = [[[NSMutableArray alloc] init] autorelease]; 4 ABAddressBookRef addressBook =

利用HTML5定位功能,实现在百度地图上定位

利用HTML5定位功能,实现在百度地图上定位 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>HTML5定位</title>     <script type="text/javascript" src="http://lib.sinaapp

利用HTML5定位功能,实现在百度地图上定位(转)

原文:利用HTML5定位功能,实现在百度地图上定位 代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无论使用WIFI还是移动4G联网, 定位精度都是蛮高的,误差在几十米内) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

私人通讯录功能详细实现

私人通讯录 一.根据segue对象实现控制器的跳转 //根据segue对象的标示去storyboard找对应的的线 [selfperformSegueWithIdentifier:@"login"sender:nil]; //跳转前控制器之间传值(顺传) - (void)prepareForSegue:(UIStoryboardSegue*)segue sender:(id)sender { SUNContactsController *contacts = segue.destina

HTML5新增功能

1.摆脱对平台的依赖HTML5可以摆脱对平台的依赖,用户打开浏览器,直接就可以访问应用,而不需要经过各种Store的审核.2.实时更新实时更新,通常平台的审核都需要七个工作日左右的时间,如果发布之后发现问题怎么办?Web方式就不存在这种问题.3.离线使用用户可以离线使用,更新下载量及少,可以全部更新,也可以选择替换部分文件.4.代码更安全安全使用HTML5,代码更安全安全.众所周知Web应用有一个很大的问题就是代码安全的问题,但现在HTML5可以将Web代码全部加密,本地应用解密后再运行,大大的

Android webView 缓存 Cache + HTML5离线功能 解决

时间 2013-06-11 21:06:14 CSDN博客 原文 http://blog.csdn.net/moubenmao/article/details/9076917 主题 Android HTML5 WebView的缓存可以分为页面缓存和数据缓存. 页面缓存是指加载一个网页时的html.JS.CSS等页面或者资源数据.这些缓存资源是由于浏览器的行为而产生,开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据. 他们的索引存放在/data/data/package

分享8款最新HTML5/CSS3功能插件及源码下载

1.HTML5/CSS3鬼脸表情下拉菜单 超级可爱 这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错. 在线演示 源码下载 2.CSS3带Tooltip的按钮 按钮绿色清新 该按钮带有Tooltip功能,鼠标滑过按钮时即可显示Tooltip,另外按钮还有一个漂亮的图标.这款CSS3按钮整体是绿色清新风格,非常不错. 在线演示 源码下载 3.HTML5/CSS3制作Safari Logo 指针动画很炫 这款Logo动画,它