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

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

项目脚手架：Taro + TaroUI

问题：

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

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

代码：

<AtInput                
    value={key_word} 
    focus={focus}
    cursor={cursor}
    adjustPosition
    cursorSpacing={150}
    clear
    onChange={this.changeBookName}
/>

结果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属性根本就没有赋到组件上

<AtModal
          isOpened={showAdd}
          ref={modal => (this.addBookModal = modal)}
          className="add_book_modal"
          class="add_book_modal">
          <AtModalContent>
            <View className="add-book-header">
              <Text style={{ textAlign: 'center', fontSize: '26px' }}>书籍信息</Text>
            </View>
            <AtForm>
              <Text>书籍名</Text>
              <AtInput
                value={key_word}
                focus={focus}
                cursor={cursor}
                adjustPosition
                cursorSpacing={150}
                clear
                onChange={this.changeBookName}
              />
              <Text>作者</Text>
              <AtInput clear adjustPosition />
            </AtForm>
          </AtModalContent>
          <AtModalAction>
            <Button style="background-color:#6190E8;color:#fff;border:0;outline:0;" onClick={this.closeModal}>
              取消
            </Button>
            <Button style="background-color:#6190E8;color:#fff;border:0;outline:0;" onClick={this.closeModal}>
              确定
            </Button>
          </AtModalAction>
        </AtModal>

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

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

链接地址

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