大伙儿晚上今天瞎琢磨了一天，总算把这个 mpx 给跑起来了，顺便记录一下，免得日后忘了。
为啥要搞这个 mpx
话说回来，为啥要折腾 mpx ？也是没办法。之前手头有几个小程序项目，一个是微信的，一个是支付宝的，还有一个百度智能小程序的。你想想，三个平台，代码逻辑差不太多，但就是得维护三套，每次改个小功能，就得同步到三个项目里，简直是头都大了。尤其是那个产品经理，一天一个想法，今天这儿加个按钮，明天那儿改个颜色，我这来回切换，复制粘贴，人都麻了。我就寻思着，有没有啥办法能一套代码跑多个端？ 搜了搜，就看到了这个 mpx，说是滴滴搞的，能跨端，看着还行，那就试试呗。
开始折腾
第一步，那肯定是看文档、装环境。 打开他们官方的文档瞅了瞅，感觉跟 Vue 有点像，都是那种模板、脚本、样式的结构。行，有 Vue 的底子，应该不算太难。然后就是装脚手架，用的是 npm，这个都熟，`npm install -g @mpxjs/cli` 一把梭，装完之后就能用 `mpx create` 来创建项目了。
我先是按照官方的快速上手，建了个最简单的 demo 项目。创建的时候它会问你要支持哪些平台，我就勾了微信、支付宝和 Web，想着先跑通再说。
上手感觉
项目建好后，目录结构瞅着也还算清晰。核心就是那个 `.mpx` 文件，跟 `.vue` 文件一个思路，一个文件里写模板、JS 逻辑和样式。这对我来说挺友好的，不用在好几个文件里跳来跳去。
然后我就试着改了改模板里的一些文字，加了个按钮啥的。数据绑定那块，跟 Vue 也差不多，用的是双大括号 `{{ }}`。事件绑定，微信小程序是 `bindtap`，支付宝是 `onTap`，mpx 里统一用 `@tap`，它会自动转换，这点还挺省心的。写起来确实有种写 Vue 项目的感觉，上手还算快。
接下来就是编译了。mpx 提供了不同的编译命令，比如 `npm run build:wx` 就是编译到微信小程序，`npm run build:ali` 就是编译到支付宝小程序。我先试了下编译到微信，跑起来没啥问题。然后又试了下编译到支付宝，也成功了！当时心里就一阵舒坦，还真行！
遇到的小坎坷
也不是一帆风顺。毕竟是跨端，总会有些平台差异性的问题。
API 调用： 有些平台的 API 可能不太一样。mpx 提供了一些内置的 API 增强，比如 `*`，它会抹平一些差异。但有些特别 специфичные API，还是得自己写条件编译。mpx 支持在 `.mpx` 文件里用特定的注释或者在 JS 里用 `*_MODE` 来判断当前是哪个平台，然后写不同的逻辑。这个一开始没太注意，踩了点小坑。
样式差异： 有些 CSS 在不同小程序端的表现可能会有细微差别。这个就得具体问题具体分析了，有时候也需要用条件编译来写特定的样式覆盖。
组件库： 如果想用一些现成的 UI 组件库，比如 Vant Weapp 这种，mpx 也是支持的，但配置的时候得稍微注意一下，确保能正确转换。我当时引入一个组件库，折腾了好一会儿才搞定路径和转换规则。
这些坎坷都还在可接受范围内，毕竟跨端嘛不可能完美到一点差异都没有。官方文档和社区里也能找到一些解决方案。
成果
折腾了几天，总算是把一个之前的小项目用 mpx 重构了一遍。 现在一套代码，可以同时编译出微信和支付宝两个版本的小程序，Web 端也简单跑了跑，基本功能也 OK。后续如果还要支持其他小程序平台，比如头条、百度什么的，理论上也能比较方便地扩展。
最大的感受就是，维护成本确实降下来了。 以前改个 Bug，要在好几个项目里同步，现在只要在一个地方改完，重新编译一下就行。效率提高了不少，摸鱼的时间也多了点，嘿
如果你也跟我一样，被多端小程序搞得焦头烂额，不妨也试试 mpx 这玩意儿。虽然上手和踩坑也需要点时间，但长远来看，还是挺划算的。今天就先记录到这儿，下次有啥新发现再来分享！
还没有评论，来说两句吧...