mui框架(三)
1.Ajax-get请求
// get测试请求地址 http://test.dongyixueyuan.com/link_app/get?state=index&num=0 mui.get('接口地址',{ //请求接口地址 state:'index' // 参数 键 :值 num:'0' },function(data){ // data为服务器端返回数据 //获得服务器响应 ... console.log(data); },'json' );
2.Ajax-post请求
// post测试请求地址 http://test.dongyixueyuan.com/link_app/post mui.post('接口地址',{ //请求接口地址 state:'index', // 参数 键 :值 num:'0' }, function(data){ //data为服务器端返回数据 //自己的逻辑 },'json' );
3.照相机
var cmr = plus.camera.getCamera(); cmr.captureImage( function ( p ) { //成功 plus.io.resolveLocalFileSystemURL( p, function ( entry ) { var img_name = entry.name;//获得图片名称 var img_path = entry.toLocalURL();//获得图片路径 }, function ( e ) { console.log( "读取拍照文件错误:"+e.message ); } ); }, function ( e ) { console.log( "失败:"+e.message ); }, {filename:'_doc/camera/',index:1} ); // “_doc/camera/“ 为保存文件名
4.访问相册
plus.gallery.pick( function(path){ img.src = path;//获得图片路径 }, function ( e ) { console.log( "取消选择图片" ); }, {filter:"image"} );
5.蜂鸣提示音
switch ( plus.os.name ) { //判断设备类型 case "iOS": if ( plus.device.model.indexOf("iPhone") >= 0 ) { //判断是否为iPhone plus.device.beep(); console.log = "设备蜂鸣中..."; } else { console.log = "此设备不支持蜂鸣"; } break; default: plus.device.beep(); console.log = "设备蜂鸣中..."; break; }
6.手机震动
switch ( plus.os.name ) { //判断设备类型 case "iOS": if ( plus.device.model.indexOf("iPhone") >= 0 ) { //判断是否为iPhone plus.device.vibrate(); console.log("设备振动中..."); } else { console.log("此设备不支持振动"); } break; default: plus.device.vibrate(); console.log("设备振动中..."); break; }
7.弹出菜单
弹出菜单的原理主要是通过锚点进行的,如果需要多个弹出菜单,可以在a标签内设置锚点,对应相应的div的id即可
<a href="#popover">打开弹出菜单</a> // href 定义锚点 <div id="popover" class="mui-popover"> //id 对应锚点 <ul class="mui-table-view"> <li class="mui-table-view-cell"><a href="#">Item1</a></li> <li class="mui-table-view-cell"><a href="#">Item2</a></li> <li class="mui-table-view-cell"><a href="#">Item3</a></li> <li class="mui-table-view-cell"><a href="#">Item4</a></li> <li class="mui-table-view-cell"><a href="#">Item5</a></li> </ul> </div>
8.设备信息
plus.device.model //设备型号 plus.device.vendor //设备的生产厂商 plus.device.imei // IMEI 设备的国际移动设备身份码 plus.device.uuid // UUID 设备的唯一标识 // IMSI 设备的国际移动用户识别码 var str = ''; for ( i=0; i<plus.device.imsi.length; i++ ) { str += plus.device.imsi[i]; } plus.screen.resolutionWidth*plus.screen.scale + " x " + plus.screen.resolutionHeight*plus.screen.scale ; //屏幕分辨率 plus.screen.dpiX + " x " + plus.screen.dpiY; //DPI每英寸像素数
9.手机信息
plus.os.name //名称 plus.os.version //版本 plus.os.language //语言 plus.os.vendor //厂商 //网络类型 var types = {}; types[plus.networkinfo.CONNECTION_UNKNOW] = "未知"; types[plus.networkinfo.CONNECTION_NONE] = "未连接网络"; types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络"; types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络"; types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络"; types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络"; types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络"; var network = types[plus.networkinfo.getCurrentType()];
10.发送短信
<a href=“sms:10086">发送短信
var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS); msg.to = ['13800138000', '13800138001']; msg.body = '东翌学院http://www.dongyixueyuan.com'; plus.messaging.sendMessage( msg );
11.拨打电话
<a href="tel:10086">拨打电话</a>
12.发送邮件
<a href="mailto:dongyixueyuan@qq.com">发送邮件到东翌学院</a>
13.本地存储
//设置 plus.storage.setItem('键','值'); -> plus.storage.setItem('name','dongyixueyuan'); //查询 plus.storage.getItem('键'); -> var name = plus.storage.getItem('name'); //删除 plus.storage.removeItem('键'); -> plus.storage.removeItem('name'); //全部清除 plus.storage.clear(); //HTML5自带 - 设置 localStorage.setItem('键','值'); -> localStorage.setItem('name','dongyixueyuan'); //HTML5自带 - 查询 localStorage.getItem('键'); -> var name = localStorage.setItem('name'); //HTML5自带 - 删除 localStorage.removeItem('键'); -> localStorage.removeItem('name');
14.图片上传
//初始上传地址 var server="http://tongle.dongyixueyuan.com/upload_file.php"; // 学员测试使用 var files=[]; //图片存放的数组 可以上传一个,或者多个图片 //上传图片 function upload_img(p){ //又初始化了一下文件数组 为了支持我的单个上传,如果你要一次上传多个,就不要在写这一行了 //注意 files=[]; var n=p.substr(p.lastIndexOf('/')+1); files.push({name:"uploadkey",path:p}); //开始上传 start_upload(); } //开始上传 function start_upload(){ if(files.length<=0){ plus.nativeUI.alert("没有添加上传文件!"); return; } //原生的转圈等待框 var wt=plus.nativeUI.showWaiting(); var task=plus.uploader.createUpload(server, {method:"POST"}, function(t,status){ //上传完成 alert(status); if(status==200){ //资源 var responseText = t.responseText; //转换成json var json = eval('(' + responseText + ')'); //上传文件的信息 var files = json.files; //上传成功以后的保存路径 var img_url = files.uploadkey.url; //ajax 写入数据库 //关闭转圈等待框 wt.close(); }else{ console.log("上传失败:"+status); //关闭原生的转圈等待框 wt.close(); } }); task.addData("client",""); task.addData("uid",getUid()); for(var i=0;i<files.length;i++){ var f=files[i]; task.addFile(f.path,{key:f.name}); } task.start(); } // 产生一个随机数 function getUid(){ return Math.floor(Math.random()*100000000+10000000).toString(); }
15.地理位置
//直接获取地理位置 plus.geolocation.getCurrentPosition( geoInfo, function ( e ) { alert( "获取位置信息失败:"+e.message ); } ); //监听地理位置 var watchId; //开关 函数外层定义 if ( watchId ) { return; } watchId = plus.geolocation.watchPosition( function ( p ) { alert( "监听位置变化信息:" ); geoInfo( p ); }, function ( e ) { alert( "监听位置变化信息失败:"+e.message ); }); //停止监听地理位置 if ( watchId ) { alert( "停止监听位置变化信息" ); plus.geolocation.clearWatch( watchId ); watchId = null; } //获得具体地理位置 //获取设备位置信息 function geoInfo(position){ var timeflag = position.timestamp;//获取到地理位置信息的时间戳;一个毫秒数; var codns = position.coords;//获取地理坐标信息; var lat = codns.latitude;//获取到当前位置的纬度; var longt = codns.longitude;//获取到当前位置的经度 var alt = codns.altitude;//获取到当前位置的海拔信息; var accu = codns.accuracy;//地理坐标信息精确度信息; var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度; var head = codns.heading;//获取设备的移动方向; var sped = codns.speed;//获取设备的移动速度; //百度地图申请地址 // http://lbsyun.baidu.com/apiconsole/key // http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&location=纬度(Latitude),经度(Longitude) // http://api.map.baidu.com/geocoder/v2/?output=json&ak=BFd9490df8a776482552006c538d6b27&location=40.065639,116.419413 //详细地址 //http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&pois=1&location=40.065639,116.419413 var baidu_map = "http://api.map.baidu.com/geocoder/v2/?output=json&ak=BFd9490df8a776482552006c538d6b27&location="+lat+','+longt; mui.get(baidu_map,{ //请求的地址 }, function(data){ //服务器返回响应,根据响应结果,分析是否登录成功; ... var result = data['result'].addressComponent; // 国家 var country = result['country']; //城市 var city = result['city'];; //地址 var address = result['province'] + result['district'] + result['street']; //data 有很多信息,大家如果需要可以for in出来看下 },'json' );
}
16.设置IOS状态栏
mui.plusReady(function(){ if(mui.os.ios){ //UIStatusBarStyleDefault //字体深色 //UIStatusBarStyleBlackOpaque //字体浅色 plus.navigator.setStatusBarStyle('UIStatusBarStyleBlackOpaque'); plus.navigator.setStatusBarBackground("#007aff"); //背景颜色 }
)};
17.手机通讯录
mui.plusReady(function(){ //访问手机通讯录 plus.contacts.ADDRESSBOOK_PHONE //访问SIM卡通讯录 plus.contacts.ADDRESSBOOK_SIM plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE,function(addressbook){ addressbook.find(null,function (contacts){ for(var a in contacts){ //这里是安卓手机端的获取方式 ios的不太一样,如果需要这块代码可以联系老师获得 var user = contacts[a].displayName; //联系人 var phone = contacts[a].phoneNumbers[0].value; //手机号码 } },function ( e ) {alert( "Find contact error: " +e.message );},{multi:true}); });
)};
18.启动页设置
设置手动关闭启动页:
manifest.json -> plus -> autoclose 改为 false
关闭启动页:
plus.navigator.closeSplashscreen();