使用什麼進行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的最大優勢，通過完整的語法提示和程式碼輸入法、程式碼塊等，大幅提升
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_2、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 | 拖動結束 |