精华内容
下载资源
问答
  • 跨平台小程序开发框架是支付宝小程序开发工具内新增的开发模块,阿里云小程序云(https://www.aliyun.com/product/miniappdev)与知名跨平台框架uni-app合作,基于支付宝小程序IDE扩展插件,解决开发者在需要开发跨...

    跨平台小程序开发框架是什么?

    跨平台小程序开发框架是支付宝小程序开发工具内新增的开发模块,阿里云小程序云(https://www.aliyun.com/product/miniappdev)与知名跨平台框架uni-app合作,基于支付宝小程序IDE扩展插件,解决开发者在需要开发跨平台小程序时遇到的不同平台维护不同代码的问题

    image.png

     

    主要提供以下两大功能:

    一、支持生成其他平台的小程序源代码

    利用跨平台插件代码转译能力,在支付宝小程序开发工具内开发的小程序,可直接生成多个平台的小程序源代码,目前主要支持的平台有:支付宝微信百度字节跳动小程序

    image.png

     

    二、支持原生支付宝小程序调试预览

    无需在多个平台的IDE之间来回跳转调试,在支付宝小程序开发工具内,利用跨平台开发框架开发的小程序,支持直接预览、调试、运行、发布支付宝小程序

    image.png

     

    跨平台小程序开发框架适合谁用?

    有跨平台开发小程序需求的开发者

     

    为什么要使用跨平台小程序开发框架?

    跨平台小程序开发框架以提高研发效率、降低研发成本为目标,重点解决以下在跨平台小程序开发时会出现的问题:

    • 代码不一致:因为每个平台之间的差异性,导致每个平台的代码都不一致,一处有问题,多处得修改
    • 代码不可重用:已经封装好的功能模块,无法直接跨平台复用,模块迭代升级更是麻烦,来回拷贝很麻烦
    • 调试操作极繁琐:每个平台代码不同,每个平台运行效果也不同,想要调试最终效果,在多个平台的IDE之间来回操作,效率低不说,俨然是没有感情的IDE操作机器
    • 工作量爆炸:每多支持一个平台,复杂度指数级增长,工作量指数级增长

     

    如果你遇到以上问题,建议使用跨平台小程序开发框架,一次性解决同一个功能,因为平台差异问题,运行在不同小程序平台的源代码都不相同的问题

     

    跨平台小程序开发框架如何使用?

    前提条件

    确保您安装的是最新版本小程序开发者工具。访问这里下载最新版本:https://docs.alipay.com/mini/ide/download

     

    步骤1 创建和配置小程序项目

    image.png

     

    步骤2 安装依赖

    image.png

     

    步骤3 开发小程序

    image.png

     

    步骤4 安装uni-app跨平台开发扩展

    image.png

     

    步骤5 选择需要生成小程序的平台

    image.png

     

    步骤6 开启编译

    image.png

     

    详细使用教程,请查看:跨平台小程序开发使用教程

     

    如何快速开发小程序服务端?

    小程序云面向开发者免费开放了无服务器后端模型小程序Serverless,Serverless让开发者无需关心服务器及底层设施运维,专注于代码逻辑和业务本身,具备极简运维、多端适配、按需使用、弹性扩容等优势,帮助开发者快速部署小程序。

     

    小程序云官方首页:https://www.aliyun.com/product/miniappdev

     

    基于小程序云Serverless与支付宝小程序开发工具的最佳实践:https://developer.aliyun.com/adc/scenario/b34a753aa4654723a04e9fe76a161a04?spm=a2c6h.13788135.J_3257954370.4.4ba85f24KR4QvR

     

    开发者技术支持群

    钉钉搜索35248489,加入阿里云云原生应用研发平台EMAS技术交流群,探讨最新最热门的应用研发技术和实践。(或钉钉扫码加入)

    image.png

    展开全文
  • uni-app 微信小程序 安卓 ios H5 跨平台框架

    uni-app   微信小程序  安卓  ios  H5  跨平台框架

    展开全文
  • uni-app是一个使用Vue.js开发跨平台应用的前端框架。开发者编写一套Vue代码,通过编译便可支持iOS、Android、H5、各家小程序等多个平台。既提供了优秀的开发体验,大幅减少多端开发所带来的上手成本,又利用Vue的...

    uni-app是一个使用Vue.js开发跨平台应用的前端框架。开发者编写一套Vue代码,通过编译便可支持iOS、Android、H5、各家小程序等多个平台。既提供了优秀的开发体验,大幅减少多端开发所带来的上手成本,又利用Vue的特性,自动进行性能上的优化,让开发者专注于业务开发即可。目前uni-app成为了跨端框架Vue阵营的第一选择。

    云仓小程序项目诞生之初,便背负了替鲸灵前端团队探索跨端技术的使命。1年半的uni-app使用中,我们积累了丰富的开发经验,也对uni-app有了较为深刻的认识。通过这篇文章,希望可以让大家对uni-app有新的了解,在项目的技术选型中多一种选择。

     为什么是uni-app

    1.小程序开发痛点

    小程序原生开发和js原生比较类似,存在很多开发的痛点,如:

    • 样式不支持Less/Sass/Stylus

    • 全局状态管理不是响应式

    • 开发者工具比较难用

    • 语法私有化太强,微信、支付宝、百度等小程序,语法类似却不能复用

    • 强制分离成4个文件开发,不利于组件化

    这些痛点导致了开发者开发效率低下,学习成本偏高。最终在业务上使得需求的开发周期变长以及用人成本变高。

    2.选择uni-app

    其实任何一项技术的发展都遵循着这样一条路线,从技术平台确立-到各种轮子产生-到最终迎来各种生态成熟。以前js走的是这样的路线,现在小程序也是。目前市面上针对小程序已经出现了各种好用的框架,比如Vue阵营的mpvue、uni-app,React阵营的taro等。

    为何会选择uni-app作为云仓小程序的开发框架呢?这其实与鲸灵前端团队的技术栈息息相关。团队把Vue作为基本技术栈,因此技术选型时把目光锁定在了mpvue和uni-app上。mpvue不仅在跨端支持的范围上要比uni-app小(只支持小程序和H5),而且对于Vue的语法支持力度也不如uni-app。因此我们选择了uni-app作为自己的开发框架。事实证明我们的选择是正确的,无论从开发效率、性能、开源团队对框架的重视程度上,uni-app都更胜一筹。

    5ae7fdfd510f48c50f3576581ac04b24.png

    3.uni-app带来的好处

    选择uni-app所带来的好处也是显然易见,例如:

    • vue语法,上手成本小

    • 可复用vue丰富生态

    • 支持vscode进行项目开发

    • 自动进行性能优化

    • ...

    这些优点在云仓小程序的开发中最终的体现就是以前我们组前端团队只有5个人的时候,有4人没有小程序开发经验,却仍可以快速接云仓的需求进行开发。因为团队成员对Vue都很熟悉,开发小程序和开发h5并无太大差别。

    除此之外,使用uni-app也天然给云仓小程序预留了一个跨端的能力,以备不时之需。

     uni-app介绍

    提到uni-app只需要记住两个点,第一个就是基于Vue进行开发,第二个就是跨平台,多端发布。

    uni-app语法可归纳为Vue语法加上微信小程序的api和组件规范。例如单文件组件、数据绑定、事件处理使用的是Vue语法,组件标签和JS API使用的是微信小程序的规范。

    跨端方面,除了各家小程序外,iOS、Android和H5都支持。这也是uni-app面对竞品一个很突出的优势。一般竞品只是针对特定的端,比如mpvue针对的是小程序和H5,并没有涉及到iOS和Android。另外uni-app针对跨端项目,专门提供了一个IDE--HBuildX,集成了开发、调试等效果,可以启动各个端的模拟器,可谓跨端神器。

     实现原理

    uni-app是一个使用Vue.js开发跨平台应用的前端框架。那它是怎么做到使用Vue去开发小程序的呢?其实很多跨端框架的方案思路都差不多,都需要编译器加运行时配合实现。

    1.编译 

    Vue开发的时候会有.vue文件,分别由template, script, style组成,而uni-app会通过编译器把上面三部分的代码分别处理编译成小程序所需的4个文件。即Vue template要转成小程序的wxml,js要转成小程序js文件,css也转成对应的样式文件。

    33fe7507c73d8ca4fec87f920e113f2d.png

    2.运行

    小程序的js逻辑层是可以运行大部分的Vue代码的,毕竟Vue大部分代码都是纯粹的JS写的,但这还是不够。因为小程序页面中调用 Page() 方法生成一个 Page 实例,这个是必须的。但是我们写的是Vue,而微信需要Page,该怎么解决呢?

    uni-app会在Page实例化时去调用生成一个Vue实例,这意味着一个小程序页面中,同时存在一个 Vue 的实例和一个小程序的 Page 实例。他们是怎么交换数据的呢?

    先来简略的看一下Vue的核心流程:

    d7e0f8b741b9c41663744ede8b306bbf.png

    黄色部分是template的处理过程。template被编译时,会生成一个ast对象,最终生成render函数。

    蓝色部分是new Vue的过程,Vue 在初始化的时候会对数据 data 做响应式的处理,当有数据发生更新时,会调用 render 函数,创建不同类型的vnode。然后生成虚拟DOM树与上一次的虚拟树作对比,找出最小改动后渲染真实DOM。

    但如果将此Vue的运行流程用在小程序上会有问题。vnode针对的是浏览器的DOM,小程序DOM和浏览器DOM并不是一回事,他们是关联不起来的。因此vnode在小程序环境是没有用的,需要把它干掉。

    如下图所示,小程序最有别于浏览器的特点就是小程序容器并没有提供操作小程序节点的 API 方法。因为小程序的视图层和js逻辑执行层是相互隔离的。因此想改变小程序视图,只能通过setDate这个方法。而uni-app也正是利用了这一点将Vue和小程序融合在了一起。

    51442725e4aeb6f7620cd7596d2a55ca.png

    uni-app真正的核心流程就变成了这样:

    4f1e49007aebfd47c93b610c95e5d625.png

    首先把没用的vnode和浏览器DOM API都去掉,去改造render和patch函数。patch函数中由原本对比两个虚拟树改成对比前后data里面的数据,做最小差量计算,得出最小改动后调用setData方法,去更新视图。

    那现在uni-app的运行流程就变成了:初始化Vue实例和Page实例后,在 Vue 的 mounted 中会把数据同步到小程序的 Page 实例上。当Vue中的数据发生变化时,会触发 Vue 响应式的逻辑执行 render,计算出data里面最小差量的数据后直接调用setData方法修改Page实例的数据,触发小程序视图渲染和更新。

    具体说来就是uni-app把小程序的数据委托给Vue来管理,当数据发生变化,由uni-app runtime将数据同步给小程序,进而小程序进行渲染。那小程序的事件,比如点击事件,也会通过runtime做事件代理,转发到Vue上。而小程序的生命周期,通过代理的方式直接转到Vue中去。

    最终的模式是小程序负责视图,vue负责数据管理。

    85997fea3bbb685a80828d98a650066f.png

    高性能

    小程序的性能也是开发者极为关注的一个问题。uni-app与小程序原生的关系与vue、react和js的关系会有点类似。vue、react流行不仅仅在开发体验上优于原生,更重要的是可以帮开发者自动做性能优化,而作为开发者只需要关注业务逻辑就好了。那uni-app是怎么优化小程序的性能呢?

    1.小程序性能瓶颈

    小程序因为逻辑层和视图层隔离,当逻辑层的数据要传输到视图层时,不能直接传输,而是需要通过一个中介 Native层。Native层需要转换数据,这个过程中传递和阻塞性能消耗是比较大的。该怎么去优化呢,uni-app通过以下两点来优化。第一个是降低频次,尽量不要去调用setData。第二是减少数据量,每次调setData的时候传递的数据量最少。

    d08ac9b2cd46b5bc34c8ddedd4b42826.png

    2.减少频次

    如下图代码所示,在小程序中用setData连续进行4次赋值,场景可能在获取数据之后先把用户的名字改掉,再把年龄改掉等等。小程序会相应的通讯4次,从逻辑层到native层再到视图层,性能消耗会很高。而Vue的代码赋值四次却只进行一次合并以及一次通信,这个利用了Vue自身的nextTick机制做了优化。因此在开发小程序时用Vue,就自动减少了setData的频次。

    ef3112d120f80b141b73b8717e7a5726.png

    3.减少数据量

    如下图代码所示,template里面有两个变量a、b,点击按钮时调用chang函数,来改变数值,一共改变了4个值。在Vue开发框架下,只会传一个值,因为页面只用了a、b两个,这就是依赖收集的过程。cd是没用到的,然后b没有改变。如果这块代码不去手动做优化的话,小程序abcd就直接setData过去。四次值全部传输过去,由小程序的视图层做diff运算,看页面用到了哪个,然后视图发生变化,那些没用到的就丢弃了。虽然视图层没什么压力,但传输层压力就大了,因为数据传输导致页面竞争。

    1414f157877461514743694d9709dfa7.png

    数据传输一个经典的场景就会长列表加载。如下图代码所示,左边代码是在小程序开发中长列表通用的写法。把新的列表数据和旧的列表数据合并成一个数组传输过去。比如有10条数据,下拉加载10条就变成了20条数据,然后setData过去,传输量就是20条数据。但如果现在有200条数据,再下拉10条,传输量就变成了210条。210条几k的数据对小程序的压力是很大的。但如果换一下,变成右边的方式,只是自更新4条,传输了4条数据,这个就是框架做了自动差量计算。

    b80397b434efe2ed64fe246d59c2f504.png

    4.性能测试

    这是网上找来的一份测试各个跨端框架性能的数据。测试方法为从页面空列表开始,通过程序自动触发下拉加载,每次新增20条列表,下拉多次。当列表数据分别到达200、400、600、800、1000条时,计算渲染完成的平均耗时,单位为毫秒。

    ec4980c1f7810e7c3d53519e29191d6b.png

    从测试结果可看出:

    1. 经过开发者手动优化后,小程序原生开发性能是最好的,因为也是用的是增量的数据而不是全量的数据。

    2. uni-app相比小程序原生,性能算是比较接近了的,属于一个数量级;并且随着数据量增加,性能消耗增加也不明显,从438到454,只有16毫秒的变化

    3. 其他框架表现的性能则不太尽如人意,包括没有优化的微信原生开发。

    因此得出的结论是uni-app和经过手动优化的微信原生开发差不多属于第一梯队,没有优化的原生开发和taro2.0属于第二阵营,剩下的属于第三梯队。

    跨端实践

    虽然云仓小程序没有具体的跨端需求,但是我们时刻准备着。以便需求来时,可以迅速响应需求,快速进行跨端实现。以下是我们对于云仓小程序跨端的尝试,将小程序中我的页面进行了H5化,此转换过程只用了30分钟就完成了,非常高效。

    d5c0288cf42b22524cdaffe73bd34fa7.png

     最后

    最后再来讨论一个问题:当小程序项目不需要跨端时,还要使用uni-app吗?

    其实依旧可以选择的。一方面Vue的开发体验会比小程序原生好很多,另一方面uni-app可以自动帮我们做小程序的性能优化。就像js原生和vue或react一样,我们用vue、react开发可以做高性能,用原生js也可以,只不过是哪个方便而已。因此,用小程序的原生开发一定是可以做到高性能的,用uni-app也可以做高性能,剩下的只是开发者觉得哪个更方便的选择问题了。

    以上就是使用uni-app作为云仓小程序开发框架后,我们的一些认识,希望能对你有所启发。

    打个广告:前端分享月

    鲸灵前端技术团队在过去三年以来一直致力于在业务中去发现瓶颈问题,用技术的手段赋能业务,解决业务痛点,提高业务响应速度和质量。其中在中后台大型项目架构、小程序深度性能优化、小程序开发框架和跨端方案、前端应用监控等领域皆做出一些技术沉淀,本次系列分享将会在公众号里一一为大家呈现,后续详情请关注本公众号。

    378796717ab6d03deba96036cc8aa581.png

    展开全文
  • Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架,目前在滴滴公司内部支撑了包括滴滴出行小程序,滴滴出行广场小程序,青桔单车,黑马电单车,小桔养车,小桔加油在内的小程序生态;自去年11月开源以来...

    作者:董宏平 (hiyuki)

    Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架,目前在滴滴公司内部支撑了包括滴滴出行小程序,滴滴出行广场小程序,青桔单车,黑马电单车,小桔养车,小桔加油在内的小程序生态;自去年11月开源以来,Mpx也吸纳了众多外部开发者的加入,基于Mpx开发了开走吧,好免街,花忆等小程序。

    长期以来,Mpx优秀的开发体验和强大的稳定性得到了内外开发者的一致认可和好评,这非常符合Mpx的设计初衷。但是在各大厂商陆续推出自己的小程序平台,且各家的技术标准都不统一的今天,单纯地提高某一个平台的开发体验已经不能满足广大小程序开发者们的诉求,一套代码在多小程序平台运行已经成为一个现实上的刚需。为了解决这个小程序开发的痛点,Mpx发布了2.0版本,适配了目前业内已经发布的所有小程序平台(微信、支付宝、百度、头条、qq),并且提供了直接将现有微信小程序编译输出到其他平台运行的能力。

    Mpx2.0版本新增的主要特性主要包含:

    • 完整支持了目前业内已发布的所有小程序平台(微信,支付宝,百度,qq,头条);
    • Mpx小程序跨平台开发,支持将已有的Mpx微信项目编译输出到其他已支持的小程序平台中运行,点击查看详情
    • 小程序原生组件跨平台编译,支持将已有的微信原生组件编译输出到其他已支持的小程序平台中运行;
    • 深度分包优化,编译过程中进行精准分包资源判断,所有分包only的资源(组件、js、外部样式、外部模板、wxs,图像媒体等)都会精确输出到分包目录中;
    • render函数中完整支持wxs模块,关于render函数点击查看详情
    • 支持了模板引入,内联wxs,自定义tabbar,独立分包,workers,云开发等原生能力,进一步完善原生兼容性。

    同业内主流的小程序跨端框架相比,Mpx更专注于小程序开发本身,在小程序开发中具备以下优势:

    • 基于小程序自身的技术标准进行增强,没有进行过重的DSL转换,开发时遇到的坑会更少;
    • 完全兼容原生小程序技术规范,0成本迁移原生小程序项目;
    • 跨平台开发以跨小程序平台为目标,大部分差异抹平工作在编译阶段进行,大大减少运行时适配层增加的包体积;
    • 支持业内微信小程序组件库(如vant、iView等)直接转换到其他小程序平台运行;
    • 非常重视小程序性能,提供了深度的setData和包体积优化。

    关于Mpx更详细的介绍可以查看官方文档这篇文章

    Github:github.com/didi/mpx

    跨平台开发

    作为2.0版本的核心能力,Mpx的跨平台开发能力允许用户直接将已有小程序项目编译输出到其他已支持的小程序平台中运行。微信小程序作为小程序概念的提出者,有着最广泛的生态覆盖,因此我们优先支持了将微信小程序编译为其他平台小程序的能力。基于这个能力,用户不仅能跨平台编译微信Mpx项目,甚至能够将微信的原生自定义组件也编译到其他小程序平台进行运行,这意味着我们的跨平台项目能够直接使用一些社区内已有的UI组件库生态(如vant、iView等),极大地提高了跨平台开发的适用范围。

    设计理念

    Mpx框架的核心设计理念在于增强,增强是指在小程序已有的原生能力基础上做加法,拓展小程序的开发能力,提高小程序的开发体验和效率。这个设计理念使Mpx给开发者带来了更强的确定性和可预期性,更低的学习上手和调试成本。基于这个理念,Mpx在不同的小程序平台中进行了差异性的增强适配,并参考各个平台的模板指令风格提供了不同的增强模板指令集,让用户在各小程序平台中都可以以增强的方式去最大限度地使用平台自有的原生能力。

    我们在对Mpx提供跨平台能力的支持时也遵循了增强的核心设计理念。简单来讲,Mpx的跨平台能力是在多平台能力的基础上,在编译和运行时增加了一层转换层,将源平台的代码转换为目标平台的代码之后,再按照既有的目标平台的处理逻辑进行增强,同时我们也提供了一套完善的条件编译机制,让用户自行实现少数框架无法转换的部分。

    Mpx跨平台开发流程示意图

    Mpx跨平台能力设计思路明显区别于业内已有的其他小程序跨平台框架,主要差异在于:

    • Mpx以小程序本身的DSL作为基准,而没有使用web框架(React,Vue)的DSL;
    • Mpx主要通过编译和运行时转换的方式处理平台差异,没有提供额外的差异抹平层(基础组件库等)。

    之所以采用这种设计,主要基于以下原因:

    • Mpx主要以跨小程序平台为目标,目前各大小程序平台的技术规范具有一定相似性,绝大部分平台差异能够通过编译和运行时手段抹平,同时省去的差异抹平层也能够进一步减少框架运行时体积;
    • 使用小程序本身的DSL作为基准允许用户直接在已有项目中使用跨平台能力,对于原生小程序项目或组件也能够使用该能力进行跨平台输出;
    • 结合完善的条件编译支持,该方案能够在满足用户跨平台需求的同时仍然允许用户最大限度地使用各个小程序平台提供的能力,完全延续了Mpx增强的核心设计理念。

    使用方法

    Mpx跨平台开发的使用方式非常简单,用户只需在MpxWebpackPlugin创建时传入mode和srcMode参数指定源平台和目标平台,当srcMode和mode不一致时,框架会读取相应的配置对项目进行编译和运行时转换。

    // 微信转支付宝
    new MpxWebpackPlugin({
      // mode指定目标平台,可选值有(wx|ali|swan|qq|tt)
      mode: 'ali',
      // srcMode指定源码平台,默认值同目标平台一致 
      srcMode: 'wx' 
    })
    复制代码

    差异抹平

    目前各大厂商的小程序技术规范在宏观层面上大致保持一致,但是技术细节方面存在很多差异,大致划分为以下几个部分:

    • 模板语法/基础组件差异
    • json配置差异
    • wxs语法差异
    • 页面/组件对象差异
    • api调用差异
    • webview bridge差异

    其中,对于模板语法/基础组件、json配置和wxs中的静态差异,我们主要通过编译手段进行转换处理,对于这部分差异中无法转换的部分会在编译阶段报错指出;而对于页面/组件对象、api调用和webview bridge中js运行时的差异,我们主要通过运行时手段进行处理,对应的无法转换部分也会在运行时中报错指出。

    值得注意的是,我们在跨平台转换中做的工作不仅是对可转换的技术标准进行转换映射,对于一些目标平台中不存在的能力,我们也尽可能地通过编译和运行时手段提供了模拟和支持,最大限度地减少用户在跨平台开发中需要付出的额外工作量。以差异性最大但现实场景也最多的微信转支付宝为例,Mpx模拟提供了许多微信中支持但支付宝中未支持的能力:

    • 组件自定义事件
    • 组件间关系
    • 获取子组件实例
    • observers/property observer
    • 内联wxs
    • 外部样式类

    对于原生自定义组件的跨平台转换,我们会对其进行简单的运行时注入,使其能够使用Mpx框架提供的运行时转换能力。

    条件编译

    对于框架无法抹平的差异部分,会在编译和运行时报错指出,对于这部分错误,我们提供了完善的条件编译机制让用户能够自行编写目标平台的patch进行修复,该能力也能用于实现具有平台差异性的业务逻辑。

    上文中提到Mpx通过读取用户传入的mode和srcMode来决定是否以及如何对项目进行转换,mode和srcMode分别代表整个项目构建的目标平台和源平台,条件编译能够让用户在项目中创建声明了自身平台属性(localSrcMode)的文件和代码块。在项目构建中,框架会优先加载带有localSrcMode声明且localSrcMode与项目目标平台匹配(localSrcMode===mode)的文件和代码块,这部分文件和代码块需要完全依照自身声明的平台标准进行编写,Mpx不会对其进行任何编译和运行时的跨平台转换。

    Mpx提供了三种维度的条件编译,分别是文件维度,区块维度和代码维度,用户可以根据平台差异的覆盖范围灵活选择使用。

    性能优化

    Mpx框架专注于小程序开发,在性能优化方面我们做过很多尝试和努力,主要集中在两个方面:

    • 运行时的setData优化
    • 编译构建时的包体积优化

    setData优化

    数据响应是Mpx运行时增强的核心能力,该能力让用户在小程序开发中能够像Vue中一样使用watch和computed特性,并且用直接赋值的方式操作数据驱动视图更新,而不需要手动调用setData方法,换言之框架接管了小程序中的setData调用。

    通过各大小程序平台的设计原理和性能优化建议可以得知,setData对于小程序的性能表现非常重要,而setData优化的两大方向在于:

    • 尽可能减少setData调用的频次
    • 尽可能减少单次setData传输的数据

    为了实现setData的优化,我们在模板编译过程中对于每个组件的模板都生成了一个渲染函数(render function),该函数模拟模板的渲染逻辑,在每次执行时访问当次渲染所需的数据,并将当次访问过的数据路径记录下来作为函数返回值返回。

    在运行时,框架会在每个组件创建时创建一个render watcher,该watcher追踪渲染函数,当渲染依赖数据发生变更时异步执行渲染函数,在render watcher回调中得到渲染函数返回的数据路径,基于这些路径与上一次的缓存数据进行diff比对,过滤掉未发生变化的数据后得到最小必要数据,最后调用setData将最小必要数据发送到真实的小程序渲染层更新视图。

    基于这个机制,当数据发生变更时,只有当前渲染依赖的那部分数据发生变更才会异步地触发render watcher的执行,而每次执行后也只有实际发生变更的那部分数据会被setData发送到渲染层。这样用户就能自由地根据业务需求来操作数据,无需关注setData的调用优化,框架能够自动进行程序上最优的setData调用,在提升用户开发体验的同时也提升了程序性能。

    在1.x版本中,渲染函数内无法执行wxs的逻辑,对于含有wxs的组件有可能降级到全量设置数据的模式,在2.0版本中,我们将wxs模块转译处理为js可执行的代码后注入到js bundle中,含有wxs的渲染函数也能够正常访问并执行wxs逻辑。

    setData优化示意图

    包体积优化

    类似于运行时对于setData的接管,Mpx在编译阶段接管了项目的资源管理。得益于webpack强大的插件机制,Mpx开发了一个深度定制的webpack插件,基于webpack完成小程序的打包构建工作。用户在使用Mpx开发小程序时可以不受限制地使用npm依赖、最新的es特性和css预处理器等现代web开发能力。与此同时,Mpx在包体积优化上也做了很多工作,让用户专注于业务开发而无需花费过多精力进行包体积管理,我们所做的优化工作如下:

    • 打包构建工作完全基于依赖分析,任何没有被引用的资源都不会出现在dist当中;
    • 对于npm组件和页面的构建也完全基于依赖分析按需打包,不会copy整个miniprogram_dist目录,也不需要执行构建npm,使用体验和包体积均优于微信小程序自身的npm支持方案;
    • 基于webpack提供的能力进行公共模块抽取和代码压缩等优化工作;
    • 完善的分包支持,对所有资源进行从属分析,将所有分包only的资源都输出到分包目录中。

    分包作为微信小程序中优化包体积的核心手段(类似于异步按需加载),Mpx对其进行了完善的支持。为了精确地标记出分包only的资源,我们在构建时将主包和分包的依赖收集步骤拆分开来串行处理,先处理主包,再处理分包。在主包的处理过程中,将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs,图像媒体等)都记录下来,在处理分包时,对分包内引用的非js资源都进行检查,如果被主包引用过则输出到主包中,否则标记为分包only的资源输出到分包目录下。

    对于js模块资源,我们在脚手架中生成的构建配置中提供了辅助函数,便于用户进行分包bundle的配置,经过该配置后,分包only的公用模块会被打入分包bundle输出到分包目录下,其余的公共模块会正常打入主bundle中。

    在跨平台开发中,我们建议用户使用Mpx提供的packages来定义分包,这样在转换到不支持分包的小程序平台时会自动降级为同步包进行处理。

    分包构建示意图

    渐进迁移

    Mpx提供了良好的渐进迁移支持,对于使用原生或其他小程序框架的开发者来说,采用渐进迁移的方式逐步引入Mpx进行开发成本并不大。

    在2.0版本中我们进一步完善了Mpx的原生兼容性,跟进支持了各个小程序平台最新的技术能力,如自定义tabbar,独立分包,分包预加载,workers,云开发等能力,同时补齐了一些1.x版本遗漏的支持。得益于此,对于使用原生小程序开发的开发者来说,迁移Mpx的成本几乎为0,用户只需将对应页面组件的构造函数替换为Mpx提供的createPage/createCompnent,即可使用Mpx提供的各种增强能力。

    对于使用其他框架的开发者,Mpx也提供了局部构建的机制,允许用户将特定的页面和组件单独构建输出为原生组件,用户只需手动或者编写脚本输出的原生组件整合进原有项目中即可。

    未来规划

    作为滴滴公司内部小程序生态的基础设施,我们会对Mpx框架进行长期的维护更新,确保能在第一时间支持各个小程序平台最新的技术特性。与此同时,我们也会进一步完善框架的基础能力,目前已排上日程待支持能力包括:

    • i18n
    • ts支持
    • 单元测试支持

    在跨平台能力方面,我们也会根据社区的反馈和建议,以及小程序的标准化进程,对其进行持续的完善与更新。

    最后,如果你专注小程序开发,关注开发体验和产品性能,那Mpx会是你最好的选择。

    展开全文
  • 跨平台框架选择

    2020-12-30 09:55:06
    目标:找到一个快速上手的,能支持android、ios、H5、微信小程序、支付宝小程序、钉钉的开发框架框架 android ios H5 微信小程序 支付宝小程序 钉钉 跨平台兼容性 上手难度 React Native √ √ × × × ...
  • 编辑 | 王莹Mpx 是一款致力于提高小程序开发体验和效率的增强型小程序框架,目前在滴滴公司内部支撑了包括滴滴出行小程序,滴滴出行广场小程序,青桔单车,黑马电单车,小桔养车,小桔加油在内的小程序生态;...
  • Omi - 前端跨框架跨平台框架

    千次阅读 2019-07-17 15:44:21
    Omi - 前端跨框架跨平台框架 基于 Web Components 并支持 IE8+(omio),小程序(omip) 和 任意前端框架集成 Omi 生态 → Omi 生态学习路线图 基础生态 项目 描述 omi-docs和例子 Omi 官方文档 omim ...
  • Antmove - 小程序跨平台解决方案 (想自学习编程的小伙伴请搜索圈T社区,更多行业相关资讯更有行业相关免费视频教程。完全免费哦!) 小程序开发血泪史 小程序发展初期 框架不稳定 更新频繁 bug 众多 随着微信小...
  • Omi – 前端跨框架跨平台框架 基于 Web Components 并支持 IE8+(omio),小程序(omip) 和 任意前端框架集成 Github star 9.2K+, MIT协议。 特性 框架无关,任何框架可以使用 Omi 自定义元素 提供桌面、移动和...
  • MLN是一个移动跨平台开发框架,让开发者用一套代码编写Android,iOS应用。MLN设计思路贴近原生开发,客户端开发者的经验,可以Swift迁移到MLN上,轻松构建出跨平台移动应用。 专为客户端开发者设计。 增加包体积极...
  • 小程序跨端开发框架的出现 * 通过编写一套代码,实现多个小程序平台运行,典型的有 taro/uniapp 小程序与 web/native(app)融合的技术需求出现 * 因 小程序/web/native 平台差异较大,虽然有许多框架进行了尝试,但...
  • MPX 框架是滴滴出行推出的一款专注小程序开发的增强型框架。本篇文章将从使用角度谈谈 MPX 的优势与好处。如果嫌内容太长,优势部分每个小节都有简单的一句话总结,可以快速阅读。如果想了解更多设计细节,可以阅读...
  • 而利用跨平台开发,能让我们的能力更快的覆盖到 iOS 平台,同时如 ReactNative、Flutter、Weex 等,能够让你逐步接触并熟悉 Web 前端的世界,之后如 uni-app 、myvue 、Chameleon 、taro 等框架还能丰富你的小程序...
  • 为您提供ASP.NET Core 跨平台框架下载,ASP.NET Core是一个开放源代码和跨平台框??架,用于构建基于现代云的互联网连接应用程序,例如Web应用程序,IoT应用程序和移动后端。ASP.NET Core应用程序在.NET Core(一个的...
  • 为您提供ASP.NET Core 跨平台框架下载,ASP.NET Core是一个开放源代码和跨平台框??架,用于构建基于现代云的互联网连接应用程序,例如Web应用程序,IoT应用程序和移动后端。ASP.NET Core应用程序在.NET Core(一个的...
  • 为您提供ASP.NET Core 开源跨平台框架下载,ASP.NET Core是一个开放源代码和跨平台框??架,用于构建基于现代云的互联网连接应用程序,例如Web应用程序,IoT应用程序和移动后端。ASP.NET Core应用程序在.NET Core(一...
  • 为您提供ASP.NET Core 开源跨平台框架下载,ASP.NET Core是一个开放源代码和跨平台框??架,用于构建基于现代云的互联网连接应用程序,例如Web应用程序,IoT应用程序和移动后端。ASP.NET Core应用程序在.NET Core(一...
  • H5跨平台框架比对

    千次阅读 2019-04-11 11:26:17
    跨平台开发框架介绍 前记:现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只...
  • Lang Yang,Airbnb 中国工程经理GojiJS 是什么GojiJS 是由 Airbnb(爱彼迎)开发的小程序前端框架,在公司内部经历近一年的内测,支撑了公司各个平台小程序的业务,最终于2020年06月正式开源。它的目的是让开发者在...
  • 近日,滴滴在 GitHub 上开源了端解决方案 Chameleon,简写 CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的... 面对入口扩张,主端、独立端、微信小程序、支付宝小程序、百度小程序、An...
  • 体验不好过去的跨平台框架在app上的体验并不好。生态不丰富过去的跨平台框架在周边的生态一直不丰富,开发者很难获取更好更多的SDK。uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到...
  • uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。今天,我们来体验uni-app对微信小程序...
  • 虽然工作开发语言已经转到了java,但平时仍会用netcore做一些工具,提升工作效率,但是笔记本换成了Mac,工具只能做成命令行形式,很是痛苦,迫切需要一个.net跨平台的桌面程序解决方案。 为什么选择Avalonia...
  • 前不久,我们写了一篇《uni-app跨平台框架对微信小程序的无障碍支持探索》的文章蔡勇斌:uni-app跨平台框架对微信小程序的无障碍支持探索​zhuanlan.zhihu.com之后有朋友私聊询问,uin-app对移动端和H5的无障碍支持...
  • 它使您可以使用JavaScript,HTML和CSS开发跨平台应用程序。 为什么选择Neutralinojs? 在Electron和NWjs中,您必须安装NodeJ和数百个依赖库。 嵌入式Chromium和Node会产生大量开销,甚至使诸如“ hello world”之类...
  • SwiftGUI是用于编写跨平台GUI应用程序的Swift框架。 演示版 目前支持Linux和MacOS。 要运行演示应用程序,您需要一个,系统上必须存在和OpenGL 3标头。 在Ubuntu上安装SDL2: sudo apt-get install libsdl2-dev ...
  • 为什么小程序无法替代原生开发 为什么Html5无法取代NativeAPP Html5在Android中的应用场景 如何成为一名合格的高级Android程序员 在开始复习知识点前,要确认以下 2 点: 定位 “定位” 是指你要确定自己所处的阶段...
  • 纵观当前的移动跨平台方案,总结一下无外乎三大类:一种是使用原生内置的浏览器加载HTML5的Hybrid技术,采用此方案的主要有Cordova、Ionic和微信小程序;另一种是使用JavaScript开发,然后使用原生组件进行渲染,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,014
精华内容 405
关键字:

小程序跨平台框架