H5知识点

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>

方法:

对象:

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可获取文件系统管理对象。

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窗口是否由于内核崩溃自动恢复

方法:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,295评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,928评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,682评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,209评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,237评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,965评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,586评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,487评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,016评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,136评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,271评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,948评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,619评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,139评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,252评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,598评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,267评论 2 358

推荐阅读更多精彩内容

  • 1、打开HBuilderX App版 新建项目 配置模拟器端口 device Device模块管理设备信息,用于获...
    一只小丫丫阅读 3,200评论 0 2
  • 1. 如何理解HTML语义化 个人理解就是对应的标签做对应的事,头部用header,底部用footer,中间用ma...
    池鱼_故渊阅读 1,234评论 0 14
  • camera Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象...
    吃肉肉不吃肉肉阅读 615评论 0 0
  • Device 属性: imei: 设备的国际移动设备身份码 imsi: 设备的国际移动用户识别码 model: 设...
    耶啵_阅读 302评论 0 0
  • 音频,早起汉语第四册,第五册,第六册。精听Dr Seuss'ABC。泛听2b.3a.3b。 FT.1.make l...
    LuLu_0df7阅读 121评论 0 0