web移动端开发总结

XXX微信企业号是接触的第一个移动端项目&＃xff0c;下面对遭遇的问题和解决方法做以总结&＃xff1a;

项目背景&＃xff1a;借助微信企业号平台&＃xff0c;使用第三方提供的数据接口&＃xff0c;实现数据定制化展示。和普通的web开发类似&＃xff0c;只是放到移动端&＃xff0c;嵌入微信罢了。

项目规模&＃xff1a;小

1. 移动端开发注意要点&＃xff1a;

   1&＃xff0c;结构精简&＃xff0c;交互方便。因为移动端的内容展示空间有限&＃xff0c;内容的呈现方式&＃xff0c;一些交互效果的设计方面&＃xff0c;需要提前考虑。

   2&＃xff0c;界面美观&＃xff0c;兼容性能。移动端应用爆炸式增长&＃xff0c;如何提升本应用的竞争力&＃xff0c;业务固然重要&＃xff0c;作为前端人员&＃xff0c;界面和性能的优化也能为应用的用户粘度增色不少。

   3&＃xff0c;面向对象&＃xff0c;拥抱变化。开发通用原则。

   4&＃xff0c;欢迎补充。。

   
   

2&＃xff0c;框架依赖。

    初始时&＃xff0c;业务不够清晰&＃xff0c;原型太粗糙&＃xff0c;为了将关注点更多放到业务实现上&＃xff0c;选取了jqueryMobile框架&＃xff0c;使用起来并不算难&＃xff0c;官网的文档&＃xff0c;demo还算齐全&＃xff0c;对于实现原型是足够了&＃xff0c;但是对于实际开发时&＃xff0c;组件的固有特性和固有样式&＃xff0c;导致其不够灵活&＃xff0c;面对客户的定制化效果&＃xff0c;越来越多的变化。随时可能面临页面大规模重构的风险。

对于小型项目&＃xff0c;建议不引入该框架&＃xff0c;只在需要时&＃xff0c;使用其部分组件。

3&＃xff0c;交互设计。

    设计交互时&＃xff0c;要摒弃pc端的设计方式&＃xff0c;按钮的大小&＃xff0c;是否方便点击&＃xff0c;状态变换是否明显&＃xff0c;都需要注意

比如说&＃xff0c;移动端一般不使用checkbox &＃xff0c;radio的原生样式&＃xff0c;通常都是flipswitch的样式。

4,一些问题&＃xff1a;

① 移动端的click事件有300ms延迟&＃xff0c;可以使用tap事件

②ghost click(与重复绑定区分开),可能因为触摸屏的缘故&＃xff0c;有时&＃xff0c;对当前页面的点击&＃xff0c;会响应到下一个页面&＃xff0c;造成莫名其妙的跳转

    此类问题&＃xff0c;在写事件绑定时&＃xff0c;加上 prevetDefault,stopPropagation的调用。

③移动端对html5的支持并不是很好&＃xff0c;使用html5特性时&＃xff0c;要考虑兼容性。而且设备的性能很难匹配pc端&＃xff0c;所以动画之类高cpu消耗的交互尽量少用。

④ 代码调试有点麻烦&＃xff0c;chrome的模拟器很好用&＃xff0c;实体机测试时alert成了神器。

在设计和开发中&＃xff0c;要充分考虑到移动端的特性和一些局限性&＃xff0c;才能制作出更加贴近用户的产品。

似我辈开发人员&＃xff0c;更多使用的是后端渲染&＃xff0c;也许使用前端渲染&＃xff0c;使用一些前端框架&＃xff0c;比如angular&＃xff0c;backbone之类&＃xff0c;也许会更加便捷&＃xff0c;当然这对于开发人员的要求很高&＃xff0c;前端还有很长的路要走。

都是些零碎&＃xff0c;以后再慢慢补充。

更新&＃xff1a;2015-11-26 

1&＃xff0c;因为jquery mobile本身对于页面生命周期的管理自有一套事件&＃xff0c;通常我们绑定元素事件时或者初始化一些第三方组件时&＃xff0c;需要根据实际的使用情况&＃xff0c;在不同的页面事件中绑定元素事件&＃xff0c;比如&＃xff0c;我们使用swiper插件&＃xff08;一个滑动插件&＃xff09;&＃xff0c;通常需要在pageshow事件里面进行初始化&＃xff0c;因为它需要在知道容器的维度。而对于分页&＃xff0c;我们通常需要在pageinit中初始化&＃xff0c;如果放在pageshow中就会导致每次导航到当前页面都会初始化一次分页&＃xff0c;造成不必要的资源消耗。

2&＃xff0c;事件绑定了一次&＃xff0c;但是会触发多次&＃xff0c;这很可能是我们绑定事件的时机有问题&＃xff0c;此时参考页面的声明周期去找问题把。通常解决此类问题&＃xff0c;可以采取的方案&＃xff1a;每次绑定事件前先解绑一次&＃xff0c;示例&＃xff1a;

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

3&＃xff0c;动态加载的内容中部分控件没有被框架加强&＃xff1a;在将动态内容append到dom中之前&＃xff0c;先调用enhanceWithin&＃xff08;&＃xff09;&＃xff1b;例如&＃xff1a;

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