web移動端開發總結

XXX微信企業號是接觸的第一個移動端項目，下面對遭遇的問題和解決方法作以總結：

項目背景：藉助微信企業號平臺，使用第三方提供的數據接口，實現數據定製化展現。和普通的web開發相似，只是放到移動端，嵌入微信罷了。

項目規模：小

1. 移動端開發注意要點：

   1，結構精簡，交互方便。由於移動端的內容展現空間有限，內容的呈現方式，一些交互效果的設計方面，須要提早考慮。

   2，界面美觀，兼容性能。移動端應用爆炸式增加，如何提高本應用的競爭力，業務當然重要，做爲前端人員，界面和性能的優化也能爲應用的用戶粘度增色很多。

   3，面向對象，擁抱變化。開發通用原則。

   4，歡迎補充。。

   
   

2，框架依賴。

    初始時，業務不夠清晰，原型太粗糙，爲了將關注點更多放到業務實現上，選取了jqueryMobile框架，使用起來並不算難，官網的文檔，demo還算齊全，對於實現原型是足夠了，可是對於實際開發時，組件的固有特性和固有樣式，致使其不夠靈活，面對客戶的定製化效果，愈來愈多的變化。隨時可能面臨頁面大規模重構的風險。

對於小型項目，建議不引入該框架，只在須要時，使用其部分組件。

3，交互設計。

    設計交互時，要摒棄pc端的設計方式，按鈕的大小，是否方便點擊，狀態變換是否明顯，都須要注意

好比說，移動端通常不使用checkbox ，radio的原生樣式，一般都是flipswitch的樣式。

4,一些問題：

① 移動端的click事件有300ms延遲，可使用tap事件

②ghost click(與重複綁定區分開),可能由於觸摸屏的緣故，有時，對當前頁面的點擊，會響應到下一個頁面，形成莫名其妙的跳轉

    此類問題，在寫事件綁定時，加上 prevetDefault,stopPropagation的調用。

③移動端對html5的支持並非很好，使用html5特性時，要考慮兼容性。並且設備的性能很難匹配pc端，因此動畫之類高cpu消耗的交互儘可能少用。

④ 代碼調試有點麻煩，chrome的模擬器很好用，實體機測試時alert成了神器。

在設計和開發中，要充分考慮到移動端的特性和一些侷限性，才能製做出更加貼近用戶的產品。

似我輩開發人員，更多使用的是後端渲染，也許使用前端渲染，使用一些前端框架，好比angular，backbone之類，也許會更加便捷，固然這對於開發人員的要求很高，前端還有很長的路要走。

都是些零碎，之後再慢慢補充。

更新：2015-11-26 

1，由於jquery mobile自己對於頁面生命週期的管理自有一套事件，一般咱們綁定元素事件時或者初始化一些第三方組件時，須要根據實際的使用狀況，在不一樣的頁面事件中綁定元素事件，好比，咱們使用swiper插件（一個滑動插件），一般須要在pageshow事件裏面進行初始化，由於它須要在知道容器的維度。而對於分頁，咱們一般須要在pageinit中初始化，若是放在pageshow中就會致使每次導航到當前頁面都會初始化一次分頁，形成沒必要要的資源消耗。

2，事件綁定了一次，可是會觸發屢次，這極可能是咱們綁定事件的時機有問題，此時參考頁面的聲明週期去找問題把。一般解決此類問題，能夠採起的方案：每次綁定事件前先解綁一次，示例：

  $("#dlist").off("tap", ".js-addOrder").on("tap", ".js-addOrder", function (e) {
            e.preventDefault();
            e.stopPropagation();
            var kSelected = $("#k_selected").val();
            var dSelected = $(this).parents("li").data("did");
            $("#d_selected").val(dSelected);
            $.mobile.navigate('@Url.Action("CustomizeComplete", "Customize", new { area = "Customize" })' + "?style=" + kSelected + "&dId=" + dSelected);
        });

3，動態加載的內容中部分控件沒有被框架增強：在將動態內容append到dom中以前，先調用enhanceWithin（）；例如：

$(options.containerId).append(content).enhanceWithin().listview("refresh");