H5+

作者: 南崽 | 来源:发表于2020-04-25 16:00 被阅读0次

    参考文档请点击

    Device

    <script type="text/javascript">
        document.addEventListener('plusready', function(){
        //console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。")
           uuid.innerHTML = plus.device.uuid;
          osName.innerHTML = plus.os.name;
          vendor.innerHTML = plus.device.vendor;
          net.innerHTML = plus.networkinfo.getCurrentType()===3?'wifi':'其他';
          // 0 - 6  3是wifi 4是2g 5是3g 6是4g
      });
    </script>
    <h3>信息获取</h3>
    <p>uuid:<span id="uuid"></span></p>
    <p>os:<span id="osName"></span></p>
    <p>厂商:<span id="vendor"></span></p>
    <p>网络:<span id="net"></span></p>
    

    属性:

    • imei: 设备的国际移动设备身份码
    • imsi: 设备的国际移动用户识别码
    • model: 设备的型号
    • vendor: 设备的生产厂商
    • uuid: 设备的唯一标识

    Key

    plus.key.addEventListener("backbutton",()=>{
        plus.nativeUI
    })
    

    方法:

    io

    • IO模块管理本地文件系统,用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。

    camera

    • Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。
    function photo(){
      plus.camera.getCamera().captureImage(
        p=>{
          plus.gallery.save(p,s=>console.log("成功",s),se=>console.log("失败",se));
          plus.io.resolveLocalFileSystemURL(p,entry=>{
            var pa = document.createElement("p");
            pa.innerHTML = `<img width="160" src="${entry.toLocalURL()}"/>`
            picbox.appendChild(pa);
          });
        },
        e=>{},
        {}
      )
    }
    
    <p><button onclick="photo()">拍照</button></p>
    

    方法:

    对象:

    nativeUI

    function showAlert(){
        plus.nativeUI.alert("你好程序员",()=>console.log("用户点击"),"原生弹出","确定");
        // 弹出内容,回调函数,标题,确定按钮文字
    }
    function showConfirm(){
        plus.nativeUI.confirm("你准备好了吗",e=>console.log("你选择的是:"+e.index));
        // 确定是0 取消是1
     }
     function showWaiting(){
        var w = plus.nativeUI.showWaiting("客官稍等...");
        setTimeout(()=>plus.nativeUI.closeWaiting(),2500);
     }
     function pickDate(){
        var styles = {};
        styles.title = "请选择日期:"; // 显示标题
        styles.date = new Date(), styles.date.setFullYear(2018,8,8);// 默认显示的日期
        styles.minDate = new Date(), styles.minDate.setFullYear(2010,0,1);// 设置最小可选日期为“2010-01-01”
        styles.maxDate = new Date(), styles.maxDate.setFullYear(2020,11,31);// 设置最大可选日期为“2020-12-31”
                
        plus.nativeUI.pickDate(function(e){
            var d = e.date;
            console.log("选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate());
        },function(e){
            console.log("未选择的日期"+e.message);
        },styles);
     }
    
    <h3>nativeUI 原生UI</h3>
    <p>
      <button onclick="plus.nativeUI.toast('积分+5')">Toast提示</button><br><br>
      <button onclick="showAlert()">Alert 警告</button><br><br>
      <button onclick="showConfirm()">Confirm 确认</button><br><br>
      <button onclick="showWaiting()">加载提示</button><br><br>
      <button onclick="pickDate()">选择日期</button><br><br>
    </p>
    

    方法:

    share

    function share(){
      window.plusShare({
        title:"神级网站",
        content:"解决程序员99%烦恼",
        // type:'text',
        // pictures:["http://www.xxx.com/source/images/640.jpg"],
        href:"http://www.baidu.com",
        thumbs:["http://www.xxx.com/source/images/640.jpg"] 
        },res=>{plus.nativeUI.toast("分享成功")})
    }
    
    <h3>分享</h3>
    <p><button onclick="share()">系统分享</button></p>
    

    方法:

    uploader

    function upload(){
      if(!file){plus.nativeUI.alert("你还没有选择文件");return;}
      var url = "http://www.xxx.com/ajax/file.php";
      var task = plus.uploader.createUpload(
        url,
        {method:'POST'},
        (t,status)=>{
          if(status==200){
            console.log("上传成功");
            var picurl = "http://www.xxx.com"+JSON.parse(t.responseText).pic;
            var p = document.createElement("p");
             p.innerHTML = `<img width="160" src="${picurl}"/>`;
            picbox.appendChild(p);
          }else{
            console.log("上传失败"+status);
          }
        }
       )
      task.addFile(file,{key:"file"});
      task.start();
      }
    
    <h3>拍照并上传</h3>
      <p>
        <button onclick="appendByCamera()">拍照</button> | 
        <button onclick="appendGallery()">相册选择</button>
      </p>
      <p id="myfile"></p>
      <p><button onclick="upload()">上传</button></p>
      <div id="picbox">
        <!-- myfile存放文件名  picbox存放上传好的图片 -->
      </div>
    

    方法:

    对象:

    webview

    • Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。
      var _openw = null;
      function openAbout(){
        if(_openw){return;} // 防止快速点击
        _openw = plus.webview.create('about.html','about',{
          backButtonAutoControl:'close',
          titleNView:{
            autoBackButton:true,
            backgroundColor:"#f30",
            titleText:'关于我们',
            titleColor:"#fff",
            buttons:[{
              type:'share',
              onclick:()=>alert("分享被点击了")
            }]
          }
        })
        _openw.addEventListener('close',()=>_openw=null);
        _openw.show('slide-in-right');
      }
      function openPage(url,title,bgcolor){
        plus.navigator.setStatusBarBackground(bgcolor);
        if(_openw){return;}//防止快速点击;
        _openw = plus.webview.create(url,title,{
          backButtonAutoControl:'close',//当返回的时候关闭webview(当前的窗口)
          // 设置标题
          titleNView:{
            autoBackButton:true,//默认返回按钮
            backgroundColor:bgcolor, //标题栏颜色,
            titleText:title,//标题栏文本,
            titleColor:"#fff",
            progress:{color:"#fff"},
            // 设置进度条的颜色为白色
            buttons:[{
              type:'share',
              onclick:()=>alert("分享被点击了")
             }]             
          }
        })  
        _openw.addEventListener('close',()=>{_openw=null;plus.navigator.setStatusBarBackground("#f30");});
        //当关闭时候清空当前webView
        _openw.show('slide-in-right');
      }
    
      <h3>页面切换</h3>
        <p>
         <a href="about.html">a标签切换到about</a>
          <button onclick="openAbout()">webview切换</button><br><br>
          <button onclick="openPage('http://xw.qq.com','新闻','#4c7eff')">新闻</button><br><br>
          <button onclick="openPage('http://m.mi.com','购买','#f30')">小米</button>
        </p>
    

    属性:

    • isRecovery: 当前Webview窗口是否由于内核崩溃自动恢复

    方法:

    相关文章

      网友评论

          本文标题:H5+

          本文链接:https://www.haomeiwen.com/subject/clkkwhtx.html