使用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)这个转换方法，只要是动态在行内样式都需要
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)）
现总结到这，之后慢慢捋一捋思绪，欢迎大家来探讨。
————————————————————————————————————————————————
版权归本网站的作者所有，转载请注明出处，谢谢大家。
