Taro + React + Tailwind 开发微信小程序问题汇总(持续更新中...)

搞小程序也有两周了,踩了很多坑,有些问题很难搜索到,在这里记录一下问题和自己的解决方案,希望能帮助到需要的小伙伴~

1. 真机调试报错:Error: module '@babel/runtime/helpers/Arrayincludes.js' is not defined

  • 真机调试模式从 2.0 切换为 1.0 即可解决
  • 要将【转换为 ES5】勾选掉,因为 Taro 通过 webpack 已经将代码编译为 ES5。

2. Taro 中如何使用 weui?

javascript 复制代码
// app.config.ts 
useExtendedLib: { weui: true, }, 
usingComponents: { 'mp-badge': 'weui-miniprogram/badge/badge'...},

3. Taro 动态设置当前页面的标题

4. app.js错误: Error: module 'common.js' is not defined, require args is './common'

  • 偶现,可以先重启 webpack

5. 小程序样式不生效,tailwind 伪类不生效(hover)

6. Error: module 'vendors.js' is not defined

  • 删掉 node_modules 重装

7. fail api scope is not declared in the privacy agreement

8. taro 中配置的 global.d.ts 引入方式不能使用 import,否则因为在头部引用会导致整个 ts 配置文件失效!

  • 正确引入方式:/// <reference types="@tarojs/taro" />。因为在头部错误使用 import 引入类型,导致 declare module '*.png' 不生效

9. object-fit 在小程序中不生效

10. Taro 引入 weui <mp-dialog>其中bindbuttontap按钮点击事件不生效

  • 需要将 bindbuttontap 改成 onButtontap

11. uploadFile:fail createUploadTask:fail url not in domain list

可能有如下原因:

  • uploadFile 合法域名未配置或配置错误
  • 或者是 url 写错(仔细检查一下,我这边就是 url 传错了,忘记添加 baseurl,因为和 get 与 post一起封装的,但是options没有共用)

12. Taro 如何实现手势放缩图片

  • 注意需要配置 scale 才支持放缩
tsx 复制代码
<MovableArea style='height: 200px; width: 200px; background: red;'>
    <MovableView style='height: 50px; width: 50px; background: blue;' direction='all' scale ></MovableView>
</MovableArea>

13. 小程序使用 <mp-dialog> 时弹窗被键盘遮住

  • 配置 input 组件 cursor-spacing 参数,可以指定光标与键盘的距离
相关推荐
andrsted7 小时前
练题簿在线免费刷题:个人备考,从练新题到模拟自测怎么用?
学习·微信小程序·小程序·学习方法·刷题
梦曦i8 小时前
Taro vs uni-app:技术路线与选型真相
uni-app·taro
多客:duokelijie8 小时前
婚恋交友小程序合规梳理:上线运营需要准备哪些资质与许可手续?
后端·mysql·微信小程序·前端框架·uni-app·php·持续部署
创了么OPC1 天前
小程序能收款了,对公户还没开?独立开发者的交付闭环踩坑②
前端·微信小程序
一木 之林1 天前
微信小程序开发全攻略·文章版|05 路由·交互·网络与音乐播放器实战
网络·微信小程序·小程序·交互
niucloud-admin1 天前
NIUCLOUD LITE AI开发文档—模块开发:微信小程序
微信小程序·小程序·notepad++
举个栗子。1 天前
443 条断言全绿,输入框却 9 次提交都不能用:一次关于「假护栏」的复盘
微信小程序·自动化·ai编程
andrsted1 天前
练题簿在线免费刷题:将资料、Word 和 PDF导入小程序练习
学习·微信小程序·小程序·pdf·word·学习方法
txc2 天前
我用 AI 给两个人写了个微信小程序:共享清单、记账和纪念日
微信小程序
考拉讲支付2 天前
母婴亲子服务平台分账架构设计:多场景多方分账与合规清结算实践
大数据·运维·人工智能·微信小程序·架构·微信公众平台