sencha touch項目中經驗總結


1.問題:在Ext.navigation.View,當切換前面出現空白

環境

sencha-touch-2.0.1.1系統中,在任何設備上;

 

現象及分析

頁面切換(push方法)到另一個頁面,此時頁面切換(pop方法)到原來頁面,再次頁面切換(push方法)到之前頁面,此時頁面沒有展示任何內容。

分析:1.在模擬器中,跟蹤代碼執行,並沒有發生異常或錯誤,並不是程序邏輯問題;

      2.進一步分析,可能是sencha-touch框架存在問題。

 

解決方法

頁面中有field組件中name="id",所導致Ext.navigationview.View的push不起作用,把name的不命名爲”id”,問題解決。

 

2.問題:填寫表單時,按下軟鍵盤中“前往”鍵,跳轉到空白頁面

環境

設備:android手機品牌:三星i9070 2.3.6系統ST2版本:2.0.1.1

 

現象及分析

填寫表單時,彈起軟鍵盤,並輸入數據完畢後,按下“前往”鍵,則跳轉到空白頁面,並不可以進行任何操作,鎖死此頁面中。

分析:1.寫了一個簡單表單頁面代碼,按下“前往”鍵,結果沒有跳轉到空白頁面,且鍵盤收回,其他操作正常;

2.根據第一條分析,可能卡單銷售填寫保單程序中,可能有些代碼導致或觸發“前往”鍵跳轉到任何頁面;

3.監聽“前往”鍵,阻止此鍵觸發系統默認跳轉,測試結果是沒有效果,依然跳轉到空白頁面,可能不是此原因觸發而導致;

解決方法

解決辦法原則是排除法,把表單頁面中所有方法去掉,測試按“前往”鍵,結果沒有跳轉到空白頁面,進一步添加了initialize方法(表單初始化方法,繼承Ext.form.Panel的實體),發現出現跳轉空白頁面,判定問題就出現在這個initialize方法中,這個方法主要現實是監聽本頁面滾動條事件,當滾動條移動時,隱藏錯誤提示框。根據以上分析,在android2系統中,sencha-touch中自定義類繼承Ext.form.Panel並沒有完全調用父類所有方法,所以initialize方法中添加this.callParent();語句,來解決此問題。

 

3.問題:頁面切換時,頁面標題欄出現白邊狀閃爍

環境

設備:IOS手機品牌:iphone/ipodST2版本:2.0.1.1

 

現象及分析

頁面切換時,頁面的標題欄上出現白邊狀閃爍。

分析:1.主流程頁面中嵌套了子系統編輯保單頁面,主體和子系統頁面切換,主要用了Ext.navigation.Viewpush/pop方法,可能同時嵌套navigation組件導致了這種現象。

 

解決方法

根據以上分析,測試了主體、子系統繼承Ext.Container,結果沒有出現閃爍;第二測試時主體系統繼承Ext.Container,子系統繼承Ext.navigation.View進行頁面切換,結果出現閃爍;第三測試主體繼承Ext.navigation.View,子系統繼承Ext.Container進行頁面切換,結果沒有出現閃爍。

綜合以上,可得出card佈局中嵌套Ext.navigation.ViewIOS上會出現白邊狀閃爍,解決辦法是子系統繼承改爲Ext.Container

 

 

4.問題:若鍵盤彈起狀態,點擊跳轉頁面A時,頁面A呈現空白

環境

設備:IOS手機品牌:iphone/ipodST2版本:2.0.1.1

 

現象及分析

表單輸入框填寫數據,鍵盤彈起時,同時點擊跳轉頁面按鈕(此時,鍵盤有收回動作),則跳轉到的新頁面呈現空白狀態。相反,在鍵盤彈起,並且點擊跳轉頁面按鈕之前時,把鍵盤收回後跳轉頁面,則頁面沒有呈現空白狀況。

分析:反覆測試以上情況,100%出現空白的頁面。

 

解決方法

根據以上分析,可得原因是鍵盤沒有收回,導致頁面出現空白情況。處理方法是當點擊跳轉頁面時候,將此輸入框失去焦點,則觸發鍵盤收回,然後跳轉頁面。

 

5.問題:頁面拖動不了

環境

設備:android手機品牌:華爲C8812E4.0系統ST2版本:2.0.1.1

 

現象及分析

上下拖動頁面時,頁面緩慢和卡頓現象。

分析:1.此設備不是很好支持CSS3樣式,如transform變換等;

2.卡單銷售中,主要在滾動條、頁面切換運用了大量transform樣式,還有程序上循環語句,都有可能導致頁面卡頓現象。

 

解決方法

sencha-touch.css文件中,1.註釋掉大部分transform樣式;2.把頁面切面效果改爲漸變(此效果沒有運用transform樣式);3.針對程序上循環語句中,把for in 語句替換成sencha-touch內置Ext.Object.each()語句,常用的對象某個屬性,賦予一個變量中,在循環語句中,即可快速地調用此變量,以減少遍歷對象的屬性。

 

 

6.問題:<label>標籤使用

環境

設備:android/IOSST2版本:2.0.1.1

 

現象及分析

<input type="checkbox" id="pr_input_checkRules_id" />

<label for="pr_input_checkRules_id" </label>

 

以上代碼中,在android設備正常顯示和操作,但是在IOS設備上無法顯示和操作。

 

解決方法

將兩個標籤順序替換執行,IOS正常顯示與操作。

 

 

7.問題:頁面切換速度與穩定性

環境

設備:android/IOSST2版本:2.0.1.1

 

現象及分析

在頁面切換方法中,sencha-touch框架有2大類切換方法。

1是使用Ext.navigation.View類中的push()pop()方法進行頁面切換,此優勢是頁面切換效果配置(動畫、切換時間)可以省略,而且不用關心返回具體頁面。

2是使用card佈局中的setActiveItem()方法,同時還可以使用animateActiveItem()方法靈活控制切換動畫效果和時間等配置,但是每次頁面切換,都要知道具體跳轉頁面。

分析:使用了push()pop()方法,可是頁面切換頻繁和加載大量數據,導致頁面切換速度更加緩慢,而且出現頁面短暫空白或要用手划動纔出現頁面。

 

解決方法

相比較2中,如果要求頁面切換速度快和穩定展示頁面,則使用animateActiveItem()方法,可以有效控制跳轉時間和提高穩定性。

 

 


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