微信小程序和H5区别
字数统计：2.4k字目录
转：
微信小程序开发和h5的区别
小程序 与 App 与 H5 之间的区别
微信小程序和H5区别
规则
| HTML | 微信小程序 |
|---|---|
<div></div> |
<view></view> |
<h1></h1>...<h6></h6> <p></p> <span></span> |
<view></view> |
<i class="icon"></i> |
<icon></icon> |
<input type="text"> |
<input/> |
<input type="checkbox"> |
<checkbox/> |
<input type="radio"> |
<radio/> |
<input type="file"> |
<view bindtab="chooseImage"> |
<a href="#"></a> |
<navigator url="#" redirect></navigator> |
<img src=""> |
<image src=""></image> |
开发注意
- 开发小程序时，每个页面一定要在app.json文件中注册，页面文件夹和其包含的四个文件的名字要保持一致。
- 小程序发起的都是HTTPS网络请求，在开发调试的过程中可以不校验协议和TLS版本，但在实际上线后必须进行HTTPS协议通信。
- 小程序可以进行组件化开发以及数据绑定，所有对于DOM的操作都是基于数据驱动的，并没有直接进行DOM操作的做法，换言之，小程序内没有document对象，原生js和jQuery里的DOM操作思维要舍弃掉。
- 小程序的网络请求wx.request()是不自带Cookies的，这和浏览器上的网络请求不同，因此基于Cookies实现的会话管理不适用于小程序。
- 小程序的脚本文件中，内置对象是page，而非传统浏览器里的window，因此所有基于window对象来写的库(例如jQuery)都不适用于小程序。
- 小程序提供模板功能，模板拥有自己的作用域，它只能使用从data属性传入的数据。
- 每一个页面文件夹下的.json文件是用来写配置项的，如果该页面无需添加相关配置，.json文件也要写上一对大括号（“{ }”），否则会报错。
- 在同一个tab里的页面可以跳转，并且允许携带参数。不同tab的页面之间无法跳转，使用wx.navigateTo()接口会报错。同时，tab之间的跳转可以用wx.switchTab()实现，但是路径后不能带参数。
- 脚本文件里data的数据，在更新的时候要通过this.setData()方法来更新，而不能直接用“=”来做。
- 在组件标签里，可以通过“data-属性值”的方式绑定我们需要的数据，然后在事件内置event对象里进行获取。
- 小程序里也存在事件的冒泡，具体的冒泡事件可以参考官方文档，如果希望事件向上冒泡，则使用bind来绑定事件，若希望阻止事件冒泡，就使用catch来进行事件绑定。
- 小程序支持文件引用，有import和include两种方式，import有作用域，也就是引入的目标文件里import的模板不会被引入；而include等于是将目标文件除以外的整个代码进行引入。
- wx.login()和wx.getUserInfo()是两个独立的接口，前者可以实现用户登录，这个过程是悄无声息的，不需要用户授权，登录后可以拿到用户的openid和session_key；而wx.getUserInfo()可以拿到用户的具体信息，这个过程需要获得用户的授权，开发时也必须考虑用户拒绝授权的场景。
- 目前小程序可以分享给微信好友和微信群，但小程序默认是没有这个功能的，只有在Page里定义了onShareAppMessage事件处理函数，点击小程序右上角才可以看到分享按钮。
- 微信小程序还在不断的成长中，定期会有相关的API修改和增加、以及废弃，开发者需要及时关注每一次重大的版本更新，同时对于一些新出的API要进行兼容处理，考虑兼容的场景，因为某些API只在高版本的微信app里有效。
技术
微信小程序就是微信支持的一种第三方插件，微信向这种第三方插件开放了更多的功能接口，从丰富的界面控制到多种框架，特别合适提供了更多的对移动设备的访问能力。
运行环境
原生 App 直接运行在操作系统的单独进程中（在 Android 中还可以开启多进程），而小程序只能运行在微信的进程中。
开发成本
原生 App 的开发涉及到 Android/iOS 多个平台、开发工具、开发语言、不同设备的适配等问题；而小程序只需要开发一个就可以在 Android/iOS 等不同平台不同设备上运行。
原生 App 需要在商店上架（Android 需要上架各种商店）；小程序只能在微信平台发布。
系统权限
原生 App 调用的是系统资源，也就是说系统提供给开发的的 API 都可以使用；而小程序是基于微信的，小程序所有的功能都受限于微信，也就是说微信给开发者提供 API 才可以使用，不能绕过微信直接使用系统提供的 API。
原生 App 可以给用户推送消息；小程序不允许主动给用户发送消息，只能回复模版消息 。
原生 App 有独立的数据库，可以做离线存储；小程序只能存储到 LocalStorage，无法做离线存储。
原生 App 需要下载，安装包比较大；小程序无需下载，可以通过小程序码等方式通过微信直接打开。
运行流畅度
原生 App 运行在操作系统中，所有的原生组件可以直接调用 GPU 进行渲染；而小程序运行在微信的进程中，只能通过 WebView 进行渲染。
小程序与 H5 的区别
规范
H5是由W3C做的一个开放标准规范，小程序是腾讯自己的封闭规范。
运行环境
简单来说，小程序是一种应用，运行的环境是微信（App）；H5 是一种技术，依附的外壳是是浏览器。
H5 的运行环境是浏览器，包括 WebView，而微信小程序的运行环境并非完整的浏览器，因为小程序的开发过程中只用到一部分H5 技术。
小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对性做了优化，配合自己定义的开发语言标准，提升了小程序的性能。
小程序中无法使用浏览器中常用的 window 对象和 document 对象，H5 可以随意使用。
开发成本
H5 的开发，涉及开发工具（vscode、Atom等）、前端框架（Angular、react等）、模块管理工具（Webpack 、Browserify 等）、任务管理工具（Grunt、Gulp等），还有 UI 库选择、接口调用工具（ajax、Fetch Api等）、浏览器兼容性等等。
尽管这些工具可定制化非常高，大部分开发者也有自己的配置模板，但对于项目中各种外部库的版本迭代、版本升级，这些成本加在一起那就是个不小数目了。
而开发一个微信小程序，由于微信团队提供了开发者工具，并且规范了开发标准，则简单得多。前端常见的 HTML、CSS 变成了微信自定义的 WXML、WXSS，官方文档中都有明确的使用介绍，开发者按照说明专注写程序就可以了。
需要调用后端接口时，调用发起请求API；需要上传下载时，调用上传下载API；需要数据缓存时，调用本地存储API；引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用；UI 库方面，框架带有自家 weui 库加成。
并且在使用这些 API 时，不用考虑浏览器兼容性，不用担心出现 BUG，显而易见微信小程序的开发成本相对低很多。
系统权限
获取到的权限不一样，H5作为一个网页，被封闭在浏览器这个沙箱内。但是微信可以赋予微信小程序更多特殊权限，比如录音，视频，罗盘，扫一扫，模板消息，客服消息，分享等，这些都是和微信无缝衔接的。在微信里，微信小程序毫无疑问要比H5的体验好很多，除了不能支持长按识别二维码外。
而这一点恰巧是 H5 被诟病的地方，这也是 H5 的大多应用场景被定位在业务逻辑简单、功能单一的原因。
运行流畅度
这条无论对于用户还是开发者来说，都是最直观的感受。长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立，尽管同样用 HTML +CSS + JS 去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。
