记录Taro1.3.6微信小程序=>抖音（字节）小程序

描述

Taro、React和Ts开发的一个微信小程序现在想成为一个字节小程序。记录迁移过程。

环境

“节点”：“11.13.0”

“@tarojs/taro”：“1.3.6”//有点老了…哈哈

准备

注册一个开发帐户，创建一个项目，并对主体进行身份验证（目前，只有企业才能进行身份验证）。

在开发设置中配置服务器域名（直接从小程序的后台配置中复制）。

下载开发人员工具。

配置内容

添加project.tt。json并更改appID。

编写

将编译命令的：weapp更改为：tt。

当开发工具导入项目时，它会直接导入dist目录，因为IDE会在project.config.json中找到appid。

排序问题

1.编译结果错误

两个页面的“@/components/base”中的导入基已编译为它会导致IDE识别错误，无法运行。事实上，编译weapp时也是如此，但微信小程序的IDE可以正常运行。手动删除：ttcompiled文件中的<；import src=“@/components/Base.wxml”/>之后，项目可以正常运行。

这两页有一个共同点。它们都使用无状态函数组件，如下所示：

公共渲染器（）{

返回(

<查看>

｛this.renderVipDom（）｝

)

}

私有呈现VipDom=（）=>{

return＜查看＞…<；/查看>

}

测试发现这个问题确实是原因。以下是修复过程记录的尝试：

（1） 。尝试将taro版本升级到2.2.13（上述问题无法解决）

仅升级当前项目。首先将节点版本切换到12.10.0，然后执行yarn add-D@tarojs/cli@2.2.13+纱线芋头更新项目2.2.13+纱线添加-D@芋头/mini-runner@2.2.13 。

然后调整配置/索引配置文件（请参阅Taro文档）。

然后执行yarn remove@tarojs/async wait。同时，App Delete导入“@tarojs/async wait”；在tsx文件中；。

然后执行yarn add-D babel-plugin transform runtime+yarn add-D babel-plugin-transform运行时，并按如下方式修改项目的babel配置：

巴贝尔：{

sourceMap:真，

预设：[['env'，｛modules:false｝]]，

插件：[

'传统的转换装饰符'，

'转换类属性'，

'变换对象静止扩散'，

['转换-时间'{

“helpers”：假，

“polyfill”：假，

“再生器”：真，

“moduleName”：“babel运行时”

}]

]

}

由于使用了sass，您还需要Yarn添加-D@tarojs/plugin-sass并在config中进行配置：

插件：[

“@tarojs/plugin-sass”，

“@tarojs/plugin-less”

],

编译后可以自行解决以下问题：

①、is_js插件冲突。

② . 模块化引入的所有scss都未编译，所有样式都无效。

（2） 。研究源代码编译并找出编译错误的原因（可以解决）

我尝试直接删除dist/file中的<；import src=“@/components/Base.wxml”/>，删除后，项目可以运行。所以理论上，只要这段代码没有出现在编译中，就没有问题。对于同一组代码，：weapp编译不是问题。：tt编译导致了这个问题，所以请关注：tt编译逻辑。

首先，找到node_modules/@tarojs/cli/src/build。还有一个构建方法，它是taro包编译的入口。然后顺藤摸瓜找到甜瓜/mini/index>build（）>./mini/page>buildPages（）>../mini/page>builsSinglePage（）>.mini/native>processNativeWxml（）有一个关键字段REG_WXML_IMPORT，他的语句是export const REG_WXML_IMPORT:RegExp=/

而（（regResult=constants_1.REG_WXML_IMPORT.exec（wxmlContent））！=空）{

util_1.printLog（“reference”，“test”，`$｛regResult[2]｝+$｛regResult[3]｝`）//添加了日志代码

importWxmlPathList。推送（regResult[2]| | regResult[3]）；

}

//以下是已编译日志的内容

生成页面逻辑dist/pages/resume/publish/index.js*

引用测试未定义+@/components/Base wxml<<；就是他

生成页面模板dist/pages/resume/publish/index.ttml

重新测试发现，解析的前一个组件WXMLContent已经包含此段落。

./mini/page中有一段：

常量变压器结果=wx变压器({

Code:pageJsContent，//整个页面的内容字符串

SourcePath：pageJs，//原始页面路径，如~/User/git/demo/src/pages/index/index.tsx

SourceDir，//根目录，如~/User/git/demo/src

OutputPath：outputPageJSPath，//输出页面路径，如~/User/git