• 13232227726
开发程序员:你为什么要试试MPX?
作者:浪马峰科技 / 2019-09-05 16:09 / 浏览次数:
珠海浪马峰科技是珠海领先的网络公司,借助互联网的力量服务于更多企业,成功帮助众多珠海网站建设、珠海做网站设计、珠海小程序开发、珠海做小程序等!
 
MPX框架是一个强化框架,专注于Didi发起的小型程序开发。本文将从使用角度讨论MPX的优点和优点。
 

MPX 框架 GitHub 地址: https://github.com/didi/mpx

背景
今天,随着小程序越来越热,越来越多的开发人员需要开发小程序。原生小程序的开发有许多不便之处,开发人员需要在许多小程序框架中做出选择。
所以今天,我们想向您介绍一个小程序框架:MPX

优点
建议开发人员考虑使用MPX框架来开发小程序,因为MPX框架具有其他框架所没有的优势。
基于最初的小程序,MPX进行了大量增强,同时确保更少的维修,提供数据响应,模板增强,性能优化,跨平台开发和其他功能,以增强用户的开发体验和效率。
接下来来自本机兼容性 - >第三方组件支持 - >按需构建 - >跨平台编译 - >功能增强 - >独特的性能优势六点逐一讲述。

原生兼容性
MPX与原生完全兼容,并且几乎没有凹坑。渐进式访问很简单。
从语法风格来看,我们可以看到市场上流行的小程序框架基本上是基于Web框架(taro / nanachi  -  react,uniapp / megalo / mpvue  -  vue)或新的(chameleon)/ semi-new( wepy))标准。
使用这些框架,您编写的代码不是一个小程序代码。相反,反应/ vue或另一组代码。而这些代码源代码到小程序代码,需要进行全面的转换,这种转换可能会引入一些未知问题,从而产生一些坑。
同时,随着时间的推移,applet本身将逐渐迭代,制作更多功能特性,并提供更好的组件和方法。一些框架可能受到能量或帧节奏的限制。首先没有办法跟进,甚至框架也在慢慢维护,无法使用。
MPX选择完全接受原生。
 
我们来看个典型的 MPX 组件长什么样。

 
乍一看,它似乎与vue没什么不同。还有一个json区块。模板是applet的标记。
由于这篇文章完全符合微信小程序的原生语法,我们不会做任何转换,所以你在写什么? (如果使用MPX的增强功能,将进行一些必要的转换。稍后,我们还将详细说明如何实现MPX增强。相对而言,我们的转换是轻量级,透明且易于理解的。)
当WeChat推出新功能,新标签和新的生命周期钩子时,使用MPX框架编写的小程序只需要直接使用。
因此,使用MPX框架,您可以轻松地使用自定义组件的关联来获取组件之间的关系,使用wxs来更好地构建页面。
 
MPX几乎支持本机的每个功能。在.mpx文件中,模板部分编写本机applet的模板语法,脚本部分编写本机applet的脚本语法,json部分编写本机applet的配置信息。 。使用MPX,您实际上正在开发小程序。
 
第三方组件库
MPX提供完整的第三方组件库支持
上面说的MPX与原版非常兼容,你能想到什么?是的,它是对第三方组件库的完美支持。
支持第三方组件库的重要性是众所周知的,因此该功能支持大多数此框架。但是支持和完美支持之间仍然存在差异。
根据简单的观察,第三方组件库对taro / mpvue / uniapp的支持是复制形式,类似于微信小程序的原始行为。
 
核心代码见下图:


 
没有用其他框架来引导第三方组件,单纯寻找其他框架似乎没有提供相应的demo,用过的朋友可以比较一下自己。
在MPX中使用第三方组件库只需要像web项目那样安装npm,并且不需要复制文件。然后直接在json中编写包名称并转到node_modules来查找它。结合webpack别名,它可以更简单,更具语义。
 
细心的朋友会发现这个示例代码包含vant组件和iview组件。如果您遵循WeChat规范,这些组件库将通过miniprogram字段指定自己的构建文件生成目录,这将由开发人员工具使用。完全复制到代码的最终版本中,我们将有两个巨大的组件库占用宝贵的空间。
当然,我们希望尽可能多地使用,而不是大脑,以便MPX提供按需报价的能力。
 
而且,组件库目前在小程序平台上只有很少的组件库。如果我使用vant,支付宝和QQ都没有。我该怎么办?也许这就是为什么其他框架不建议使用第三方库的原因。
 
按需引用
通过webpack依赖性分析集合,使用第三方组件库或拆分开发大型项目,MPX可以保证正在构建的代码是要使用的所有代码。
本机applet本身的编译是遍历项目文件夹中的所有JS并将其打包到AMD包中。也就是说,项目文件夹中的所有文件都将被占用和上传,无论它们是否被使用。
同时,本机微信小程序的npm支持基于文件夹复制。第三方包通过声明miniprogram字段指定要复制的文件夹,无论是否使用(template / js / style / picture),都会复制整个程序集。转到项目文件夹。
我们提供@ mpxjs / webpack-plugin插件,它使用webpack生态系统来解析.mpx文件的json部分或本机json文件,以将依赖项添加为新条目。基于依赖项集合,而不是文件遍历。
好处是:如果你喜欢vant按钮,iview的输入框,wux布局,欢迎尝试MPX,这样你就可以同时使用多个UI框架而不必担心应用程序的大小。
同样,面对大型项目,我们可以分成不同的部分,npm包将由不同的团队发送并在主项目中引入。
 
跨小程序平台

