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();

 

posted @ 2018-12-27 17:08  littlewxp  阅读(622)  评论(0编辑  收藏  举报