微信小程序与html5网站建设

什么是微信小程序
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，hishop小程序开发认为适合生活服务类线下商铺以及非刚需低频应用的转换。小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。由于小程序不存在入口。

什么是html5
标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

布局不同
html5使用div，article为基本布局元素
微信小程序采用view,block为基本布局元素

html5支持在元素里面加入style标签
微信小程序不支持在元素里面加入style标签，所以有自定义信息都需要采用class样式名形式加入

微信小程序 <include src="footer.wxml"/>引入一个footer页面
html5不支持，如果需要引入另一个网页，需要采用iframe

微信小程序可以直接在<view>基本标签里面绑定数据
html5就不能，需要采用ajax加载

相同之处
<video>，与<audio>视频与音频引入规则是一样的

样式表的不同之处
微信小程序，不支持css3里面一个重要的元素 @media only screen and (max-width: 400){} ，@media only screen标签

其它写法基本与css3一样，也可以定义动画效果
@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}
animation:fadeInRight 1 3s,shake 20s  infinite 3s; 
写法都是一样的
后我们发现，如果你会书写html5+css3，基本可以实现微信小程序的布局