guide.html最后處理
H5+
Storage模塊管理應(yīng)用本地?cái)?shù)據(jù)存儲(chǔ)區(qū)逼纸，用于應(yīng)用數(shù)據(jù)的保存和讀取借帘。應(yīng)用本地?cái)?shù)據(jù)與localStorage蜘渣、sessionStorage的區(qū)別在于數(shù)據(jù)有效域不同，前者可在應(yīng)用內(nèi)跨域操作肺然，數(shù)據(jù)存儲(chǔ)期是持久化的蔫缸，并且沒(méi)有容量限制。通過(guò)plus.storage可獲取應(yīng)用本地?cái)?shù)據(jù)管理對(duì)象际起。
getItem: 通過(guò)鍵(key)檢索獲取應(yīng)用存儲(chǔ)的值
setItem: 修改或添加鍵值(key-value)對(duì)數(shù)據(jù)到應(yīng)用數(shù)據(jù)存儲(chǔ)中
clear: 清除應(yīng)用所有的鍵值對(duì)存儲(chǔ)數(shù)據(jù)
- ** plus.storage.getItem();**
- ** plus.storage.setItem();**
navigator用于管理瀏覽器運(yùn)行環(huán)境信息
closeSplashscreen: 關(guān)閉程序啟動(dòng)界面
setFullscreen: 設(shè)置應(yīng)用是否全屏顯示
- ** plus.navigator.closeSplashscreen();**
- ** plus.navigator.setFullscreen();**
做web app拾碌，一個(gè)無(wú)法避開(kāi)的問(wèn)題就是轉(zhuǎn)場(chǎng)動(dòng)畫(huà)；web是基于鏈接構(gòu)建的街望，從一個(gè)頁(yè)面點(diǎn)擊鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面校翔，如果通過(guò)有刷新的打開(kāi)方式，用戶(hù)要面對(duì)一個(gè)空白的頁(yè)面等待灾前；如果通過(guò)無(wú)刷新的方式防症，用Javascript移入DOM節(jié)點(diǎn)（常見(jiàn)的SPA解決方案），會(huì)碰到很高的性能挑戰(zhàn)：DOM節(jié)點(diǎn)繁多，頁(yè)面太大蔫敲，轉(zhuǎn)場(chǎng)動(dòng)畫(huà)不流暢甚至導(dǎo)致瀏覽器崩潰饲嗽； mui的解決思路是：?jiǎn)蝫ebview只承載單個(gè)頁(yè)面的dom，減少dom層級(jí)及頁(yè)面大醒嗯肌喝噪；頁(yè)面切換使用原生動(dòng)畫(huà)，將最耗性能的部分交給原生實(shí)現(xiàn).
- **mui.openWindow()//打開(kāi)新的頁(yè)面 **
問(wèn)題
- 如何實(shí)現(xiàn)引導(dǎo)頁(yè)只出現(xiàn)一次（肯定得記錄一個(gè)值來(lái)判斷）
- 究竟是先加載index.html 還是guide.html
- 最實(shí)在的 案例里的代碼在哪呢指么？
邏輯順序
- 在哪 判斷 加載過(guò)guide.html
- 判斷 是否 加載過(guò)guide.html
- 在哪關(guān)閉程序啟動(dòng)界面
- 加載guide.html后 記錄個(gè)標(biāo)記
- 為了便于調(diào)試查看效果 如何清除標(biāo)記
正題
[6.0.0.201506290132]新增App首次啟動(dòng)歡迎頁(yè)，也就是mui項(xiàng)目中examples/guide.htmlAPP啟動(dòng)流程：1. APP啟動(dòng)打開(kāi)啟動(dòng)頁(yè)面榴鼎，也就是splashscreen伯诬，可以在manifest.html中設(shè)置自動(dòng)關(guān)閉或者手動(dòng)關(guān)閉：代碼視圖中plus下的splashscreen，autoclose值為false即需要手動(dòng)關(guān)閉巫财，值為true即自動(dòng)關(guān)閉盗似；2. 進(jìn)入設(shè)置的入口頁(yè)面webview；在入口頁(yè)面或者入口頁(yè)面的子webview即APP啟動(dòng)后就執(zhí)行js的webview中判斷APP是否為第一次啟動(dòng)平项。如何判斷呢赫舒？使用localStorage，這個(gè)很簡(jiǎn)單就不說(shuō)了闽瓢；若不是第一次打開(kāi)接癌，則需要使用plus.navigator.closeSplashscreen()來(lái)關(guān)閉啟動(dòng)畫(huà)面；若為第一次打開(kāi)扣讼，則進(jìn)入guide.html缺猛，在guide.html加載完后需要關(guān)閉啟動(dòng)畫(huà)面；3. guide.html跳轉(zhuǎn)至入口頁(yè)面椭符；
在MUI demo中荔燎，判斷是否為第一次啟動(dòng)APP的代碼在入口頁(yè)面index.html的子頁(yè)面list.html中；
看demo時(shí)發(fā)現(xiàn)若是ios則設(shè)置全屏(顯示頂部狀態(tài)欄)销钝，我測(cè)試了下有咨，ios和安卓都可以全屏，不知道hbcui1984為何這樣寫(xiě)蒸健，我看了下好幾個(gè)安卓APP的guide都不是全屏的座享；
關(guān)于在使用過(guò)程中出現(xiàn)的問(wèn)題：1.有的娃娃做出來(lái)之后表現(xiàn)是看到啟動(dòng)畫(huà)面后先看到入口頁(yè)面，然后才看到guide頁(yè)面纵装，這是因?yàn)槲凑_設(shè)置啟動(dòng)畫(huà)面的關(guān)閉征讲；
若有問(wèn)題，請(qǐng)?jiān)谠u(píng)論中指出橡娄。by 鑫花璐放
問(wèn)答鏈接
真的是找了好久诗箍，mui案例的index.html都快翻爛了，總算在論壇上找到了答案挽唉，真是感謝前輩們滤祖；
查看案例知道了 （實(shí)際上是）manifest.json文件中設(shè)置了默認(rèn)加載的是index.html（也是我為啥走了半天彎路的原因）筷狼；
所以正常我們應(yīng)該在index.html中判斷guide.html加載情況（因?yàn)槭荋5+，所以我們寫(xiě)在mui.plusReady()方法中）,之后手動(dòng)關(guān)閉啟動(dòng)頁(yè)匠童，并且設(shè)置是否全屏顯示（非游戲沒(méi)必要全屏）
//寫(xiě)在index.html
mui.plusReady(function() {
var showGuide=plus.storage.getItem('launch');
if (showGuide) {
//關(guān)閉啟動(dòng)頁(yè)（splash頁(yè)）
plus.navigator.closeSplashscreen();
//是否全屏顯示應(yīng)用
plus.navigator.setFullscreen(false);
} else{
mui.openWindow({
id:'guide',
url:'guide.html',
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
}
假設(shè)第一次加載 則需要再guide.html中關(guān)閉啟動(dòng)頁(yè) 設(shè)置顯示方式
（一般是點(diǎn)擊 立即體驗(yàn) 之類(lèi)的按鈕 一個(gè)tap事件 記錄 關(guān)閉啟動(dòng)頁(yè) 關(guān)閉當(dāng)前窗口）
//寫(xiě)在guide.html中
mui.plusReady(function() {
if (mui.os.ios) {
plus.navigator.setFullscreen(true);
}
plus.navigator.closeSplashscreen();
document.getElementById('colse').addEventListener('tap', function(event) {
plus.storage.setItem("launch", "true");
plus.navigator.setFullscreen(false);
//關(guān)閉當(dāng)前窗口
plus.webview.currentWebview().close();
},false);
});
也可以是啟動(dòng)頁(yè) 翻到最后一頁(yè)然后再翻直接到 index.html 然后執(zhí)行以上動(dòng)作
事件如下：
//引導(dǎo)頁(yè)切換事件
document.querySelector(".mui-slider").addEventListener('slide', function() {
var index = event.detail.slideNumber;
if () {
} else {
}
});
event.detail.slideNumber 是當(dāng)前slider標(biāo)記 第一頁(yè)為 0 （類(lèi)似數(shù)組）（Number型）
通過(guò)對(duì) index的判斷然后執(zhí)行動(dòng)作埂材；
總結(jié)
首先感謝前輩們的探索，還是讓后來(lái)者少走了好多彎路汤求。
容易發(fā)生的問(wèn)題 index.html可能會(huì)先于guide.html出現(xiàn) 這里就要考慮執(zhí)行順序俏险，關(guān)閉順序是否合理了；
本人誤入歧途canvas的研究扬绪，克服了canvas動(dòng)畫(huà)的難關(guān)但是卡在 加載問(wèn)題上 drawImage() 對(duì)于canvas在加載img竖独，會(huì)在第一個(gè)slider加載時(shí)出現(xiàn)問(wèn)題，只能先拋棄了挤牛，同時(shí)也發(fā)現(xiàn)了canvas動(dòng)畫(huà) 對(duì)canvas有了深層次的理解莹痢，canvas的研究也夠人喝一壺的了。
下次墓赴，mui提供的組件簡(jiǎn)單拼裝
用過(guò)以后拼頁(yè)面用HB 的快捷提示 真是好快竞膳，icon的提供也好給力適合大部分簡(jiǎn)單的開(kāi)發(fā)了，也發(fā)現(xiàn)了好幾款關(guān)于icon 文字碼的工具 好想試試诫硕，總比icon用圖片方便多了坦辟；
幫朋友看EasyUI，突然發(fā)現(xiàn)了bootstrap后臺(tái)管理界面的框架痘括，什么鬼长窄，看著后臺(tái)管理界面也好漂亮，（至少感覺(jué)比easyUI 自由 簡(jiǎn)潔些）纲菌，有空再研究吧挠日。
