taro 小程序转h5之后报错_taro开发遇到的坑

最新推荐文章于 2022-04-06 15:14:03 发布
最新推荐文章于 2022-04-06 15:14:03 发布
阅读量708 收藏
点赞数
文章标签： taro 小程序转h5之后报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_26798991/article/details/112276083
版权
在将Taro小程序转换为H5过程中遇到了一些问题，包括API的hideLoading和setState在H5环境下的异常行为，以及map操作可能导致的节点错误。在组件层面，Image组件在H5中存在额外包装层，ScrollView的使用需要注意避免高度异常，而hidden属性控制显隐在H5中无效。此外，本地资源引用、数据丢失、字体放大等问题也值得注意。开发限制主要涉及支付宝环境和特定设备的兼容性问题。多端开发差异涉及版本管理和样式设置等。
摘要由CSDN通过智能技术生成

API篇

hideLoading

  • Taro.hideLoading 微信真机上会同时关闭 Taro.showToast

setState

  • 初始化 setState 最佳时机 componentDidMount，在 componentWillMount 的 setState 的回调中再次 setState 在 H5 模式下会失效。（小程序：正常，H5：异常）

map

  • 在 state 挂载的值为空数组的情况下，异步赋值，导致节点异常。（H5：异常，小程序：正常）
map 外层总是用一层组件包裹

组件篇

Image

  • 实际H5实现是有一层包装层

ScrollView

  • ScrollView 容器内第一个元素，慎用 margin-top 撑高度。 会破坏原始定高，导致少量内容却有滚动条。（小程序：异常，H5：正常）
  • 在小程序中默认存在 position: relative;。(H5表现正常)

hidden异常

通过 state 数据控制显隐&#

