taro 小程序转h5之后报错_记录微信小程序转Taro中遇到的问题

环境

系统：windows

开发工具：微信开发工具RC V1.02.1907301 + vscode

微信基础库版本：2.8.1

Taro：v1.3.15

npm: 6.4.1

node: v8.12.0

微信小程序代码转Taro

这里我使用了一个简单的垃圾答题小程序来尝试，其中使用了自定义组件，以及自定义导航栏，未使用分包等其他特性，确保项目是正常，转换前玩了下，没有任何报错等问题。

在小程序项目目录下执行 `taro convert`

一切都顺利，第一步成功。

在项目目录下会出现一个taroConvert目录，里面为转换后的代码

既然转成taro代码了，那么就可以编译成其他平台小程序了，于是我开始尝试

编译成微信小程序

1.安装依赖:

在taroConvert目录下执行 npm install 我使用的是cnpm

没有报错。

2.编译运行

npm run dev:weapp --watch

出现一个警告 变量冲突

好吧，找到game.js文件，发现全局的index 和 render函数中for循环index冲突了

修改成i，其实这个变量没有用到，是可以直接移除

3.编译成功

再次编译后成功，打开微信开放工具导入项目，注意是导入taroConvert下的dist目录

出现问题

1.regeneratorRuntime is not defined

1.解决方案：

因为代码中使用了async await 语法，需要安装插件来支持

安装 npm install babel-plugin-transform-runtime

在config/index.js中引入插件

2.sitemap.json 未找到

添加到dist文件下，或者移除该配置，我暂时用不上，所以移除了，在app.js下

3.scene 未定义

这个就比较坑了，在componentDidShow下不能获取n对象

只好自己增加onShow生命周期

4.success属性未定义

原因是我在state中定义了questions: {} 而render函数中使用了questions.current.success导致报错，加上默认值即可

控制台终于不红了

5.wxml报错了 style属性出问题了

定位到对应代码

修改后

终于编译成功了

6.app下的属性无法获取,需要放到globalData下

修改后,对应的引用都需要修改

展示正常

7.triggerEvent无效

由于微信自定组件使用了triggerEvent,taro并没有转换成功

自行改成react 的组件通信方式

修改完以上内容，完美运行了。

转H5

报错

转百度小程序

大部分布局都没什么问题，由于没有appid就没有验证是否能正常运行

转支付宝小程序

也是存在很多问题，布局错乱

转RN

编译不能通过

大部分css代码都需要调整

总结

很显然，想要将微信小程序通过转成taro再编译成多端开发坑还是很多，我选择狗带