MPX的跨平台方法可以将第三方组件库整合到小型程序平台中,同时提供足够的条件编译功能。
在MPX 1.0时代,MPX框架专注于改善微信applet的开发体验。虽然支付宝版本也可用,但代码是完全编写的。
随着越来越多的超级应用程序提供小程序功能,目前至少有5个小系统(微信,支付宝,百度,标题,QQ),如果每个平台都需要维护代码。工程师的数量显然不够,因此跨越小程序平台的能力也是MPX 2.0的主要特征。
我们的跨平台方法是转换。它们都是小程序,语法基本相同,并且在MPX运行时中提供了配置和挂钩之间的差异。
最大的区别是模板上的标签和说明。所以我们实现了一组转换架,然后写了一个转换规则,你可以完成微信applet到支付宝,百度和标题小程序的转换。
使用这种转换模式,用户可以非常方便地了解我们如何将微信applet转换为小型程序平台,如支付宝和百度。而且只要用户有需要,就可以填写小程序的规则来转换其他平台,就可以完成基于小程序编写小程序代码的能力作为标准并进一步转换为其他平台。

结合我们以前对本机applet的支持,我们可以敲出一些不同的东西,例如上面提到的第三方组件库,它跨越了小程序平台。
是的,我们可以帮助您运行在百度支付宝上使用微信编写的ui组件库,并将组件库放在小程序平台上。
那么一定有这样的问题,即使MPX对原版有很强的支持,一些基本功能只在微信平台上,其他平台都没有,MPX转换能够从无到有生根?
当然不是。实际上,这个问题对于所有跨端框架来说都是一个问题,因此跨端的核心问题是如何获得差异。
MPX提供了丰富的条件编译功能,可以使用文件作为维度差异在代码块或代码维度中构建。
而MPX的差异化构建功能也完全基于webpack实现,因此如果上面提到的第三方组件库不存在,例如vant的picker组件使用内联wxs在模板中编写一个名为isSimple的小方法。调用,但百度小程序的过滤脚本不支持此方法的方法(过滤器可以理解为百度小程序的wxs),因为百度的过滤器需要导出对象包装方法。
 
最好的解决方案当然是给vant-weapp一个pr来帮助他们解决这个问题,但是时间可能会慢一点,所以在MPX中,你可以在尝试构建百度applet时使用webpack的别名,它会是首选找到Pick / index.swan.wxml,然后在src下的文件别名,修改第三方包有一些小问题。
 
能力增强
通过数据响应,编译时预处理,它提供计算/监视,完整样式类型绑定,双向数据绑定,动态组件等,方便开发人员更好地开发小程序。
容量增强应该是框架提供的核心和最重要的功能,MPX在这方面确实具有很大的优势,提供了许多有用和增强的功能。其他框架通常基于react / vue。将列出哪些功能不受支持,用户习惯于在编写时,经常在反应结束后使用,这不支持。 MPX是一种原生的applet语法,当我想到MPX具备这种能力时会感到不舒服。
 
列一下 MPX 增强的能力:
模板上增强
样式类名绑定
内联事件传参
动态组件
双向绑定
节点获取 ref
JS 里的增强
数据响应
setData 优化
ES6+
样式上的增强
预处理支持
rpx 转换
JSON 里的增强
packages
分包资源优化
MPX最显着的功能是数据响应,它导出计算/监视和双向数据绑定。此功能类似于Vue,不同之处在于它是MPX中mobx提供的数据响应。
同样是数据响应,我们做了一些不同的优化。
 
性能优势
通过解析模板来抽象访问的数据,以确保提供数据响应能力而不降低性能。
像mpvue / wepy / megalo这样的框架也提供数据响应功能,但数据响应在小程序世界中存在很大问题。微信开发指南明确提到了调用setData的频率和数据量。
响应数据的最基本方法是在数据更改时转到设置数据,这将大大降低小程序的性能。
MPX通过解析模板来抽象相应的渲染函数,并在调用setData发送数据之前执行渲染函数以查找需要发送的数据。
applet开发人员工具的审计面板可帮助用户分析可能需要优化的点。如前所述,MPX在红色框中得到了极大的优化,尤其是红框中的第三个,而不会将未使用的数据从模板发送到渲染层。
只要渲染函数无法执行(控制台中会出现警告提示,底部逻辑将执行完整的setData以确保程序仍能正常运行),MPX开发的applet将永远不必担心关于发送模板的未使用数据。
虽然它只是一个小的TODO MVC示例,但这种优化与应用程序的大小无关,同时您可以尝试另一个小的演示比较。
与目前市场上的许多框架相比,MPX 希望以原生小程序为基础,在原始applet的基础上增强它,并尽可能少地实现尽可能多的容量增强。在改进小程序开发经验的同时,确保由于转换或框架问题而没有太多的维修。
MPX框架的目标用户是对小程序质量有很高要求的开发人员。如果您是原生小程序开发人员,或者厌倦了解决由Web框架DSL语法转换框架引起的一些问题,请尝试使用MPX。帧。
 
本文由珠海浪马峰科技整理编辑,详情链接地址为:
http://lmfkj.cn/a/xwdt/xydt/409.html
【浪马峰业务】网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、微信公众号
如有意向---联系我们
热门栏目
热门资讯

网站建设 成功案例 新闻动态 关于我们 联系我们

备案号:粤ICP备19065969号-3 

公司地址:珠海市香洲区敬业路51号A栋三层3-6室 咨询QQ:2254581916 手机:13232227726 电话:0756-8588358