微信小程序和公众号H5的区别

1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）

　2、实现技术区别（公众号基于H5，小程序基于微信自身开发环境与开发语言）

　3、功能不同（公众号功能围绕信息展示与营销，小程序面向产品与服务）

　4、体验上的差别（公众号 *** 作延时较大，小程序体验接近原生App）

我从前端的视角，为大家分析下微信小程序和HTML5之间的主要区别

第一条是运行环境的不同。

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，大家注意，我这里写的是“非完整的浏览器”，有以下几个原因

小程序的开发过程中会用到HTML5相关的技术(并非全部)

小程序最后的发布上线需要微信审核，微信在不更新自身软件的情况下可以将小程序更新到自身软件内，这就联想到了ReactNative框架,并且已经有开发者在微信小程序的开发工具源码中发现使用了React和NodeWebkit库

官方文档中着重强调了脚本内是无法使用浏览器中常用的window对象和document对象（基于这一点，像zepto/jquery这种 *** 作dom的库就被完全抛弃了）

所以我个人认为，小程序的运行环境很有可能是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

不过由于微信给开发者提供了开发工具，而开发工具中也内置了编程、调试、开发环境、发布于一身，我们也不用再探讨它的最终运行环境了，只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动，让我联想到了苹果给开发者提供的X-CODE开发工具，可以想象微信的“野心”可见一斑

第二条是开发成本的不同。

这里我提出了一个问题，当我们面对一个HTML5web开发需求时，我们需要考虑什么呢？抛去开发工具（vscode、sublimtext、Atom等）不谈，大到前端框架（Angular、react、vue、backbone等）、模块管理工具（Webpack、Browserify等）、任务管理工具（Grunt、Gulp等），小到UI库选择、接口调用工具（ajax、FetchApi等）、浏览器兼容性等都要我们一一考略，再不济用jqery插件写H5，也要在开发过程中去寻找合适的jquery插件来配合项目。尽管这些工具可定制化非常高，并且提高了开发者的开发效率，但我相信项目开发的配置工作已经消耗了不少精力，尽管大部分开发者都有自己的配置模板，但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。

而当我们面对一个微信小程序的开发需求时，我们需要考虑什么呢？微信团队提供了开发者工具，并且规范了开发标准，前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML中尽管全部是自定义标签，但官方文档中都有明确的使用介绍，相信上手应该是非常容易的；WXSS、JSON和JS文件中的写法稍有限制，但整体相差不多。在统一了这些标准之后，作为一个开发者，你会发现，自己只要专注写程序就可以了：

当需要调用后端接口时，调用发起请求API

当需要上传下载时，调用上传下载API

当需要数据缓存时，调用本地存储API

引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用

UI库方面，框架自然带有自家weui库加成

并且在使用这些API时，你不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG，可见微信小程序的开发成本确实相比以往的web开发低很多。

第三条是获取系统级权限的不同。

微信小程序相对于HTML5web应用能获得更多的系统权限，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接，也就是官方宣称的拥有NativeApp的流畅性能，而这一点恰巧是HTML5web应用经常被诟病的地方，这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

第四条便是应用在生产环境的运行流畅度。

这条无论对于用户还是开发者来说，都是最直观的感受。长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立，尽管同样用htmlcssjs去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。

需求：

1、将已开发好的H5页面，嵌入先有的小程序。

2、并且要实现H5支付功能

解决方式 ：web-view

1、 登陆 小程序管理后台

a 如果是公众号 。则进行双向绑定

完成这一步 ，那么基本上就差不多成功了一大半

2、在小程序里面嵌入h5

web-view

文档里面有的东西，就不赘述le~

a在小程序里面定义一个你想要的H5入口

b 新建一个页面，用来放H5的链接

ok~现在已经完成h5的嵌入

3、h5实现支付功能 - 唤醒微信支付

目前只有这种实现方式。等待微信更新 支持小程序的web-view可以唤醒微信支付

总结：

个人见解： 微信内置浏览器， 打开微信公众号H5页面，也可以唤醒微信支付。微信小程序里面web-view相当于小程序的内置浏览器，暂时不支持唤醒微信支付。虽然小程序是在微信里面，但是web-view又和微信内置浏览器不同~ 感觉微信想把小程序独立出来~

以上就是关于微信小程序和公众号H5的区别全部的内容，包括:微信小程序和公众号H5的区别、微信小程序和HTML5之间的联系与区别、微信小程序web-view ， 嵌入H5页面等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！