微信小程序转 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:

  目前不支持

8. block标签:

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

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

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

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

转载于:https://www.cnblogs.com/xuLessReigns/p/11316599.html

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

  1. taro小程序跳转h5页面

    taro微信小程序跳转h5页面 项目架构-tarojs+react+sass+微信开发者工具 项目使用taro官网上面的步骤构建起来的项目架构,之后生成微信端的小程序,由于项目与车险有关,需要多个渠道 ...

  2. linux找不到convert,Linux命令 ( 5 ) - convert

    Linux命令 ( 5 ) - convert 安装ImageMagick # yum install ImageMagick ImageMagick-devel # convert -version ...

  3. 解决报错:全局安装@tarojs/cli后,使用taro命令报错:无法将“taro”项识别为 cmdlet、函数、脚本文件或可运行的...

    全局安装taro工具:npm install -g @tarojs/cli 查看Taro版本信息:npm info @tarojs/cli 报错原因:没有在电脑中配置taro的环境变量. 解决方法如下 ...

  4. [taro react] 【run dev:h5】 报错 Uncaught ReferenceError: $RefreshSig$ is not defined

    这是一篇踩坑篇,因为目前没有好的文章,所以这边做一个记录. 公司想做多端,我今天有空就准备预习了一下taro 这个框架,谁知刚创建了项目就卡主了,一直提示一个报错: Uncaught Referenc ...

  5. 【taro】taro编译h5报React Refresh runtime should not be included in the production bundle

    当前设备:taro3.4.4 问题原因 React Refresh runtime should not be included in the production bundle 意思是:React刷 ...

  6. Taro+react开发(65):h5全局重置背景样式

    .taro_page{height:100% }.onlineQuetion_body{background: linear-gradient(0deg,#5a70a6,#5c7cc9);height ...

  7. taro 之--taro的安装与创建项目

    安装 Taro 项目基于 node,请确保已具备较新的 node 环境(>=12.0.0),推荐使用 node 版本管理工具 nvm 来管理 node,这样不仅可以很方便地切换 node 版本, ...

  8. 【taro】taro如何打开微信小程序

    1.在项目根目录输入 npm run dev:weapp 最后会出来这么一堆文字 Tips: 预览模式生成的文件较大,设置 NODE_ENV 为 production 可以开启压缩. Example: ...

  9. DOS命令:convert

    convert命令,将 FAT 卷转换成 NTFS(不能转换当前驱动器) convert /? ---查看官方帮助文档对CONVERT的解释说明 FAT是文件配置表(英语:File Allocatio ...

最新文章

  1. python比c语言开发速度快多少倍_Python语言其实很慢,为什么机器学习这种快速算法步骤通常还是用呢?...
  2. matlab根据 2 6,#2.6 应用MATLAB进行模型处理
  3. 几个有用的eclipse插件安装地址
  4. mysql设置ssh连接_ssh修改连接数据库 将mysql改为sql连接
  5. JavaScript学习笔记之 数组方法一 堆栈 和队列
  6. Linux从入门到精通——磁盘与目录的容量(du、df)
  7. Only the original thread that created a view hierarchy can touch its views——Handler的使用
  8. java string replace 重载_关于Java:如何使用replace(char,char)替换字符b的所有实例为空...
  9. SpringMVC+Shiro权限管理
  10. error: reference to non-static member function must be called sort(nums.begin(),nums.end(),cmp1)
  11. 9206 课堂笔记 综合演练 添加数据与非空验证
  12. SQL2000和SQL2005和SQL2008同时安装问题
  13. axios请求中跨域及post请求问题解决方案
  14. 【Spring第四篇】DI注入以及c、p命名空间
  15. python包管理工具pip的使用
  16. IntelliJ IDEA多项目共用一个Tomcat
  17. fltk和glog在mac下的安装与编译
  18. java js页面提示报警声音
  19. 96114198交易失败_通过工行网银向境外汇款提示“96111444,系统错误”,如何处理?...
  20. 图扑软件 | 数字孪生智慧选煤厂

热门文章

  1. mysql 聚合函数内比较运算符_关于常用 MYSQL 聚合函数,其他函数 ,类型转换,运算符 总结...
  2. oracle数据库函数手册,oracle函数大全连载(四)T
  3. 计算机专用英语词汇发音,计算机专用的英语词汇
  4. request如何setParamter
  5. 两种IO模式:Proactor与Reactor模式
  6. jsp整合mybatis案例
  7. mysql5.6安装51cto_MySQL 5.6 for Windows配置安装之解压缩版
  8. redis的redisvCommand的%b
  9. 二叉树遍历(附Java实现代码)
  10. Hadoop使用MultipleOutputs输出多文件或者指定命名