小程序和网页的区别是:1.两者运行环境不同;2.开发成本不同;3.给予用户的体验感不同;4.策略定位不同等。
具体区别分析
区别之一:运行环境不同
网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。而如上文所述,小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等,在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同,所以一些 NPM 的包在小程序中也是无法运行的。
网页开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IE、Chrome、QQ浏览器等,在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中仅需要面对的是两大操作系统 iOS 和 Android 的微信客户端,以及用于辅助开发的小程序开发者工具,小程序中三大运行环境也是有所区别的
运行环境 | 逻辑层 | 渲染层 |
iOS | JavaScriptCore | WKWebView |
安卓 | X5 JSCore | X5浏览器 |
小程序开发者工具 | NWJS |
网页开发者在开发网页的时候,只需要使用到浏览器,并且搭配上一些辅助工具或者编辑器即可,上线并不需要审核,体积规模、运营规范、转发到朋友圈等营销功能也无限制。小程序的开发则有所不同,需要经过申请小程序帐号、安装小程序开发者工具、配置项目、提交审核,严格审核通过后才能上线,上线后运营中,如果违规还有可能会被封号下架。
区别之二:开发成本不同
当开发一个H5微网站时,除了域名服务器备案、服务器开发语言等,我们还需要考虑开发工具环境、前端框架、模块管理工具、任务管理工具、团队协作代码提交工具、组件UI库、接口调用工具、各平台、各品牌的浏览器兼容性等。即使使用jquery插件写,也要在开发过程中去寻找合适的jquery插件来配合项目。尽管这些工具可定制化非常高,并且提高了开发者的开发效率,但我相信项目开发的配置工作已经消耗了不少精力,尽管大部分开发者都有自己的配置模板,但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。
而当我们面对一个微信小程序的开发需求时,我们需要考虑什么呢?微信团队提供了开发者工具,并且规范了开发标准,前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,WXML中尽管全部是自定义标签,但官方文档中都有明确的使用介绍,上手非常容易。甚至开发者可以使用云开发开发微信小程序,弱化后端和运维概念,从此无需搭建服务器,即可使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。在统一了这些标准之后,作为一个开发者,你会发现,自己只要专注写程序逻辑就可以了!
至于调用自家服务器、云开发接口、微信app中的任何原生能力,都有封装好的API可供调用
UI库方面,框架自然带有自家weui库
并且在使用这些API时,你不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG,可见微信小程序的开发成本确实相比以往的web开发低很多。
区别之三:用户体验感不同
H5最大诟病在于页面之间切换会有白屏卡顿现象,频繁在多页面之间来回切换等待时间较长,受网络环境影响,加载图片、音视频耗费流量需要加载时间较多。
小程序虽然本质上任然是网页,但是由于微信小程序运行环境独立,尽管同样用html+css+js去开发,但配合微信的解析器最终渲染出来的是原生组件的调用效果,自然体验上将会更进一步,无白屏卡顿,浏览速度很快,带来流畅的极致体验效果。
区别之四:策略定位不同
从营销传播角度看,H5可以转发至朋友圈这个巨大的流量入口,形成一传十、十传百的网络规模效应,其次,H5网站内容可以被百度搜索到,H5中的图文内容也可以选择复制粘贴出来,而小程序并不符合营销工具的定位,以上说的的功能都做不到,更多是做连接,将人与服务或设备连接,用完即走,无需关注公共号,全程无营销信息推送的工具。