微信小程序代码转头条小程序踩坑分享

我们公司的微信小程序代码由于迭代了比较久，应用了很多微信小程序的新特性以及使用webpack，所以用头条的搬家工具转换之后，仍然不能直接运行。主要面临两个问题：1、头条小程序不支持分包，采用流加载；2、头条不支持wxs，并且没有替代品。

为了解决第一个问题我魔改了一位大佬开源的百度小程序搬家工具（头条的搬家工具没开源）。地址：v-wx2toutiao

这个工具主要做了下面4件事：

• 利用头条搬家工具转换api和模版等差异；
• 将分包加入进主包（修改文件位置和app.json）；
• 将ttml、ttss、js、json所涉及到的所有依赖路径进行调整；
• 因为头条小程序ttml中使用include引入模版不会继承作用域，所以将inlude的源代码替换进来；

至于第2个wxs的问题我暂时没有想到比较好的解决方法，只能手动去修改成js。改好这两个问题，基本可以初步跑通。

还有一些其他小坑，在这里提醒一下：

• 没有nextTick，建议用setTimeout代替
• ios 不支持真机调试
• 父元素 catchtouchmove 触发会导致子元素 scroll-view 无法滚动
• [ios] textarea 用在 hidden 判断隐藏，真机显示后不能输入文字
• 组件内不可声明 pageLifetimes
• component 没有 observe
• [iphoneX] 部分有 padding 的 view 会出现溢出，设置 box-sizing: border-box 即可解决，就算全局给 view 标签选择器加 box-sizing: border-box 也没用，必须加在类选择器下。
• [android] 设置自定义导航栏，导航栏标题依然会出现
• [ios] tt.chooseImage 选择图片，不知道出于什么目的，自动会将图片格式转为 jpeg 格式，并且在临时链接加上一些参数后缀，导致我上传七牛失败
• 开发者工具在不同系统里的表现不一样，我遇到都是 mac，同版本的开发者工具，结果对 css !import 的支持却是不一样的。

还想吐槽一下，头条小程序的社区实在是太不用心了，很多开发者的提问连回复都没有。遇到问题，一搜大家都有遇到，就是没有官方回应，心态崩了。