我是如何实现前端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

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

ECSHOP产品详情页修改商品购买数量并实时更新商品总价的实现与优化
当用户购买产品时,可能有时候不仅仅买一件商品,那么当客户购买多个当前产品时如果能同时显示总价,那么无疑将增加我们网站的亲和度!实现这个办法并不难,就是增加一个即时计算商品总价的js代码,这个网络有一篇 ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
亚马逊跨境电商如何编辑产品详情页亚马逊产品listing优化
产品详情页是买家了解产品的重要途径.也是影响产品转化率的重要因素.今天海熹跨境人才网给大家分享一下关于亚马逊跨境电商产品详情页的优化,亚马逊产品listing优化.一起来了解一下吧. 1:售前关联营销 ...
方维分享系统模板修改，产品详情页note修改
方维分享系统模板修改,产品详情页note修改 note.htm, 一般是用的note_img.htm: --------------------------------评论-------------- ...
淘宝产品详情页上拉加载图片详情效果实现
希望有建议可以一起交流. 不累赘多余语言,看效果图: 代码如下 #import "ViewController.h" #import "UIView+Category.h ...
淘宝产品详情页布局怎么做？大神导航，一个神奇的网站，从此开启大神之路！
不看你一定会后悔! 大神导航,一个神奇的网站,从此开启大神之路! 轻松导航,不仅有最新资讯,还有最近使用记录.常用推荐,方便用户使用!图标精美,良心精美.简易搜索,功能齐全,免费高质量素材任意挑选! ...
se105模板，产品详情页去掉多余的review栏目。
在se105\layout目录中找到catalog .xml,然后查找"eview/product/view/list.phtml". 找到所在位置后,删除: <block ...
淘宝/天猫、拼多多、1688产品详情页API、SKU信息获取展示
为了进行此平台API的调用,首先我们需要做下面几件事情. 1. 获取一个KEY. 2. 参考API文档里的接入方式和示例. 3.查看测试工具是否有需要的接口,响应实例的返回字段是否符合参数要求. 4. ...
淘宝、天猫、1688产品详情页API、DESC、SKU信息获取展示
为了进行此平台API的调用,首先我们需要做下面几件事情. 1. 获取一个KEY. 2. 参考API文档里的接入方式和示例. 3.查看测试工具是否有需要的接口,响应实例的返回字段是否符合参数要求. 4. ...

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

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

最新文章

热门文章