2019高新技术企业

使用uni-app开发小程序,比直接原生开发小程序好在哪里

/ 04-10 当前位置:主页 > 观点资讯 > 行业动态 >
  小程序原生开发有不少槽点:
  
  原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发
  
  微信定义的这套语法,wxml、wxs,以及wx:if等语法,私有化太强。不如正经学vue,学会了全端通用,而不是只为微信小程序
  
  vue生态里有太多周边工具,可以提高开发效率,比如ide、校验器、三方库。。。而微信的开发者工具和专业编辑器相比实在不好用,个性化设置也非常少
  
  作为前端工程师,除了微信小程序,还要开发web、其他小程序甚至App,人们不喜欢来回切换开发工具和变更语法思考方式。
  
  uni-app自然可以解决这些问题,但开发者又经常有些顾虑:
  
  怕使用uni-app后,微信小程序里有的功能无法实现,受制于uni-app的更新
  
  怕性能不如原生WXML
  
  怕框架不成熟,跳到坑里
  
  担心社区生态不完善
  
  本文从开发者关心的功能、性能、学习门槛、开发体验、生态、可扩展性等维度,逐个分析对比,给予说明。
  
  1.功能实现
  
  开发者最常问的问题:如果小程序迭代升级,新增了一批API,但uni-app框架未及时更新,该怎么办?
  
  其实这是误解,uni-app不限制底层API 调用;在小程序端,uni-app支持直接编写微信原生代码。
  
  类比传统web开发,如果vue、react等框架的使用,造成开发者无法操作浏览器提供的所有api,那这样的框架肯定是不成熟的。小程序开发也一样,uni-app框架中,同样可调用微信提供的所有原生代码。
  
  故如果存在某些API(平台特有或新增API),uni-app尚未封装,开发者可直接在uni-app中编写微信原生API,即wx.开头的各种API。
  
  2. 性能体验
  
  开发者常问的第二个问题:三方框架,内部大多做了层层封装,这些封装是否会增加运行负载,导致性能下降?
  
  同样是多虑了,uni-app不会导致性能下载,甚至对很多环节做了自动优化,很多场景下性能体验比微信原生开发更好。
  
  类似使用vue.js开发web,不但不会造成性能比原生js差,反而由于虚拟dom和差量更新技术的运用,在大多数场景下,比开发者手动写代码操作dom的性能还好。
  
  小程序中需要频繁的写setData代码来更新数据,这里很重要的就是差量数据更新。如果不做差量,代码性能不好,如果每处逻辑都判断差量数据更新,那代码写起来太麻烦了。
  
  使用uni-app,底层自动差量数据更新,简单而高性能。
  
  我们从优化理论、实测数据两个维度来仔细说明。
  
  2.1 理论:框架优化方案
  
  为提高性能体验,小程序从架构设计层面做了很多工作: - 逻辑层、视图层分离,避免JS运算阻塞视图渲染 - 单独定义组件标签(wxml),减少DOM复杂度 - 精简样式(wxss),提升渲染性能 - 复杂组件原生化(video/map等),解决web组件的功能/体验缺失
  
  通过这些规范约束,大幅提升了小程序的整体性能体验,但依然存在不少性能坑点,其中以setData最为频繁普遍。
  
  这里引用微信官方的描述,简单介绍一下setData背后的工作原理:
  
  小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。
  
  4.学习门槛、开发体验
  
  首先微信原生的开发语法,既像React ,又像Vue,有点不伦不类,对于开发者来说,等于又要学习一套新的语法,大幅提升了学习成本,这一直被大家所诟病。
  
  uni-app则对开发者更为友好,简单来说是 vue的语法 + 小程序的api。
  
  它遵循Vue.js语法规范,组件和API遵循微信小程序命名,这些都属于通用技术栈,学习它们是前端必备技能,uni-app没有太多额外学习成本。
  
  有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app 。
  
  没学过vue的同学,也不用掌握vue的全部,只需了解vue基础语法、数据绑定、列表渲染、组件等,其他如路由、loader、cli、node.js、webpack并不需要学。
  
  因为HBuilderX工具搭配uni-app可以免终端开发,可视化创建项目、可视化安装组件和扩展编译器,也就是uni-app的学习门槛,比web开发的vue.js还低。
  
  开发体验层面,微信原生开发相比uni-app有较大差距,主要体现在:
  
  更为强大的组件化开发能力:vue的组件开发比小程序自定义组件开发的体验要好很多
  
  应用状态管理:uni-app支持vuex
  
  使用 Sass 等 CSS 预处理器
  
  完整的 ES Next 语法支持
  
  自定义构建策略
  
  开发工具维度,差距更大: - 微信开发者工具被吐槽无数 - uni-app的出品公司,同时也是HBuilder的出品公司,DCloud.io。HBuilder/HBuilderX系列是四大主流前端开发工具(可对比百度指数),其为uni-app做了很多优化,故uni-app的开发效率、易用性非微信原生开发可及。
  
  这里可以输出一个结论:如果你需要工程化能力,那就直接忘了微信原生开发吧。
回到首页

扫一扫,微信咨询

请留下需求和联系方式,我们即刻为您准备方案

提交成功

免费服务热线18706176160

扫一扫,微信咨询