使用什麼進行app開發

HTML5+plus, Hbuilder

HTML5+plus介紹

HTML5 Plus移動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App能夠經過擴展的JS API任意調用手機的原生能力，實現與原生App一樣強大的功能和性能。

 

Hbuilder介紹

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE. HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder自己主體是由Java編寫。

快，是HBuilder的最大優點，經過完整的語法提示和代碼輸入法、代碼塊等，大幅提高HTML、js、css的開發效率。

Hbuilder中自然的集成了HTML5 Plus

 

建立一個移動app項目

選擇mui項目, 這樣就會自動導入mui的css和js

 

目錄結構以下

 

經常使用方法

使用websocket

基於HTML語言, 那他天生就支持websocket

# 建立鏈接
var ws_server = new WebSocket("ws://192.168.1.1:9527");

有兩種方式來使用建立的鏈接, 第一種方式就是像以前同樣, 直接使用ws, 代用各類方法

可是在HTML5 plus中還提供了一種方法

官網連接 

http://dev.dcloud.net.cn/mui/event/#customevent

由於app可能有多個頁面, 不肯定某個頁面要使用websocket發送數據, 因此, 可使用mui.fire觸發一個自定義的事件, 這個事件就能夠用做發送websocket數據

如今假設在index頁面建立了websocket鏈接對象ws

document.addEventListener("send_music", function(data) {　　# 接受一個參數, 這個參數中有觸發事件時攜帶的數據 //  console.log(JSON.stringify(data.detail))    // 拿到的是某個頁面提交事件時攜帶的數據
    ws_server.send(JSON.stringify(data.detail));
  })

在main頁面要使用ws發送數據

# 根據頁面的id獲取頁面
var index = plus.webview.getWebviewById("HBuilder");　　# 默認的index頁面id默認爲Hbuilder
                    mui.fire(index, "send_music", {　　　　# 觸發index頁面send_music事件, 並傳遞參數 "to_user": toy._id,
                        "msg": window.get_music + content.data.music_path,
                        "from_user": JSON.parse(window.localStorage.getItem("user"))._id
                    })

這樣在index就能幫助main發送websocket數據

 

頁面的初始化

在app開發中，若要使用HTML5+擴展api，必須等plusready事件發生後才能正常使用，mui將該事件封裝成了mui.plusReady()方法，涉及到HTML5+的api，建議都寫在mui.plusReady方法中。

mui.plusReady(function(){
     console.log("當前頁面URL："+plus.webview.currentWebview().getURL());
});

mui插件初始化

mui.init()    mui插件初始化

 

DOM初始化就緒

mui.ready()    當DOM準備就緒時，指定一個函數來執行。

 

打開新的頁面

app中會有多個頁面, 如何打開一個新的頁面

官方:

作web app，一個沒法避開的問題就是轉場動畫；web是基於連接構建的，從一個頁面點擊連接跳轉到另外一個頁面，若是經過有刷新的打開方式，用戶要面對一個空白的頁面等待；若是經過無刷新的方式，用Javascript移入DOM節點（常見的SPA解決方案），會碰到很高的性能挑戰：DOM節點繁多，頁面太大，轉場動畫不流暢甚至致使瀏覽器崩潰； mui的解決思路是：單webview只承載單個頁面的dom，減小dom層級及頁面大小；頁面切換使用原生動畫，將最耗性能的部分交給原生實現.

http://dev.dcloud.net.cn/mui/window/#openwindow

