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

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

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

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

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

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

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

[code]Taro.getSystemInfoSync().platform === 'ios'

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

5.样式污染

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

[code]<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设置字符串被弃用了，但其它写法不太会。。