最低0.47元/天 解锁文章
ScandalRafflesia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
taro 小程序转h5之后报错_初识Taro小程序（一）
weixin_28950415的博客
01-01 462
————☝☝☝————————————————点击上方蓝字 “野九和浪七”关注不迷路 满满的干货喔♥————————————————————————正当移动互联网进入白热化阶段时，以微信小程序为代表的一类“轻应用”异军突起。它们无需下载，使用方便，“用完即走”，同时功能也较为完备，一经推出即得到了各大平台和及用户的热烈追捧。但是问题也随之而来——开发者们要同时维护 Web 端、移动端、...
taro 小程序转h5之后报错_Taro踩坑
weixin_34754795的博客
12-30 1239
小程序转Taro小程序转Taro的时候，会带上一个@withWeapp('page')，这是一个标识，用来表示是从小程序转换过来的，在一次调试的时候报错store undefined,这个错很难发现。clipboard.png往state里面修改任意数据通过this.setState((preState) = > {})设置 这里是设置state里面的对象clipboard.pngthis....
taro 小程序转h5之后报错_使用taro框架将手百小程序转成h5总结
weixin_39953578的博客
12-20 402
前言历时一周，终于成功兼容了h5和小程序，在此使用的taro框架，遇到的问题在此记录一下。一、环境判断使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。因为是一套代码兼容不同容器，所以在有些不兼容的情况下，判断所在环境就成了非常重要的一环，taro框架自带环境判断...
taro 小程序转h5之后报错_原生小程序转H5
weixin_39592240的博客
12-20 196
原生小程序转Taro,Taro转多端这里先讲一下需求，公司之前的小程序是用原生开发的，目前有客户需要同样的H5版本的项目，考虑短时间内开发出一个差不多100个页面左右的H5项目不太现实。所以这里就用到了Taro。上链接：https://nervjs.github.io/taro/docs/taroize.html原生小程序转Taro这一步的话还是比较简单的，按文档安装好Taro,npm或者cnpm...
taro 小程序转h5之后报错_十分钟学会Taro
weixin_39998273的博客
12-03 1023
1.1. 介绍官网开发文档Taro 是一套遵循 React 语法规范的 多端开发 解决方案。由京东的凹凸实验室团队于 2018-09-18 历时 3 个月正式发布。taro 的目标是使用一套代码达到多端统一。多端：微信小程序H5React Native支付宝小程序百度智能小程序快应用 适配中1.2. 注意虽然 Taro 拥有多端编译的能力，但是为了让我们的学习有一条比较完整的路线，本章课...
taro 小程序转h5之后报错_记录微信小程序转Taro中遇到的问题
weixin_39760919的博客
12-20 623
环境系统：windows开发工具：微信开发工具RC V1.02.1907301 + vscode微信基础库版本：2.8.1Taro：v1.3.15npm: 6.4.1node: v8.12.0微信小程序代码转Taro这里我使用了一个简单的垃圾答题小程序来尝试，其中使用了自定义组件，以及自定义导航栏，未使用分包等其他特性，确保项目是正常，转换前玩了下，没有任何报错等问题。在小程序项目目录下执行 `t...
taro 小程序转h5之后报错_使用taro命令(taro convert)转h5碰到的一些问题
weixin_39819671的博客
12-20 442
自v1.2.0开始支持此功能Taro 可以将你的原生微信小程序应用转换为 Taro 代码，进而你可以通过taro build的命令将 Taro 代码转换为对应平台的代码，或者对转换后的 Taro 代码进行用 React 的方式进行二次开发。微信原生小程序转 Taro 的操作非常简单，首先必须安装使用npm i -g @tarojs/cli安装 Taro 命令行工具，其次在命令行中定位到...
taro 小程序转h5之后报错_taro小程序跳转h5页面
weixin_29443363的博客
12-30 898
taro微信小程序跳转h5页面项目架构-tarojs+react+sass+微信开发者工具项目使用taro官网上面的步骤构建起来的项目架构，之后生成微信端的小程序，由于项目与车险有关，需要多个渠道融合在一起，所以避免不了要调用其他端的页面去实现功能，所以涉及到了taro小程序跳转h5的知识小程序跳转需求需求在项目中，有为用户提供了各种快捷服务：“门店查询”、“保单下载”、“电子发票”、"报案理赔"...
Taro 微信小程序 Cannot read property ‘call‘ of undefined报错
qq_43608394的博客
08-12 2372
用Taro微信小程序编译预览的时候，在微信开发工具显示这样的情况，不知道各位遇到没有，今天遇到了，找了好久的问题，最后才发现是自定义组件名称错误，好尴尬。 这两个名称改成一致，就解决了。 ...
android开发小项目实例_Taro 微信小程序开发项目搭建及开发技巧
weixin_39581945的博客
11-25 456
前段时间一直在用 Taro 开发小程序，中间遇到很多坑，也用了很多办法去填 。这里记录下我的 Taro 使用心得，分享给有需要的人。今天这篇文章主要是介绍我整个项目的框架搭建，Taro + React hooks + TS + less 以及开发的一些技巧。01Taro 是什么官方介绍：Taro 是京东开发的一个跨端框架，支持使用 React/Vue等框架开发微信/京东/百度/支付宝...
基于taro开发的微信小程序代码适配H5
xupei_68的博客
03-04 3344
使用Taro框架开发微信小程序也是考虑可能有多端需要。 npm run build:h5后有如下问题： 1.不要用Image、Text标签作css选择器，这些微信小程序能识别，但h5不能 2.Image标签在转成img时外面包了层div，所以要手动写图片居中 display: flex; flex-direction: column; align-items: center; justi...
taro开发中的样式问题
热门推荐
u014663631的博客
03-20 2万+
众所周知，taro是一套遵循 React 语法规范的多端开发解决方案，所以开发的时候离不了组件的思想。所以这里关于样式特别强调一点： 由于编译成 h5 时，一个页面上的众多组件在 h5 中，整体渲染在一个大的 html 文件里面，最终同属于一个页面，因此各个组件里面的样式名称，即className，即使没有相互引用，因为渲染成一个页面的原因，也是会相互影响的，因此各个组件的样式名称不要出现重复相同...
taro，h5小程序图片上传问题
Y4258的博客
04-06 854
今天使用uploadFile时的一个问题，在h5端正常，小程序上报错，如上如所示：上传图片路径有问题，这是需要把上传路径改为全拼 这时候h5会报错，解决办法就是区分h5和小程序
taro跳转到tabBar报错问题
waillyer的博客
05-30 856
{errMsg: “redirectTo:fail can not redirectTo a tabbar page”} 改用解决 Taro.switchTab(option) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 if (res.code === 30000) { Taro.showToast({ title: "登录成功", icon: "success", }); Taro.swit.
taro里的三元运算判断与map循环
TonkatsuMan的博客
05-31 2321
这是在写订单页面时遇到的坑。（if不能用） 当时需要判断订单状态，所以用了三元运算 当时我把map的return给包住了，这样会报出找不到item的错误 // {this.state.list.map((item, i) => { { item.state==0 ...
关于Taro的那些事儿+遇到的一些问题汇总，持续更新ing
04-09 2610
最近一直在接触这个，会把自己学到的和遇到的问题记录下来，不定时更新this taro安装 1、安装脚手架 npm install -g @tarojs/cli 2、初始化项目 taro init 项目名 3、安装依赖 npm install/yarn 4、编译 # yarn $ yarn dev:weapp $ yarn build:weapp # npm script $ npm run dev:weapp $ npm run build:weapp # 仅限全局安装 $ taro build --
Taro笔记
weixin_42719872的博客
05-25 144
首页蒙层广告 tabbar 不能盖住解决方法 if (this.state.isOpenedScreen) { wx.hideTabBar(); //广告打开时隐藏tab } onClose() { wx.showTabBar(); this.setState({ isOpenedScreen: false //广告关闭时显示tab }); } ...
React Native报错undefined is not an object（evaluating ‘_reactnative.propTypes’）解决办法...
weixin_30872337的博客
04-16 1926
原程序是这样写的，然后一直出现错误，找不到PropTypes， importReact,{Component}from'react'; import{ View, Text, Image, TouchableWithoutFeedback, PropTypes, StyleSheet...
Taro 在小程序和H5的踩坑记录
爱吃烧烤的技术渣的博客
05-29 3819
Taro 踩坑记录 1、@taro/cli版本必须跟package.json的版本一致，否则使用Taro.xxx会报「 is not a function 」的错误 例如：「_tarojs_taro__WEBPACK_IMPORTED_MODULE_2___default.a.navigateTo is not a function」 解决方案1：重新按照官网文档初始化项目 解决方案2：package.json 文件引入的 Taro 的版本号改成与 Taro cli 工具的版本号保...
Taro框架初探：搭建小程序开发环境与实践
在小程序开发领域，Taro框架是一个备受瞩目的选择，它允许开发者遵循React的语法规范来实现多端开发，覆盖了微信、支付宝、百度、QQ、头条等多个小程序平台，甚至包括H5和RN。Taro的出现解决了开发者在不同平台间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值