初次体验taro遇到的问题

坑（包括taro和原生小程序）

1. onShareAppMessage，分享参数设置。

   此api需要放在分享按钮父容器内，本次尝试用高阶组件,参考 components/shareContent 和修饰器模式，参考utils/wishShare 封装都不好用，只能放在父容器，导致代码冗余

2. this指向问题，当多层嵌套的时候，taro解析后，this会出现指向性错乱
3. taro没有兼容微信小程序内所有api.

   例如 wx.requestSubscribeMessage

4. video 视频标签，当全屏播放的时候，安卓机全局弹窗不好使，需要把自定义弹窗放在video闭合标签内部

   <Video id='myVideo'>
       <View className="dialog"></View> // 自定义dialog
   </Video>

5. scrollView标签需要设置固定高度，才能执行下拉事件

   解决方案：重新计算scrollView高度

   // 计算 scroll-view 的高度
   computeScrollViewHeight() {
       let _this = this
       // let query = Taro.createSelectorQuery().in(this)
       // query.select('.scrollview').boundingClientRect(function (res) {
       //得到标题的高度
       // let titleHeight = res.height
       //scroll-view的高度 = 屏幕高度- tab高(50) - 10 - 10 - titleHeight
       //获取屏幕可用高度
       let screenHeight = Taro.getSystemInfoSync().windowHeight
       //计算 scroll-view 的高度
       // let scrollHeight = screenHeight
       _this.setState({
       scrollHeight: screenHeight
       })
       // }).exec()
   } 

6. 在组件嵌套的时候，不同的写法，渲染情况不同，可能会出现子组件不渲染的问题

   建议：

   直接使用props，挂载到jsx上面

   使用hooks写法，子组件监听props，更新处理

   class写法，需要在componentWillReceiveProps做更新处理

7. 小程序原生button标签上，不支持解构写法

   例如

   <Button {...props}><Button>

8. 不支持React.forwardRef写法

   可以用hook写法，或者是 ref={(node) => this.modal = node} 获取子组件实例

9. 音频。小程序内，1.6.0版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口

   taro，使用createInnerAudioContext，点击播放的时候，第二次才会好用
   解决方案：

   // 第一次不播放兼容
   function onPlay() {
       AudioContext.play()
       // if (!playFirst) return
       var timer = setTimeout(function () {
           console.log('第一次播放')
           // playFirst = false
           clearTimeout(timer)
           AudioContext.play()
       }, 200)
   }
   

10. 视频加载，安卓机加载缓慢，定位到问题是：视频本身有问题

    解决方案：产品重新对视频进行转码，就可以使用了

总结

流畅有余，兼容不足。