基于taro开发的微信小程序代码适配H5

使用Taro框架开发微信小程序也是考虑可能有多端需要。

npm run build:h5后有如下问题：

1.不要用Image、Text标签作css选择器，这些微信小程序能识别，但h5不能

2.Image标签在转成img时外面包了层div，所以要手动写图片居中

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

3.小程序端苹果手机返回的’ios’，H5返回的’iPhone’

Taro.getSystemInfoSync().platform === 'ios'

4.h5不支持http，全部换成https

5.样式污染

6.h5不支持ScrollView的scrollIntoView属性，我用了ref来兼容

<ScrollView id='scroll-level' className='' scrollY scrollIntoView={this.state.anchor}>
{this.state.levels.map((v,i) => (
<View 
  key={i} 
  id={`stage-${v.level_no}`}
  ref={`stage-${v.level_no}`} 
  className='' 
  onClick={}
>
</View>
)}
</ScrollView>

let max_level_no = 12
let anchor = `stage-${max_level_no}`
this.setState({  
  anchor
},()=>{
  if (process.env.TARO_ENV === 'h5') {
     let offsetTop = this.refs[anchor].vnode.dom.offsetTop;
     document.getElementById('scroll-level').scrollTop = offsetTop;
  }
})

场景是一个类似消消乐的关卡页面，每次进来自动定位到用户当前闯到的那一关，虽然ref设置字符串被弃用了，但其它写法不太会。。