Taro开发小程序填坑笔记（一）

mylxsw 发布于2019-08-26 12:23 / 3418人阅读

摘要：太懒了，早就想写这个系列了，知道今天才开始动笔，暂且就从这里开始吧。本该到此就结束了。不过那是不可能的。到此为止问题基本解决了，关于和的问题也提了给的官方团队，链接地址最后，非常感谢团队的耐心解答，真的非常。

太懒了，早就想写这个系列了，知道今天才开始动笔，暂且就从这里开始吧。

项目脚手架：Taro + TaroUI

问题：

TaroUI的Modal弹层在软键盘弹起的时候无法被顶上去，效果图

去群里问了问大佬，建议说给Input的cursorSpacoing大一点的值。

代码：

结果OK了。

本该到此就结束了。不过那是不可能的。有小伙伴肯定发现了，我给的cursorSpacing是定值，在适配机型的时候肯定不合适，所以我们需要拿到Modal的位置信息，Taro文档里给出了拿到组件或DOM实例的api，

Taro.createSelectorQuery()

代码：

const query = Taro.createSelectorQuery()
                      .select(".add_book_modal") 
                      .boundingClientRect();   
   query.exec(res => { console.log(res, "modal"); });

res就是我们能拿到的组件实例信息，但是我在调试的时候打印出来的确实["null"]，

查看wxml发现我的className属性根本就没有赋到组件上

 (this.addBookModal = modal)}
          className="add_book_modal"
          class="add_book_modal">
          
            
              书籍信息
            
            
              书籍名
              
              作者

这是整个Modal组件，可以看到我在Modal上给了一个className，不过无效，后来我又想到TaroUI文档里说如果想要自定义样式的话可以给组件一个class，覆盖组件样式，我就试着给Modal一个class，查看wxml发现组件有这个样式，然后就理所当然的拿到了位置信息。

到此为止问题基本解决了，关于class和className的问题也提了issue给TaroUI的官方团队，

链接地址

最后，非常感谢TaroUI团队的耐心解答，真的非常nice。

GPU云服务器云服务器小程序一站开发开发一款小程序开发小程序程序开发小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108586.html

Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形

摘要：接下来，在支付宝小程序开发者工具中打，不出意外能跑起来一个电商支付宝小程序雏形。地址以上是我这个攻城狮对使用转换原生微信小程序为支付宝小程序的一次微不足道的实践。 showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑开局一张图，故事全靠编↑ 从一个需求说起作为底层的程序猿，哦不，我连猿都算不上，混的好的叫码神，混得一...

gnehc 2019-08-23 14:54 评论0 收藏0
Taro，快速上手教程（一）

摘要：个人所有文章同步到前言最近公司准备开发几款可以在微信小程序端和端同时运行的一套商城，接着就是任务下发喽，但是有一点，时间紧任务重，直接说其他的不管，反正几个星期之内必须上线，头疼。个人所有文章同步到：https://github.com/zhengzhuan... 前言最近公司Boss准备开发几款可以在微信小程序端和H5端同时运行的一套商城，接着就是任务下发喽，但是有一点，时间紧任...

pakolagij 2019-08-23 12:28 评论0 收藏0
Taro 简介

摘要：让人又爱又恨的微信小程序自微信小程序以下简称小程序诞生以来，就伴随着赞誉与争议不断。同时于开发者来说，小程序的生态不断在完善，许多的坑已被踩平，虽然还是存在一些令人诟病的问题，但已经足见微信的诚意了。 Taro 介绍在互联网不断发展的今天，前端程序员们也不断面临着新的挑战，在这个变化多端、不断革新自己的领域，每一年都有新的美好事物在发生。从去年微信小程序的诞生，到今年的逐渐火热，以及...

sixgo 2019-08-23 16:18 评论0 收藏0