微信小程序和H5有什么区别

微信小程序和H5有什么区别,第1张

程序与H5网站有什么区别?

小程序:

优点:无需下载,不占用内存空间,无需下载,开发成本较低。

缺点:较复杂的功能难以实现,需要在平台APP中打开,数据难以共享,只能通过该平台的账号进行登录。

H5网站:

优点:开发成本通常万元内,能够脱离生态下运行。可以匹配PC+移动端+公众号等全覆盖,有多个入口,用户很容易触达。

缺点:数据需要加载,流畅度不够高。

1从开发成本开,H5与小程序相差无几

2区别①:使用体验体验

小程序与原生APP使用体验相似,数据及使用记录会自动保存,体验非常好,不会因为 *** 作中断而丢失 *** 作数据。

H5网站页面的每次使用都是重新加载,使用体验较差, *** 作如果有中断再回来无法继续 *** 作,需要重新开始。

3区别②:流量获取

小程序自带流量,多达64多个流量入口,无论是搜索还是扫码,以及历史使用记录,都可以快速找到。

H5网站必须依赖我们自己的主动推广,没有任何流量入口,也没有浏览记录,流量获取极其困难。不推广意味着没流量。

4建议:有任何推广需求的用户,都建议做小程序;不需要推广,制作简单展示,则H5也可以考虑。

微信小程序和Web页面有以下联系:

语言技术:微信小程序和Web页面都使用JavaScript等一些常用开发技术,同时微信小程序基于小程序框架进行开发,而Web页面则基于HTML、CSS等相关技术进行开发。

浏览器内核:微信小程序和Web页面都需要通过特定的渲染引擎解析并展示内容。微信小程序使用基于Chrome浏览器的WKWebview内核进行渲染,而Web页面在不同的浏览器中可能采用不同的渲染引擎。

开发工具:微信小程序和Web页面通常使用类似的开发工具来进行开发调试。微信小程序需要使用微信开发者工具进行开发和发布,而Web页面可以使用各种浏览器自带的开发工具或常见的开发工具(如VS Code、Sublime等)来进行开发调试。

网络请求:微信小程序和Web页面都需要通过网络请求获取数据以及进行交互。微信小程序使用内置的wxrequest()等API进行网络请求,而Web页面使用XHR(XML>

尽管微信小程序和Web页面有着以上的联系,但它们也有着一些显著的不同之处,比如微信小程序是在一个封闭的环境下运行,并且具有更高的安全性能,而Web页面则可以直接通过浏览器访问,并且更具可扩展性。

作为前端工程师,从前端的视角,为大家分析下微信小程序和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去开发,但配合微信的解析器最终渲染出来的是原生组件的效果,自然体验上将会更进一步。你可以通过第三方开发商西里奥布科技获取微信小程序。

以上就是关于微信小程序和H5有什么区别全部的内容,包括:微信小程序和H5有什么区别、同一个系统微信小程序和web页面有什么联系吗、微信小程序和HTML5与之间的主要区别等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zz/9506347.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存