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