微信小程序> 原生小程序转H5

原生小程序转H5

浏览量:4096 时间: 来源:会飞的芦苇

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

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

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

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

npm i -g @tarojs/clicnpm 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是主入口文件,其它的跟小程序差不多,代码该在哪儿写就在哪儿写。

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