微信电商通：H5场景制作有哪些版式设计技巧？

H5的作用

H5它主要是用于宣传营销，主要是在手机端进行传播；然后电商设计的话其实更偏向于网页设计，比如说像你在淘宝上看的那种商品展示详情页，那个的话其实更像网页，一般三端都可以适配：ipad，手机，电脑都可以正常浏览。

像H5你不去适配的话，基本只能在手机上看，主要是基于手机端的一个营销页面，制作上有专门的工具，我自己用的是意派epub360，专业工具，做H5没问题。

微信电商通没有h5支付功能

1、微信平台申请申请入口。

2、登录微信商户平台-->产品中心-->我的产品-->支付产品-->H5支付。

3、填写参数在微信支付平台成功申请到微信H5支付后，可以通。

H5场景制作有哪些版式设计技巧

在H5场景制作中，可以说是常用，也是必不可少的元素，但在构成元素相同，场景也相同的情况下，版式的好坏就决定了你的H5场景的质量了。那么H5场景制作的版式设计有什么是需要注意的呢?同时又有什么简单的技巧可以运用呢?

怎么在App里正确使用H5页面，你造吗？

用了这么多App，自己也做了App产品，注意到通过web页面在App里的正确应用可以轻松解决很多产品运营方面的问题，总结一下分享给大家。不是什么高技术含量的东西，贻笑大方了。

App里之所以用到web页面，多是因为这个页面上的内容和结构都是属于高频变化的，使用Native App页面来实现的话则需要不断发布新版本才能实现，这一点不现实。而App都是可以调用原生系统浏览器或者集成到App里的浏览服务，因此属于高频变化的内容和结构通过web页面来表现，再通过App来调用web页面就可以轻松解决这个问题了。而且，经过优化专门适配移动端的web界面已经很接近Native App的页面了，很多时候我都压根没有感受出来，也因此web页面在App上被广泛应用。

属于高频变化的内容和结构的页面多来自产品运营，一般包含：运营活动页面/广告/应用内推送消息等。

那，在哪些场景下web页面会在App里被使用呢？

说起App启动页，这是一个 Caodan的故事，因为在大量的App的启动页上已经做起了广告了，而更甚得是，还有App做了两个不一样的启动页连着显示，真挺牛B的[枪毙][枪毙]。启动页作为展示App品牌区域极好的手段，并且优质的启动页内容会不断地在用户内心里加以深化。每天我们看到的App不断变化的启动页内容都是通过web来实现的，很多人都没有感知到那是一个web页面。圣诞节的时候，打开虾米音乐时，启动页内容是带圣诞树带雪一个房子，现在想起来都暖烘烘的。而今年大红的钉钉，支持自定义启动页内容，一直想给团队做一个属于我们自己的很酷的启动页，结果被无限拖延。

[2016/03/01 备注---后来题主通过阅读才发现，启动页的更换并不是通过html的页面来实现，特此勘误，敬请谅解]

App的推送消息从打开方式上来说可以分为两类，类是点击推送消息直接打开指定App页面，比如多数资讯类App(知乎、澎湃等)；第二类是点击推送消息打开一个web页面，再通过点击web页面里的内容模块打开指定的App页面。第二类推送消息在电商类/生活服务类等重运营的App里应用很多。比如图例中的大众点评对KTV商户的一次推送消息，这个推送消息里包含了多家的KTV商户，用户根据自己的喜好点击自己喜欢的KTV商户，进入该KTV商户的店铺详情页面（指定App页面）

这种web在App上的使用方式同上文的推送消息有异曲同工之妙，主要也是应用在重运营的App上，对电商类App的一次营销活动，对音乐类App的一个音乐精选集/音乐人的，通过首页的Banner位打开丰富的内容页面都是一个很好的方式。

这一种使用方式不太常见，但是可以作为App早期开发中过程中的一种替代手段。由于web的开发效率相对App来说会高一些，在App开发的初期为了抢占用户和市场先机而不得不在规定的时间内发布一款功能完整的App时，可以使用这种方式来进行作，基础的核心功能使用Native App页面来实现，一些非核心功能/使用App页面实现起来耗费工时的页面可以使用web页面来实现，这一点在早期的钉钉App版本里应用很多。

调用第三方服务并且涉及到复杂的数据验证处理又必须由第三方来完成时，这种方式是一个比较不错的解决方案，事实上，大量的第三方服务公司也是通过web来提供自己的产品和服务的。支付服务属于这一类范畴的常见应用领域，例如Paypal支付服务，Braintree支付服务，支付宝支付服务等。