mui.openWindow({
    url:new-page-url, id:new-page-id,
    styles:{
      top:newpage-top-position,//新頁面頂部位置
      bottom:newage-bottom-position,//新頁面底部位置
      width:newpage-width,//新頁面寬度，默認爲100%
      height:newpage-height,//新頁面高度，默認爲100%
      ......
    },
    extras:{
      .....//自定義擴展參數，能夠用來處理頁面間傳值
    },
    createNew:false,//是否重複建立一樣id的webview，默認爲false:不重複建立，直接顯示
    show:{
      autoShow:true,//頁面loaded事件發生後自動顯示，默認爲true
      aniShow:animationType,//頁面顯示動畫，默認爲」slide-in-right「；
      duration:animationTime//頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒；
    },
    waiting:{
      autoShow:true,//自動顯示等待框，默認爲true
      title:'正在加載...',//等待對話框上顯示的提示內容
      options:{
        width:waiting-dialog-widht,//等待框背景區域寬度，默認根據內容自動計算合適寬度
        height:waiting-dialog-height,//等待框背景區域高度，默認根據內容自動計算合適高度
        ......
      }
    }
})

 

 建立子頁面

在mobile app開發過程當中，常常會出現共用的導航欄或者選項卡，每次打開頁面都須要從新渲染，並且容易出現卡頭卡尾的現象。而且此時若使用局部滾動，在android手機上會出現滾動不流暢的問題；

http://dev.dcloud.net.cn/mui/window/#subpage

mui.init({
    subpages:[{
      url:your-subpage-url,//子頁面HTML地址，支持本地地址和網絡地址
      id:your-subpage-id,//子頁面標誌
      styles:{
        top:subpage-top-position,//子頁面頂部位置
        bottom:subpage-bottom-position,//子頁面底部位置
        width:subpage-width,//子頁面寬度，默認爲100%
        height:subpage-height,//子頁面高度，默認爲100%
        ......
      },
      extras:{}//額外擴展參數
    }]
  });

 

 發送ajax請求

http://dev.dcloud.net.cn/mui/ajax/

mui框架基於htm5plus的XMLHttpRequest，封裝了經常使用的Ajax函數，支持GET、POST請求方式，支持返回json、xml、html、text、script數據類型； 本着極簡的設計原則，mui提供了mui.ajax方法，並在mui.ajax方法基礎上，進一步簡化出最經常使用的mui.get()、mui.getJSON()、mui.post()三個方法。

直接使用ajax

mui.ajax('http://server-name/login.php',{
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json',//指定服務器返回json格式數據
    type:'post',//HTTP請求類型
    timeout:10000,//超時時間設置爲10秒；
    headers:{'Content-Type':'application/json'},                  
    success:function(data){
        //服務器返回響應，根據響應結果，分析是否登陸成功；
        ...
    },
    error:function(xhr,type,errorThrown){
        //異常處理；
        console.log(type);
    }
});

 

直接使用post

mui.post('http://server-name/login.php',{
        username:'username',
        password:'password'
    },function(data){
        //服務器返回響應，根據響應結果，分析是否登陸成功；
        ...
    },'json'　　# 指定服務器返回的數據格式
);

 

ajax發送get請求

mui.get('http://server-name/list.php',{category:'news'},function(data){
        //得到服務器響應
        ...
    },'json'
);

 

頁面間傳遞數據

在mui.openWindow時可使用extras:{}, 來傳遞參數, 那麼在頁面中如何接受傳遞過來的數據呢


mui.plusReady(function() {
    var content = plus.webview.currentWebview()　　# 獲取當前頁面全部的數據, extras會將數據放在這裏面
//  console.log(JSON.stringify(content))                    
})

 

app本地存儲

cs架構的時候使用cookie存放一些數據, app中也能夠進行相似的操做

