我是如何实现前端H5第一个产品详情页实现的思路及步骤。

今天公司讨论了,接下来,我们为我们的单品网的工作具体任务安排。

由老马来组织召开了三人的简单会议。

会议就在整个开放的大办公室里(40-50人)进行,我,老马,老卢,坐在一个小圆桌上,开始了我们的会议。

一开始,我就把我的原型拿出来给大家看,接下来,我们要定的这些工作,很快,我们就决定了以下事情:

我负责H5前端的工作,老卢负责后端代码的数据支持实现。

我们就快速的完成第一个版本,这个版本是一个极简单的,单个页面,

完成之后,由老卢再把它配置成通过他们系统 能实现显示所有产品的页面,然后给客服lulu使用。

中午讨论完之后,下午马上开干。

由于,我之前没有做过H5的编程,这是我首次初试牛刀了。

目标:完成一个单品展示的页面(类似京东淘宝的页面),极简

只有三要素:产品标题,产品图片,产品价格

开始思路:
1.通过购买的书本进行:
由于我之前就购买了 jquery mobile 移动实践,这本书,因此,我通过这本书的电子版,查看里面的案例,一步一步操作。
后来,发现里面的案例,
1)没有我想要找的元素,比如产品详情页顶部的 标题显示块
2)没有我想要找的产品主图轮播案例
3)没有产品详情图显示案例。
因此,后面也仅仅拿他作为一本随手翻阅的书,此书不建议买,作用不大,里面的案例感觉也不专业。
2.通过这两天接触的APICLOUD Studio开始进行:
于是,我用APICLOUD Studio 偿试开始创建我的第一个页面,1分钟创建好,马上进行偿试访问,但才发觉这个软件更多 的偏向于做APP,即,把HTML5打包成APP,在APP上运行。由于以下两个,我放弃使用这个软件:
1)不能直接运行H5页面(含本地站点,可供其它地方访问)
2)没有太多HTML,样式等的支持。

3.通过DW(dreamweaver)开始进行:
偿试了上面两个方法,不太可行,进行第三个方法,通过DW去做。
由于我对DW还是很熟悉,因为10几年前就是用DW做过网页,没想到他还能一直存过这么久。费话少说,直接开始,我要求的目标有两个:
1)可直接做页面
2)可直接生成站点,直接运行
1分钟创建了一个网页,但在预览(生成站点访问网页),死活不行,主要是通过手机预览,折腾半天,还是不行,花了10-20分钟,发觉80%可能性是 破解版的问题,因此不折腾,再继续寻找更好的方式。

4.通过使用HBuilder,终于找到合适的工具。
我具体也忘记了自己是通过搜索什么关键词,在百度找到这个工具了,可能是“移动端WEB开发”,类似这种吧,马上下载使用。
1)直接做页面
2)运行
3)编辑器直接打开了本地浏览器,如http://127.0.0.1:8849/%E5%8D%95%E5%93%81%E7%BD%912/index.html
这样的方面,这样,我就可以直接访问,同时,通过手机也可访问(手机也访问要用电脑的IP地址)

好了,工具,环境准备好了,开始编码:
1.通过书本
一开始,我就用我之前买的那本书,查看有没有我想要的资料,结果发觉不可行,没有相关案例。
2.通过百度查找类似关键字(“h5产品详情页”)
其实h5要实现产品详情页,这样的功能,我想主要还是样式css问题,我要实现的三要素,要显示成象京东淘宝一样的产品详情页,主要是样式控制了他的显示效果。
因此,我搜索时,用了比较多的一些关键词,比如前端h5产品详情页,h5产品详情页css,h5产品详情样式等等。
最后,终于找到了实现我想要的功能的源代码,正想做“搬运工”时(复制粘贴),发觉代码不全,仔细一看,还有一个“我要下载”可以下载源代码,点进去,原来还要付5块钱,想了想,5块钱,没什么,就付了(如果10块钱,还不一定付)。

现在想想,其实,最重要的是时间,如果付5块元,能省下来几个小时,这是很划算的,而且更重要是,我可以没必要一步一步开始,可以一开始,就从完全的(从产品详情到支付实现,所有的页面)所有流程页面学习,这样速度会更快,没必要纠结于一个小按钮和显示块的显示效果,调来调去。

最后总结一下心得:
第一,一开始,我们遇到问题(实现产品详情页),先不要陷入问题的细节,先从横向去找办法解决,不必要一开始纠结于使用某个特定的工具,某个特定的元素。
第二,任何问题,我们要相信,其实世界上很多人都会遇到我们相同的问题,我们只需要就更好的找出答案即可。
第三,当我们被问题卡住时(比如,我辗转几道,才找到我想要的工具),我的mac不方便弄IIS,我对其实应用服务器工具配置,又觉得麻烦,这是可以再找找别的答案,没必要因此而沮丧(我有一点点,但马上转换思路),继续想其它方法。因此现在这个时代,已经不象我20年前的时代(很多问题找不到答案)。
希望这些文章,对学习h5的同志们,有帮助,一起共同努力,QQ:1651435

猜你喜欢

转载自blog.csdn.net/weixin_44019016/article/details/85111110