微信小程序转其他端小程序实战

背景

公司一直是在用原生来开发微信小程序，完成上线后产品又提出需要百度、头条小程序。技术这边初步考虑有两个方案：
1、直接微信小程序代码转成百度、头条小程序代码；
2、为了方便以后的功能升级，先把微信小程序代码转成uni-app、taro这种支持多端的第三方框架代码后，再编译到百度、头条

直接转换

由于众所周知的原因，不管是百度还是头条，他们的原生开发的组件、api等都和微信小程序及其类似，这也就使得直接转换变得十分方便。

百度后发现微信到头条有专门的工具，安装和使用都很方便
安装

npm i wx2tt -g

使用

wx2tt <微信小程序目录> <头条小程序目录>

不使用转换工具，手工转换的话也还算清晰，主要是以下4步：
1、将 wxml 文件中的 wx: 替换成 tt
2、将 js 文件中的 wx. 替换成 tt.
3、将 wxml 文件后缀改为 ttml
4、将 wxss 文件后缀改为 ttss
转换后导入头条开发工具可以顺利启动。

百度小程序就更简单了，百度开发者工具自带搬家功能，可以直接将微信小程序代码转成百度小程序代码并顺利启动。

当然这些转换工具仅仅是简单的代码层面的转换，实际要使用还是要进行一些调整。虽然百度、头条和微信的规范很类似，还是有一些差别，需要在转换之后详细的测试和调整。目前我们实际测试下来有这些不同和需要调整的地方：
1、列表渲染头条、百度不支持直接使用数字，类似wx:for="{{4}}"这种在微信小程序里是可用的，头条、百度里不可用
2、头条小程序不支持canvas的arcTo方法，虽然文档里是有这个方法的，但是实际使用时会报错：ctx.arcTo is not a function
可能还存在其他问题，需要更详细的测试。另外、涉及到登录、支付等功能也需要后端做相对应的开发。

第三方框架

为了方便以后的功能升级，我们也考虑了使用uni-app、taro这种支持多端的第三方框架。由于已经有了微信端的原生代码，所以使用思路上是像先把微信的原生代码转换成第三方框架的代码后，再编译到百度、头条。
不管是uni-app还是taro都提供了转换方法和工具
uni-app：https://ask.dcloud.net.cn/art...
taro：https://taro-docs.jd.com/taro...

实际转换也是成功完成了，但是转换之后的代码并不能直接使用，要在百度、头条开发者工具里使用的话，还需要再编译一次。编译也很成功，但是编译好之后放到开发者工具之后就报错了，由于编译之后的代码在可读性上变差了很多，基本上没办法定位错误并调整修改。不仅是百度、头条，编译成微信小程序也会报错。
进过实际的操作和对比后，最终决定放弃第三方框架。

结论

经过这次实战，我们这边对于小程序的多端开发，最终的结论就是：在不涉及app开发的前提下，优先微信原生开发后，再使用转换工具转换成其他端代码，不建议使用第三方框架。
不建议使用第三方框架的最主要原因就是第三方开发出来的代码并不能直接使用，需要再编译一次，编译之后的代码可读性变差，基本没有办法调试和修改错误。

后续

没有后续了，公司砍掉了整个项目，我被裁员了