小强博客 - Adolph Blog
  • PC/移动,点击复制功能clipboard.js
  • 京东LOGO去网址,你看懂了吗?
  • 《三十六计》完整版,图文并茂
  • 网警,怎么隔着网络找到你?
  • 怎样寻找高质量的外链资源?
  • 小程序、App、H5之间的区别

    2018-11-26 09:36

    小程序的实现原理

    小程序 与 App 与 H5 之间的区别

    根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览器内核),Android 的 X5 (QQ 浏览器内核),开发时用的 nw.js(C++ 实现的 web 转桌面应用)。

    小程序 与 App 与 H5 之间的区别

    小程序运行时会创建两个线程:View Thread 和 AppService Thread,相互隔离,通过桥接协议 WeixinJsBridage 进行通信(包括 setData 调用、canvas 指令和各种 DOM 事件)。

    下述表格展示了两个线程的区别:

    小程序 与 App 与 H5 之间的区别

    两个线程是通过系统层的 JSBridage 来通信的,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。

    小程序与 App 的区别

    小程序 与 App 与 H5 之间的区别

    运行环境

    原生 App 直接运行在操作系统的单独进程中(在 Android 中还可以开启多进程),而小程序只能运行在微信的进程中。

    开发成本

    原生 App 的开发涉及到 Android/iOS 多个平台、开发工具、开发语言、不同设备的适配等问题;而小程序只需要开发一个就可以在 Android/iOS 等不同平台不同设备上运行。

    原生 App 需要在商店上架(Android 需要上架各种商店);小程序只能在微信平台发布。

    系统权限

    原生 App 调用的是系统资源,也就是说系统提供给开发的的 API 都可以使用;而小程序是基于微信的,小程序所有的功能都受限于微信,也就是说微信给开发者提供 API 才可以使用,不能绕过微信直接使用系统提供的 API。

    原生 App 可以给用户推送消息;小程序不允许主动给用户发送消息,只能回复模版消息 。

    原生 App 有独立的数据库,可以做离线存储;小程序只能存储到 LocalStorage,无法做离线存储。

    原生 App 需要下载,安装包比较大;小程序无需下载,可以通过小程序码等方式通过微信直接打开。

    运行流畅度

    原生 App 运行在操作系统中,所有的原生组件可以直接调用 GPU 进行渲染;而小程序运行在微信的进程中,只能通过 WebView 进行渲染。

    小程序与 H5 的区别

    小程序 与 App 与 H5 之间的区别

    运行环境

    简单来说,小程序是一种应用,运行的环境是微信(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 的大多应用场景被定位在业务逻辑简单、功能单一的原因。

    运行流畅度

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

    小程序多平台互转原理

    小程序 与 App 与 H5 之间的区别

    微信小程序与支付宝小程序有很多相似之处,可以封装两个小程序之间的差异进行转换,从而实现一套逻辑代码运行在两个平台。

    项目目录结构:

    小程序 与 App 与 H5 之间的区别

    API 差异

    小程序 与 App 与 H5 之间的区别

    封装后的 API:

    小程序 与 App 与 H5 之间的区别

    布局差异

    小程序 与 App 与 H5 之间的区别

    可以通过程序进行转换。

    博主简介
    小强博客 - Adolph Blog

    小强哥Adolph

    我有一个梦想,且一直在为它努力!

    1990年人士,8年互联网经验。
    商业服务
  • (1)黑白帽SEO高端外包服务
  • (2)黑白帽SEO高端顾问
  • (3)中大型程序开发
  • (4)中大型数据库优化与开发
  • (5)高端培训(技术 & 思维 & 关门弟子)
  • (6)指定网站入侵扫描 & 安全检测
  • (7)指定服务器入侵扫描 & 安全检测
  • (8)黑灰色项目承接 & 合作 & 顾问
  • (9)开源CMS二次开发与BUG修复
  • (10)开源CMS模版设计开发与仿站
  • (11)小 & 中 & 大型网站从零开发
  • (12)品牌解决方案
  • (13)销量解决方案
  • (14)顾问与培训解决方案
  • 联系方式
  • QQ:97028048
  • 微信:zjkszq1990 & zZ683135
  • E-mail:adolph@timeandevent.com
  • 微博文

      我相信,错过了,仍然有机会补救。

      2019-02-18 17:33:04

      问我这个年过得咋样?你怎么不问问去年呢?

      1

      2019-02-04 10:31:55

      粘人的小妖精。。。

      1

      2019-01-28 15:37:54

      1d1d2fe1fea4328d3fa3964a22287356

      2018-12-07 17:02:32

      有时候,我们真的是无法选择。

      2018-12-05 11:44:36

      ee75005344645cb4a2d8c62cdd14b1f3

      2018-11-29 12:11:24

      wx_camera_1543335310011

      2018-11-28 02:38:07

      有些事。真的需要时间沉淀。急性子,是做不来的

      2018-11-25 07:59:56

      5e6297095fc025542d5a31b1dcf8c7e9

      2018-11-25 02:43:20

      36a2c4f3606e85ee52e9770daf942c37

      2018-11-25 02:07:29

      今天这小饭馆,大厨不在,她的姐姐在,我来了说,小伙子,吃什么呀,我只会炒米饭和煮面条[捂脸][捂脸][捂脸],我以为逗我呢,结果一看其他人,吃的不是炒米饭就是煮面条。。。

      2018-11-09 18:28:23

      1

      睡觉了。。。晚安。

      2018-10-12 00:53:08

      推荐首歌曲,Despacito,不错。。。点我去听听

      2018-10-11 11:52:51

      哈哈哈,小仙女IMG_20180911_154710

      2018-09-14 03:48:22