taro小程序使用canvas层级过高按钮点击失效解决方法

taro中使用canvas画板，因为小程序原生组件层级较高，导致交互按钮不可点击。为了解决这个问题，使用了CoverView组件，CoverView组件在使用时需注意到的一些问题也在本文总结一下：

CoverView：
覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 。

• cover-view只支持嵌套cover-view，cover-image，button
• cover-view设置box-shadow无效 （没有找到解决办法）
• cover-view设置径向渐变背景色在调试器显示正常，真机不显示背景色（尽量使用纯色背景）
• cover-view无法设置单边border（利用伪元素，或者是cover-view模拟边框）

以封装简单确认弹框组件为例:

/**
 * 确认弹框组件
 * title: 标题
 * info: 提示文本
 * onOK: 确认回调
 * onCancle: 取消回调
 * okText: 确认文本
 * cancleText: 取消文本
 */

import {Component} from 'react'
import { CoverView } from '@tarojs/components'
import './index.scss'

export default class confirmModal extends Component{
  constructor(props){
    super(props)
  }
  onOK = ()=>{
    this.props.onOK()
  }
  onCancle = ()=>{
    this.props.onCancle()
  }
  render(){
    const{okText='是',cancleText='否'} = this.props
    return(
      <CoverView className='comfirm-modal-wrapper'>
        <CoverView className='comfirm-modal'>
          <CoverView className='comfirm-modal-header'>{this.props.title}</CoverView>
          <CoverView className='comfirm-modal-body'>
            {this.props.info}
          </CoverView>
          <CoverView className='comfirm-modal-footer'> 
            <CoverView className='topborder'></CoverView> 
              <CoverView className='btn' onClick={this.onCancle}>{cancleText}</CoverView> 
            <CoverView className='split'></CoverView> 
              <CoverView className='btn' onClick={this.onOK}>{okText}</CoverView> 
          </CoverView>
        </CoverView>
      </CoverView>
    )
  }
}

//index.scss：
.comfirm-modal-wrapper{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  .comfirm-modal{
    width: 640px;
    height: 336px;
    background: #FFFFFF;
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    .comfirm-modal-header{
      font-size: 34px;
      font-weight: 500;
      color: #000000;
      line-height: 48px; 
      text-align: center;
      margin-top: 64px;
    }
    .comfirm-modal-body{
      max-width: 500px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 34px;
      font-weight: 500;
      color: #ccc;
      line-height: 48px; 
      margin:32px 0;
    }
    .comfirm-modal-footer{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 102px;
      display: flex;
      .btn{
        height: 102px;
        flex: 1;
        text-align: center;
        line-height: 102px;
        font-size: 34px;
        font-weight: 500;
        color: #000000;
        &:last-child{
          color: #547EFF;
        }
      }
      .topborder{
        height: 1px;
        width: 100%;
        position: absolute;
        top: 0;
        background:#ccc;
      }
      .split{
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        height: 100%;
        width: 1px;
        right: 0;
        background:#ccc;
      }
    }
  }
}

置于canvas小程序和html没有太大的差别，taro组件库和小程序官方文档都有详细的介绍，就不在这里多费口舌。真机调试的时候注意一下canvas的宽高，整屏覆盖的话会导致调试按钮无法点击，调试工具栏无法点击。

其他问题，遇到再详细补充。。。