程序与 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 去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。

H5／App／小程序之间的优劣势对比

相较APP：用户现场扫码下载APP太慢，并且国内流量费用昂贵。而在家里提前预想到所有的线下场景不是很符合人类的习惯。

相较公众号;扫描公众号后，要点击一下”关注“，再等待公众号推送对应的消息，或找到对应的菜单项，再点击一次。 也就是说，小程序至少减少了2个需要用户动手的步骤，无疑是好的多的服务体验。;

相较H5：除了加载速度慢、体验较差之外，用户很难再次找到H5的入口、再次进入后需要重新加载是最大的问题。H5页面，往往还需要一个公众号或者APP配合，用户只想买个票，还要关注一个公众号，非常不方便。

H5页面由于无法被单独沉淀用户（无法直接关注），一般都是配合公众号或者APP（html5打包APP）的产品形态

某些平台制作生成的APP（有叮当、小云、opencom等），功能体验、开发速度等介于原生、Html5和小程序之间，取得了一个较好的平衡。并且免除了服务器以及运维人员的成本，非常适合非技术人员的产品首选。

在留存和唤醒上，APP可以常驻内存、通过其他方式唤醒（网页/其他APP）、全屏带图片的通知提醒、弹窗等等多种手段，故更容易提高留存，也更容易唤醒用户。

过多款大型裸跑H5游戏磨合，以及超百家H5研发商的测试与反馈，Layabox的第二代H5引擎LayaAir已趋于稳定。将于4月15日向全行业开发者开放下载。在此之前，Layabox官方网站于3月31日提前公开LayaAir引擎API、LayaAir引擎开发示例源码、LayaAir引擎性能展示DEMO。

H5引擎是游戏的天花板

由于H5浏览器大多数存在性能缺陷，开发者稍加不注意，H5游戏就会出现卡顿等现象，这里有开发者自身的原因，也有引擎的原因。尤其是面对大型游戏，引擎更是游戏的天花板，决定着能不能将游戏设计的更重度一些？能不能把画质搞的更精美一些？

尽管H5行业中引擎众多，但性能存在明显差异，有的引擎甚至不支持高清模式，为了能让游戏跑起来，不惜牺牲掉游戏的画质表现。因此，选择一个性能优秀的引擎，对H5游戏起到非常关键的作用。

即将推出第二代引擎LayaAir

在H5行业中，Layabox是迄今为止唯一拥有重度H5线上游戏的商业级引擎。基于Layabox第一代引擎LayaFlash的重度动作游戏《猎刃2》和MMORPG游戏《醉西游》是真正能媲美APP品质的大型H5游戏。然而Layabox并不止步于此，将于4月15日推出裸跑性能媲美APP的第二代H5引擎LayaAir。

LayaAir引擎的性能展示

本文将为大家展示官网中公布的两个DEMO，更多性能DEMO以及源码，请大家直接登录Layabox官网的开发者中心进行体验与查看。（网址：http://ldc.layabox.com/）

以下测试的硬件环境为市场价499元的红米2A手机，系统为Android4.4.4，浏览器为Chrome 46.0.2490.76。

Tips：

1、FPS是每秒传输帧数(Frames Per Second)，60帧是满帧；

2、FPS后的(3D)表示为WebGL模式渲染，(2D)表示Canvas模式渲染，LayaAir引擎产品在不支持WebGL的浏览器中，会自动切换为Canvas模式。

LayaAir引擎的学习资料

LayaAir支持ActionScript3、JavaScript、TypeScript三种语言开发，方便于各种H5开发者快速上手。正式发布时，LayaAir全面开放学习资源，包括了学习文档、视频教程、在线API、在线示例源码、性能测试展示、问答社区、LayaAir引擎开发者QQ群等，更快捷高效的提供开发者的学习支撑。

在今日，官网提前开放LayaAir引擎的API和示例。丰富的在线示例DEMO还可直接线上编辑与执行，并可生成示例二维码在手机浏览器中快速体验。

Layabox的核心业务

LayaAir引擎

裸跑性能媲美APP的新一代HTML5引擎；

支持Canvas\WebGL模式自动切换；

支持2DD\VR产品开发；

支持使用ActionScript3\TypeScript\JavaScript三种语言开发；

一次开发可同时发布：手游APP、HTML5、Flash页游多端版本。

LayaFlash引擎

兼容Flash原生API，支持将Flash页游\手游快速转换为HTML5游戏。

LayaPlayer运行器

支持各种HTML5项目（含第三方引擎）加速，性能超越APP，运行器已嵌入主流渠道，提供HTML5打包成原生APP工具；

LayaOpen开放平台

一次对接，全渠道发行，超5亿移动设备安装量帮助CP发行，开发者享受80%的发行分成扶持政策

一句话介绍

Layabox解决了HTML5的性能问题和产品来源问题，拥有巨大的HTML5联合发行流量，欢迎各方合作！

喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第一阶段 HTML5

09HTML5 新增标签和属性

1 html5文档类型和字符集

Html的发展历程：

文档类型设定

Document

HTML: sublime输入html:4s

XHTML: sublime输入html:xt

HTML5：sublime输入html：5或者！显示

2 查看手册及其新增标签

常用新标签（需掌握）

W3c手册中文官网：w3school

header：定义文档的页眉 头部

nav：定义导航链接的部分

footer：定义文档或节的页脚 底部

article：定义文章。

section：定义文档中的节（ section区段）

aside：定义其所处内容之外的内容 侧边

datalist：定义选项列表。与 input元素配合使用该元素

Fieldset：可将表单内的相关元素分组，打包

3 datalist标签

有提示的下拉菜单

4 fieldset元素

fieldset元素可将表单内的相关元素分组、打包， 和legend搭配使用

5 HTML5新增 iInput表单（一）

6 HTML5新增 input表单（二）

7 新增占位符焦点多选属性

8 autocomplete属性

输入内容自动记录，方便下次快速输入

autocomplete必须满足两个条件才会起作用，一是必须有提交按钮，二是必须给给他名字，名字是什么无所谓，例如上面“123”

9 内容不能为空和获得焦点属性

required是提示输入内容不能为空

accesskey是一个快捷键属性，如上字母“s”,意思是在页面中按“ctrl+s”可以将光标移至此文本框

10 表单综合案例学生档案

显示效果如下（马赛克不算）：

11 embed引入网上视频

多媒体标签 embed：定义嵌入的内容，embed可以用来插入各种多媒体，格式可以是Mid、Wav、AFF、AU、MP3等等。Url为音频或视频文件及其路径，可以是相对路径或绝对路径

因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解audio和video视频多媒体。

12 播放音频 audio

autoplay是自动播放，controls是显示播放器，Loop是循环次数

每个浏览器的显示样式有所不同，每个浏览器支持的音频格式有所不同

Source可以提供多个音频格式，以便兼容各种浏览器。

13 播放视频 video

跟音频播放用法一样

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

第一阶段HTML5的所有章节都已结束，下篇文章将分享《第二阶段 CSS3》小伙伴们不要错过哟！

?