appcan快速學習

緒論

學習appcan也有一段時間了。開發了一些demo 。還沒有開發出產品。這裏就appcan的學習進行講述,讓大家遠離破爛學習資料的坑。

appcan官網有學習的視頻和文檔,視頻還是那個6小時的好一點(在首頁上點擊學習中心)。其他的都白扯,個人覺得講的不好。快睡着了。

吐槽

看了視頻在看文檔,文檔非常次有很多錯誤。例子也不是很好,根本學不會的。加羣和論壇。幾乎是問了問題沒人回答你。再說初學者也問不出來啥。

這時候我們最快的就是學習方式就是demo 然後纔是文檔,最後是源碼分析。  那對於初學者繼續改怎麼學呢。看完視頻還是不會(可能我學習能力不強吧)。

正題

下面我就針對學習能力不強的同學說一下關鍵點,穿一下主線,做兩個demo ,然後開發項目。順便說一下,你的下載他們的ide 學會簡單的調試,網上有很多文章,這裏不講解了。

appcan 在你看6小時的時候 。 主要有ui部分。和插件部分。

appcan特性

ui部分 有個appcan的兩個核心;我就兩個核心講解一下我的理解,和appcan的原理。

這裏說一句廢話:appcan 其實不是一種html 的開發,他和phoengap 是不一樣的。他是一種深度的混編,可以說更像nativejs。

第一個特性 ,ui 採用彈性盒模型 。這個東西是一個css的東西,不過對於一把我這種後端java 或者 php的開發人員來說,是一個熟悉又陌生的東西。知道又不太會用,這時候我發現了一個好東西——那就是張鑫旭的博客,寫的很詳細

http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/

看完他的博客後,自己寫兩個例子,然後看看appcan的css 源碼。你用他的IDE 隨便建一個項目在css中就能找到。 彈性盒模型就攻破了。


第二個特性,窗口模式。窗口是appcan的一個核心亮點,他不是簡單webView 直接加載你的頁面。而是多個webView 這些多個的webView 建成一個棧,每一個webview 是一個窗口,也是你的一個頁面。你打開一個頁面就將一個頁面壓棧同時取一個名字。你按下返回鍵後就將這個頁面彈棧。這樣你就可以看到像原生一樣的效果了。不會你  a 標籤打開一個頁面。關閉了。然後在打開又刷新了。(這也是appcan速度快的一個原因)

好了這裏就產生了一個問題。你的頁面彈棧以後,是不會消失的。那你怎麼通知他刷新呢。appcan爲了解決這個問題,提供了兩種方式。

第一種 訂閱式  非常重要的兩個方法 

appcan.window.publish( id, msg)        第一參數是通道id (自己定)  第二個是通知的信息

appcan.window,subscribe(id,fun)      第一個參數是通道id (你想收到那個通知)  第二個 通知的回調函數 function(msg)

第二種 指定調用  在窗口模式中,我們有兩種打開窗口的模式  

一種 appcan.window.open(name,頁面name) 第一個參數你取的名字,第二個參數頁面路徑

補充:第一個面就是啓動頁面,名稱叫做root 。  其他參數看官網的api 是一些打開頁面的特效設置。

二種 appcan.frame.open (選擇器,路徑 ,距離左邊,距離上邊) 這個是打開一個懸浮窗口,這個窗口指定一個div 或者一個位置打開,同時這個位置的名稱還是他的名稱,建議使用id 


回到調用上  對於窗口   appcan.window.evaluateScript("friend","list()");  第一個參數 頁面名稱,第二個參數js 代碼,可以調用指定頁面你的方法。

                      對於懸浮窗口   appcan.window.evaluatePopoverScript("root", "content", "go()");   第一個參數頁面名稱, 第二個參數懸浮窗名稱,第三個參數 js代碼


        好了你會了這個,你就可以處理,用戶登錄後,讓那個頁面加載什麼數據,只需要在那個頁面寫好方法調用,或者訂閱模式都可以。

注:初學者會發現,appcan中 uexwindow 什麼的每個官方的例子給的都不太一樣。打開窗口的方式有很多。其實都是一種uexwindow 。其他什麼jssdk中都是對uexwindow 的封裝,yz等等都是封裝。也就是所有jssdk都是對uex的封住哪個。 你隨便會一個就行。但是uexwindow 在預覽(appcan的ide調試用的)中可能不好使。 jssdk  中appcan.window這種,有時候好使,有時候不好使鬱悶。


插件導語

系統的插件可以直接本地生成apk進行調試,或者使用它的調試工具進行調試,第三方的sdk只能在線打包進行調試,這裏不說了全是淚,我會在環信插件的使用的時候的文章給出,解決辦法。



下面給點福利, 我吧appcan的一些好的例子都收集了一下進行分享 : 其中有美食app 、 會生活、環信使用demo 、官方demo 、hiappcan 、 appcanshow 等


地址如下 http://pan.baidu.com/s/1sltafCD 



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章