H5知識點(diǎn)

camera

  • Camera模塊管理設(shè)備的攝像頭余赢,可用于拍照、攝像操作邓夕,通過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>

方法:

對象:

  • Camera: 攝像頭對象
  • CameraOptions: JSON對象,調(diào)用攝像頭的參數(shù)
  • PopPosition: JSON對象橄抹,彈出拍照或攝像界面指示位置

Device

<script type="text/javascript">
    document.addEventListener('plusready', function(){
    //console.log("所有plus api都應(yīng)該在此事件發(fā)生后調(diào)用靴迫,否則會出現(xiàn)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>網(wǎng)絡(luò):<span id="net"></span></p>

屬性:

  • imei: 設(shè)備的國際移動設(shè)備身份碼
  • imsi: 設(shè)備的國際移動用戶識別碼
  • model: 設(shè)備的型號
  • vendor: 設(shè)備的生產(chǎn)廠商
  • uuid: 設(shè)備的唯一標(biāo)識

Key

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

方法:

io

  • IO模塊管理本地文件系統(tǒng)楼誓,用于對文件系統(tǒng)的目錄瀏覽玉锌、文件的讀取、文件的寫入等操作疟羹。通過plus.io可獲取文件系統(tǒng)管理對象主守。

nativeUI

function showAlert(){
    plus.nativeUI.alert("你好程序員",()=>console.log("用戶點(diǎn)擊"),"原生彈出","確定");
    // 彈出內(nèi)容,回調(diào)函數(shù),標(biāo)題,確定按鈕文字
}
function showConfirm(){
    plus.nativeUI.confirm("你準(zhǔn)備好了嗎",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 = "請選擇日期:"; // 顯示標(biāo)題
    styles.date = new Date(), styles.date.setFullYear(2018,8,8);// 默認(rèn)顯示的日期
    styles.minDate = new Date(), styles.minDate.setFullYear(2010,0,1);// 設(shè)置最小可選日期為“2010-01-01”
    styles.maxDate = new Date(), styles.maxDate.setFullYear(2020,11,31);// 設(shè)置最大可選日期為“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 確認(rèn)</button><br><br>
  <button onclick="showWaiting()">加載提示</button><br><br>
  <button onclick="pickDate()">選擇日期</button><br><br>
</p>

方法:

  • actionSheet: 彈出系統(tǒng)選擇按鈕框
  • alert: 彈出系統(tǒng)提示對話框
  • confirm: 彈出系統(tǒng)確認(rèn)對話框
  • closeWaiting: 關(guān)閉系統(tǒng)等待對話框
  • closeToast: 關(guān)閉自動消失的提示消息
  • previewImage: 預(yù)覽圖片
  • showWaiting: 顯示系統(tǒng)等待對話框
  • pickDate: 彈出系統(tǒng)日期選擇對話框
  • pickTime: 彈出系統(tǒng)時間選擇對話框
  • prompt: 彈出系統(tǒng)輸入對話框
  • toast: 顯示自動消失的提示消息
  • setUIStyle: 設(shè)置原生界面樣式(暗黑模式)

share

function share(){
  window.plusShare({
    title:"神級網(wǎng)站",
    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()">系統(tǒng)分享</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>

方法:

對象:

  • Upload: Upload對象管理一個上傳任務(wù)
  • UploadEvent: 上傳任務(wù)事件類型
  • UploadState: 上傳任務(wù)的狀態(tài),Number類型
  • UploadOptions: JSON對象榄融,創(chuàng)建上傳任務(wù)的參數(shù)
  • UploadFileOptions: JSON對象参淫,添加上傳文件的參數(shù)

webview

  • Webview模塊管理應(yīng)用窗口界面,實(shí)現(xiàn)多窗口的邏輯控制管理操作剃袍。通過plus.webview可獲取應(yīng)用界面管理對象黄刚。
  var _openw = null;
  function openAbout(){
    if(_openw){return;} // 防止快速點(diǎn)擊
    _openw = plus.webview.create('about.html','about',{
      backButtonAutoControl:'close',
      titleNView:{
        autoBackButton:true,
        backgroundColor:"#f30",
        titleText:'關(guān)于我們',
        titleColor:"#fff",
        buttons:[{
          type:'share',
          onclick:()=>alert("分享被點(diǎn)擊了")
        }]
      }
    })
    _openw.addEventListener('close',()=>_openw=null);
    _openw.show('slide-in-right');
  }
  function openPage(url,title,bgcolor){
    plus.navigator.setStatusBarBackground(bgcolor);
    if(_openw){return;}//防止快速點(diǎn)擊;
    _openw = plus.webview.create(url,title,{
      backButtonAutoControl:'close',//當(dāng)返回的時候關(guān)閉webview(當(dāng)前的窗口)
      // 設(shè)置標(biāo)題
      titleNView:{
        autoBackButton:true,//默認(rèn)返回按鈕
        backgroundColor:bgcolor, //標(biāo)題欄顏色,
        titleText:title,//標(biāo)題欄文本,
        titleColor:"#fff",
        progress:{color:"#fff"},
        // 設(shè)置進(jìn)度條的顏色為白色
        buttons:[{
          type:'share',
          onclick:()=>alert("分享被點(diǎn)擊了")
         }]             
      }
    })  
    _openw.addEventListener('close',()=>{_openw=null;plus.navigator.setStatusBarBackground("#f30");});
    //當(dāng)關(guān)閉時候清空當(dāng)前webView
    _openw.show('slide-in-right');
  }

  <h3>頁面切換</h3>
    <p>
     <a href="about.html">a標(biāo)簽切換到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: 當(dāng)前Webview窗口是否由于內(nèi)核崩潰自動恢復(fù)

方法:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末民效,一起剝皮案震驚了整個濱河市憔维,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌畏邢,老刑警劉巖业扒,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異舒萎,居然都是意外死亡程储,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門臂寝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來章鲤,“玉大人,你說我怎么就攤上這事咆贬“芑玻” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵掏缎,是天一觀的道長皱蹦。 經(jīng)常有香客問我煤杀,道長,這世上最難降的妖魔是什么沪哺? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任沈自,我火速辦了婚禮,結(jié)果婚禮上辜妓,老公的妹妹穿的比我還像新娘枯途。我一直安慰自己,他們只是感情好嫌拣,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布柔袁。 她就那樣靜靜地躺著呆躲,像睡著了一般异逐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上插掂,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天灰瞻,我揣著相機(jī)與錄音,去河邊找鬼辅甥。 笑死酝润,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的璃弄。 我是一名探鬼主播要销,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼夏块!你這毒婦竟也來了疏咐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤脐供,失蹤者是張志新(化名)和其女友劉穎浑塞,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體政己,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡酌壕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了歇由。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卵牍。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖沦泌,靈堂內(nèi)的尸體忽然破棺而出糊昙,到底是詐尸還是另有隱情,我是刑警寧澤赦肃,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布溅蛉,位于F島的核電站公浪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏船侧。R本人自食惡果不足惜欠气,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望镜撩。 院中可真熱鬧预柒,春花似錦、人聲如沸袁梗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽遮怜。三九已至淋袖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锯梁,已是汗流浹背即碗。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留陌凳,地道東北人剥懒。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像合敦,于是被迫代替她去往敵國和親初橘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 1充岛、打開HBuilderX App版 新建項(xiàng)目 配置模擬器端口 device Device模塊管理設(shè)備信息保檐,用于獲...
    一只小丫丫閱讀 3,196評論 0 2
  • 1. 如何理解HTML語義化 個人理解就是對應(yīng)的標(biāo)簽做對應(yīng)的事,頭部用header裸准,底部用footer,中間用ma...
    池魚_故淵閱讀 1,229評論 0 14
  • camera Camera模塊管理設(shè)備的攝像頭展东,可用于拍照、攝像操作炒俱,通過plus.camera獲取攝像頭管理對象...
    吃肉肉不吃肉肉閱讀 608評論 0 0
  • Device 屬性: imei: 設(shè)備的國際移動設(shè)備身份碼 imsi: 設(shè)備的國際移動用戶識別碼 model: 設(shè)...
    耶啵_閱讀 298評論 0 0
  • 音頻盐肃,早起漢語第四冊,第五冊权悟,第六冊砸王。精聽Dr Seuss'ABC。泛聽2b.3a.3b峦阁。 FT.1.make l...
    LuLu_0df7閱讀 118評論 0 0