http://www.yilingsj.com/xwzj/2015-04-29/260.html
最近在玩mui框架,坑的我是:西湖的水,全都是眼淚!!!
公司的手機app要進行改版,我率先想到的是jquery mobile
,但是,我卻放棄了jquery mobile
而選擇了MUI
,現在還真有點小小小后悔。(注:關於jquery mobile做手機頁面的心得以后有空再進行單獨寫文章進行分享。)
當我第一眼看到mui時,我就已經深深地喜歡上了她,界面簡潔、清爽。如圖: mui的功能也是比較多的,但還是跟jquery mobile有些區別。
由於是第一次接觸這個mui,我是有多苦逼看官是可以相像的出的。對着官方的文檔進行敲代碼卻不見效果(為了這個,我還到官方論壇發帖求解,感謝“@逆流而上”對我的幫助,后面會寫一篇關於手機模擬器的文章。)!為何!?因為mui的環境問題!如果有看官使用過mui的話,直接在chrome上打開index.html
會發現有一個小提示,如圖: 這就是我剛才說的:對照着官方文檔敲代碼都沒效果的原因!有關mui的使用場景可點擊官方的文檔看說明,鏈接地址: ask.dcloud.net.cn/m/article/113
在“@逆流而上”的幫助下,我學會了用模擬器來時時查看代碼效果,總算是可以擺脫之前的繁瑣操作了。(注:之前的操作方法是:先將寫好的app項目打包成apk,再上傳到自己的空間,然后用手機下載下來安裝,每修改一點打包一次。不得不說這個太坑了,還好有模擬器。)
說了這么多,忘記說這個mui怎么使用了。看官可以去官網下載個HBuilder
,安裝后按下Ctrl+n
,選擇移動app后勾選Hello mui
就可以了。動態演示圖:
(注:現在的最新版本5.6已經修復了5.2中的一個小bug,這個是自己在使用過程中發現的。將一文件拖進 hbuilder中,想要編輯時右下角的搜狗輸入法會不停閃爍以至於無法編輯,文件必需要出現在左側項目管理器中才不會出現這種情況。由於這個原因,有好 幾個月沒有使用這個hbuilder了,這次做app才使用。)
公司的手機app主頁圖是這個樣子的, 當時我想要的效果是mui中的側滑。但是,mui中的側滑暫不支持同一頁面中添加多個側滑,官方大大的回復是: 從回復中可以看出是支持不同方向的側滑,但是這個顯得有些雞肋。不過還是要感謝大大的幫助,修改了js才實現這個效果。但在應用過程中我又有了新的問題,繼續找大大抱大腿。
昨天抱了一天,在夜晚8點的時候終於抱上了,大大的回復: (注:詳細問題請點擊鏈接: http://ask.dcloud.net.cn/question/4919?notification_id-22625__rf-false__item_id-8261,8262 )再次感謝官方大大的技術支持。雖然現在mui的某些功能,例如我提到的這些功能暫時官方還未提供,但我相信在不久官方會進行提供的,那個時候再開發app就比現在要輕松很多了。可是現在,我還是要不停的繼續抱大腿來解決我的需求。
今天繼續寫代碼,用昨晚大大給的案例進行修改,又得進入苦逼模式了。唉......(局外人永遠不會懂:一個小白折騰一項新技術,大量的問題無法得到及時解決,每前面一小步都在不停的浪費大量的時間是有多么的痛苦!!!)