使用taro命令(taro convert)转h5碰到的一些问题

微信小程序转 Taro

自 v1.2.0 开始支持此功能

Taro 可以将你的原生微信小程序应用转换为 Taro 代码，进而你可以通过 taro build 的命令将 Taro 代码转换为对应平台的代码，或者对转换后的 Taro 代码进行用 React 的方式进行二次开发。

微信原生小程序转 Taro 的操作非常简单，首先必须安装使用 npm i -g @tarojs/cli 安装 Taro 命令行工具，其次在命令行中定位到小程序项目的根目录，根目录中运行：

$ taro convert

即可完成转换。转换后的代码保存在根目录下的 taroConvert 文件夹下。你需要定位到 taroConvert 目录执行 npm install 命令之后就可以使用 taro build 命令编译到对应平台的代码。

具体案例件官方案例https://taro-docs.jd.com/taro/docs/taroize.html

转换完成后需要注意一下几点：

1. 样式问题：

　　在scss文件里，像素单位为px，但是这个值指的是rpx也就是说750px编译成小程序也就是750rpx，但是如果在行内样式就不一样rpx是rpx，px是px，但是h5不支持rpx，因此这里就出现了Taro.pxTransform(750)这个转换方法，只要是动态在行内样式都需要

Taro.pxTransform().

 

2. 页面传参数：

　　这里不在是options了，现在是this.$route.params 相当于是小程序里的 onload里的options

 

3. Image标签问题：

　　小程序的Image转换到h5,taro的组件Image，你在页面查看元素会发现img外面套了一个div还自带了小程序image的样式，这里最脏了需要自己手动修改taro-image的width

 

4.  app.js

　　taro会给app自带config属性，所以建议之前在app加了config属性的统一一件改成conf或者自定义

 

5. swiper组件的坑：

　　转换后查看swiper，因为swiper的第一个子元素必须是swiperItem

 

6. 所有授权（获取用户信息，获取手机号码等）的button按钮：

　　所有授权（获取用户信息，获取手机号码等）的button按钮都需要写两套代码，因为h5不支持onGetUserInfo，onSubmit， open-type="getUserInfo" formType="submit" 等属性，如果写了h5是会刷新页面的

　　这里说一下使用taro-ui，需要配置config文件下的h5属性如下

 

 

7. async:

　Taro 支持使用 async functions 来让开发者获得不错的异步编程体验，开启 async functions 支持需要安装包 @tarojs/async-await

$ yarn add @tarojs/async-await
# 或者使用 npm
$ npm install --save @tarojs/async-await

随后在项目入口文件 app.js 中直接 import ，就可以开始使用 async functions 功能了

// src/app.js
import '@tarojs/async-await'

值得注意的事，使用 @tarojs/async-await 一定要记得按照开发前注意中提示的内容进行操作，否则会出现报错

 

8. block标签：

　　block标签转换会变成 div ，这样会影响flex布局

 

9. 绑定事件:

　　绑定事件都需要手动指向this（即添加.bind(this)）

 

现总结到这，之后慢慢捋一捋思绪，欢迎大家来探讨。

————————————————————————————————————————————————

版权归本网站的作者所有，转载请注明出处，谢谢大家。