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