随着移动互联网的发展,在微信支付和支付宝支付等快捷移动支付方式的促进下,移动电子商务得到了迅猛发展,频繁的出现在人们的日常生活中。区别于传统的电子商务,移动电子商务可以基于地理位置提供个性化的推荐,通过微信,QQ,微博等社交平台进行商品的评论和分享。社交平台能带来大量的用户,对公司来说是非常具有吸引力的。上海某公司基于微信,QQ等社交平台,通过移动商城为用户提供商品团购服务。用户在购买商品时,平台会创建一个拼团,用户可以邀请好友参与拼团。在拼团人数达到要求时,平台生成订单并发货。在购物的同时,用户通过社交平台分享商品信息。这种销售模式在提高商品销量和品牌知名度的同时,能够为公司带来大量的新用户。为了系统能够运行在所有的移动平台上,公司基于HTML5技术开发了移动商城的前端部分。HTML5的最大优势是跨平台,开发人员无需针对平台进行开发,用户无需下载,只需要打开一个网址,就能在全平台上运行。因为无需安装,传播效果要比原生App好,推广的成本也要低很多。项目选用React作为主要的javascript开发框架,配合Node.js服务器可以实现前后端一致性渲染,减少首屏加载的时间。为了能在项目中使用最新的开发技术,同时兼容老式浏览器,项目使用webpack进行构建。webpack支持CommonJS规范,为javascript提供了包依赖机制,避免命名冲突。webpack提供的loaders和plugins扩展,可以对代码进行定制化的处理。本论文主要描述了 H5开发的核心技术,并使用这些技术实现了移动电商系统的前端部分。本文重点描述了 webpack的配置,React框架配合Node.js服务器实现前后端的一致性渲染、列表展示模块的实现和复用、页面自适应、网络模块的封装、支付模块的实现。