仿天猫源码分享（纯前端，但商家内容是天猫原站）

模仿天猫商城APP开发的APP源码

今年双十一又开始了，发模仿天猫商城app开发的帖子，没有后端数据，是纯静态页面，不过应用的home页里面的商品信息是调的天猫网站的内容，所有注意在wifi下使用本APP。

可参考主页配合 frameGroup 来进行导航切换。除布局外很多切换效果实际都可以使用这种方式，比如：幻灯片、Table 布局切换等。

界面布局采用APICloud 5大UI组件：Widget、Layout、Window、Frame和UIModules
主要功能包括：搜索、轮播广告页、分类导航、商品列表、资讯列表、店铺、商品详情、购物车、消息、登陆、注册、个人中心等
用到的功能模块包括：二维码扫描模块FNScanner、科大讯飞语音识别的sdkspeechRecognizer

最新源码已经被APICloud官方收录到平台的GITHUB中。欢迎大家去下载https://codeload.github.com/apicloudcom/Tmall-Source/zip/master

1.home页

这次没有做欢迎页，上来就是home页，也就是天猫，这里有很多功能，这里面的内容可以挨个 点点看。商家内容，商品内容什么的使用window加上frame再把天猫的url赋值给frame；我看原版的天猫就是这么做的；所以各位在点开这里的商品时，注意要在wifi的环境下。

2.关注页

这用了css3的效果，其实没什么大用，我没觉得这个设计有多好，写起来还挺麻烦。

3.fun页

这挺不错的，有好多养眼的图片呀，纯粹的前端布局，顺便说一下，上下两个tabbar上的滑块效果，这次我加上了，有些手机上可能算的不准，毕竟用的是百分比，有兴趣的可以看看是怎么实现的。

4.购物车

毫无技术含量的一页（好吧，其实是我偷懒，这里要计算，要有加减商品的效果，我就偷个懒，反正这个也不难是吧）；

5.我（个人中心）

这里的东西也能点，下面的这七个按钮，我没找到原图，所以就随便截的，点击的时候看着挺别扭的。

6.登录

背景处的tmall直接定的位，不然打开出入法就被挤上去了。

7.这就是首页的商品页

这里有个问题，就是点击返回的时候，在安卓里不好用，有时会报错，我用的原生方法，但是执行的不好呀，谁会处理，发出来分享一下
总结一下，这次本准备用搜索模块，但是发现还是不能满足需求，那个麦克风去不掉，语音识别还不错，二维码扫描也挺实用的，但是我都对返回的结果进行处理，我现阶段发现，最难弄的就是弹性布局了，这里用到了好多，我也做了些尝试，我有些是用js计算宽度解决的，有些是css3布局，有些是table的布局，其实最好用的是js，它可以解决兼容问题，但是会牺牲 速度，会有一点点的慢。有谁发现什么问题了，就说出来，大家共同研究，共同进步。