原生小程序转H5

原生小程序转Taro,Taro转多端

这里先讲一下需求，公司之前的小程序是用原生开发的，目前有客户需要同样的H5版本的项目，考虑短时间内开发出一个差不多100个页面左右的H5项目不太现实。所以这里就用到了Taro。

上链接：https://nervjs.github.io/taro/docs/taroize.html

原生小程序转Taro这一步的话还是比较简单的，按文档安装好Taro,npm或者cnpm都可以

npm i -g @tarojs/cli
cnpm i -g @tarojs/cli

然后在小程序项目的根目录运行指令

$ taro convert

如果你小程序里面用到wxParse这个插件，会报错，文档也有写怎么解决报错。按文档中的解决就可以了。

这里讲一点转Taro的调试经验，有报错的文件先拎出来放在一边，因为es5,6语法差异，很多js文件转es6是不支持的，所以会报错，建议是先把所有报错的文件注释，或者改成es6写法再转。我这边是去掉了很多的文件才转成功了的。这里需要自己一步一步调试解决报错，转成功之后根目录多出来一个taroConvert的文件夹这说明已经转Taro成功了，接下来就是运行以及二次开发。

1. 进入taroConvert文件夹(二次开发就在这个文件里面，小程序代码不用管了)，执行命令 npm install 或者cnpm install 先拉取所有依赖。
2. 可以看一下package.json文件的运行命令以及安装的依赖，我这里是要运行H5的，输入命令 npm run dev:h5打开H5开发模式，这个步骤有可能会有个nerv.js不存在的报错，可以安装一下，然后在你文件src下面的的app.js import一下。
   执行命令 import Nerv from 'nervjs'，这个报错就会解决。其它的页面代码报错可以自己调试。开启成功的话浏览器中会打开127.0.0.1:8082的窗口运行项目。

先看下转taro之后的目录文件

这个是根目录，运行开发环境跟打包的命令都在这层执行。

这层就是跟小程序项目文件差不多的了，index.html是主入口文件，其它的跟小程序差不多，代码该在哪儿写就在哪儿写。

下篇再讲二次开发中的坑。