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");