当然浏览器这类App的主体就是web页面，我们不再赘言。

这一点涉及到技术领域了，作为一个产品汪对此的了解实在有限，了解到的实现方式有以下两种，使用系统内核浏览服务和使用第三方提供的浏览服务。鹅厂提供了X5浏览服务SDK，号称表现性能优异，在微信里公众号文章使用的就是X5浏览服务。关于这方面更多的知识了解可以用“webview”+"浏览服务"去问问度娘。

希望这篇文字能对你解决问题有所启发。码字这么辛苦，点个赞或者打个赏吧[可爱][可爱]。

2016/12/21 补记：

什么是h5，h5的场景制作工具有哪些?

H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

一些H5场景页面免费制作神器来，排名不分先后！

搜狐快海报

快海报是搜狐快站平台上全新推出的免费H5页面制作工具，作也极为简便易学，完全没有技术要求。采用拖拽式作，属性式设置的模式。一拖一拽，简单配置，所见即所得，一分钟即可学会，三分钟便能完成。还有海量模板即将上线，替换内容即可生成。快海报还支持同一组件的多重动画设置，让画面更丰富更炫酷。和其他一样，搜狐快站海报也是适用于包括活动推广、企业宣传、产品展示、会议组织、预约报名、节日祝福等不同的场景。

体验地址：/

久爱微景秀

久爱微景秀这个平台制作起来非常简单，静态模板和动态模板都有，模板样式丰富，浏览体验不错。有多种动态效果以及交互效果可供选择，多种效果、翻页动画、背景音乐、可统计浏览量，可以获得表单反馈信息。所见即所得的在线实时制作技术，很轻松就可以做出很炫的h5页面。且对于免费用户来说，全部功能都是开放的，可以不受限制地做出自己的动态页面。可以提供定制服务。

体验地址：

口袋通微杂志

口袋通是一个免费的微商平台，其场景海报也是为了其电商功能服务，不过免费得版提供的交互较为简单，没有多样的模板。

体验地址：/

易

编辑器界面比较友好，设计灵活方便，数据统计与表单上也是亮点所在。除了模板较少之外其他的都是相当好。

体验地址：/

epub360意派

这不是奇虎360的，意派的交互功能极为强大，可以说更适合专业的设计师打造的交互设计，动画效果出色，虽然简单傻瓜式的模板不多，但自由度相对较高。不过如果只是制作简单的单页，上手也并不是很复杂。只是免费版作品数量限制为10个，导出有logo。

h5电商用什么框架？

H5的核心优势在于它在不同浏览器之间提供了更理想的互作，使得它成为跨平台移动应用程序开发场景中的一个重要语言选项。许多框架还为PhoneGap和Cordova等解决方案提供支持，这意味着我们可以为各种不同的平台和设备构建动态混合Web应用程序。5种常用H5框架介绍：

1.TwitterBootstrap是一套强大的前端框架，能够利用HTML、CSS以及JaScript快速简单地实现Web应用开发任务。这套框架为开发人员提供一系列极具实用性的功能，具体包括一套12列响应式网格系统、JaScript插件外加HTML元素等等。它还提供一系列可复用组件，从而实现导航、下拉菜单、面包屑导航、排版、提醒以及进度条等功能。

2.GroundworkCSS2是一款响应式HTML5、CSS以及JaScript框架。这套框架拥有一套强大的网格系统外加对应划分功能，足以满足各类台式机、智能手机以及平板设备的需要。其网站还提供数量可观的使用示例及说明文档，足以帮助大家快速实现原型设计以及面向标准网站、电子商务网站以及库等应用场景的布局模板。值得强调的是，这套框架还提供其它一些功能，例如响应式文本以及易于定制特性。

3.QUICKUI是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。

4.SproutCore是一款高人气前端框架，且利用MVC架构规范构建而成。立足于HTML5的强大能力，它允许我们通过高效客户端逻辑与高质量主题特性构建出运行速度出色且具备可扩展能力的Web应用程序。

5.52Framework是一套强大的前端开发框架，其能够充分发挥HTML5、CSS3以及JaScript的可观潜能。这套框架当中捆绑有大量内置功能，具体包括HTML5视频播放器、HTML5表单验证、CSS3属性、网格系统以及HTML5canvas示例等。