window.localStorage.setItem("user", "xxx")    # 設置一個值
window.localStorage.getItem("user")    # 獲取值
window.localStorage.removeItem("user", "xxx)    # 刪除某一個
window.localStorage.clear()    # 清空, 刪除全部

HTML5 plus也提供了

http://www.html5plus.org/doc/zh_cn/storage.html

var foo = plus.storage.getLength();

經常使用方法

getLength: 獲取應用存儲區中保存的鍵值對的個數
getItem: 經過鍵(key)檢索獲取應用存儲的值
setItem: 修改或添加鍵值(key-value)對數據到應用數據存儲中
removeItem: 經過key值刪除鍵值對存儲的數據
clear: 清除應用全部的鍵值對存儲數據
key: 獲取鍵值對中指定索引值的key值

 

調用手機揚聲器

http://www.html5plus.org/doc/zh_cn/audio.html#plus.audio.AudioPlayer

使用方法

先建立一個音頻對象

var playerObj = plus.audio.createPlayer(path);

播放音頻

playerObj.play(successCB, errorCB)
successCB   # 音頻播放完成的後的回調函數 
errorCB    # 音頻播放失敗的回調函數

經常使用方法

play: 開始播放音頻
pause: 暫停播放音頻
resume: 恢復播放音頻
stop: 中止播放音頻
seekTo: 跳到指定位置播放音頻
getDuration: 獲取音頻流的總長度
getPosition: 獲取音頻流當前播放的位置
setRoute: 設置音頻輸出線路

 

事件

http://dev.dcloud.net.cn/mui/event/

事件綁定

當點擊登陸時觸發事件login

document.getElementById('loginBtn').addEventListener('tap',function () {
                    mui.openWindow({
                        url: "login.html",
                        id: "login.html",
                        createNew: true
                    })
            })

 

取消事件

off(event,selector,handle)適用於取消對應選擇器上特定事件所執行的特定回調

//點擊li時，執行foo_1函數
mui("#list").on("tap","li",foo_1);
//點擊li時，執行foo_2函數
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//點擊li時，再也不執行foo_1函數，但會繼續執行foo_2函數
mui("#list").off("tap","li",foo_1);

off(event,selector)適用於取消對應選擇器上特定事件的全部回調

//點擊li時，執行foo_1函數
mui("#list").on("tap","li",foo_1);
//點擊li時，執行foo_2函數
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//點擊li時，foo_二、foo_2兩個函數均再也不執行
mui("#list").off("tap","li");

off()適用於取消當前元素上綁定的全部事件回調

//點擊li時，執行foo_1函數
mui("#list").on("tap","li",foo_1);
//雙擊li時，執行foo_4函數
mui("#list").on("doubletap","li",foo_4);
//點擊p時，執行foo_3函數
mui("#list").on("tap","p",foo_3);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_3(){
  console.log("foo_3 execute");
}

function foo_4(){
  console.log("foo_4 execute");
}
//點擊li時，再也不執行foo_1函數；點擊p時，也再也不執行foo_3函數；雙擊li時，也再也不執行foo_4函數；
mui("#list").off();

 

自動觸發某個事件

var btn = document.getElementById("submit");
//監聽點擊事件
btn.addEventListener("tap",function () {
  console.log("tap event trigger");
});
//觸發submit按鈕的點擊事件
mui.trigger(btn,'tap');

 

原生支持的手勢

分類	參數	描述
點擊	tap	單擊屏幕
	doubletap	雙擊屏幕
長按	longtap	長按屏幕
	hold	按住屏幕
	release	離開屏幕
滑動	swipeleft	向左滑動
	swiperight	向右滑動
	swipeup	向上滑動
	swipedown	向下滑動
拖動	dragstart	開始拖動
	drag	拖動中
	dragend	拖動結束

 

二維碼識別

建立Barcode對象

mui.plusReady(function() {
//      scan = new plus.barcode.Barcode('bcid');　　// 建立對象
//      scan.onmarked = function(type,result){    // 這是掃碼成功的回調函數, 參數解釋:二維碼的類型, 掃描的結果
   })

 

經常使用方法

start: 開始條碼識別
cancel: 結束條碼識別
close: 關閉條碼識別控件
setFlash: 是否開啓閃光燈
setStyles: 設置Barcode掃碼控件的配置參數

 

經常使用事件

onmarked: 條碼識別成功事件
onerror: 條碼識別錯誤事件