api篇
- showActionSheet的success 返回参数在微信为tapIndex，支付宝为index，可做兼容处理：
let tapIndex = res && (res.tapIndex || res.index);
-
showModal在不传cancelText时，支付宝的取消按钮会显示undefined，因此每次使用带取消按钮的模态弹窗时，都应该传cancelText。
补充：showModal的另外一个坑：success回调里，按确认按钮的话，res.confirm为true;按取消则res.confirm为false。不会有res.cancel！！！ - requestPayment不兼容支付宝，支付宝支付用my.tradePay，同时需要注意：支付宝用户取消支付时，是进success回调！！！可以通过res.resultCode得知用户取消了支付：
// 用户取消了支付
if (res.resultCode === '6001')
- login不兼容支付宝，支付宝登录用my.getAuthCode，详见支付宝小程序文档。
- 支付宝授权，获取手机号之类的也是跟微信不同的，详见支付宝小程序文档。
- createSelectorQuery在支付宝里需要在in()方法里传上下文：
// weapp
Taro.createSelectorQuery()
// alipay
Taro.createSelectorQuery().in(this.$scope)
样式篇
- 组件样式中的externalClasses对支付宝无效，如：custom-class，笔者的解决方案是：开启addGlobalClass，但是这样存在外部样式无意间污染组件样式的风险，现实情况也确实发生了。我的reset.scss覆盖了所有的组件样式：
// reset.scss
view,
text {
font-size: 28px;
font-weight: 500;
line-height: 1;
}
// demo.js
render() {
return (
<View className='demo'>
<Text className='demo__text'>demo</Text>
</View>
)
}
// demo.scss
.demo__text {
line-height: 1.5;
}
这种情况在支付宝生效的样式是line-height: 1而不是line-height: 1.5，这就是全局样式污染了，我的解决方案是：增加css权重
// demo.js
render() {
return (
<View className='demo'>
<Text className='demo__text weighted1'>demo</Text>
</View>
)
}
// demo.scss
.demo__text.weighted1 {
line-height: 1.5;
}
这样，line-height: 1.5就生效了。
- 外部自定义样式给组件使用，我们可以传className作为props给组件，当然addGlobalClass是要开启的：（注意：addGlobalClass 这个 API 只对 Page 上的 class 起作用。）
// 组件Comp
import classNames from 'classnames'
render() {
return (
<View className={classNames('comp', this.props.className)}>
hello world
</View>
)
}
// 页面
render() {
return <Comp className='hello' />
}
/* 页面.scss */
.hello.comp {
color: red;
}
- 按钮默认样式支付宝与微信不同，为了与微信统一，需要添加：
.my-button {
margin-left: auto;
margin-right: auto;
border-radius: 10px;
padding-left: 28px;
padding-right: 28px;
line-height: 2.55555556;
border: 0;
}
- z-index负值在支付宝上表现不佳，通常，我们会把背景div设置z-index为负值来防止覆盖主内容，然而在支付宝中背景div直接就看不到了，汗-_-||。目前我的解决方案是：主内容div设置z-index值（任意值），背景div不设置z-index来解决。
组件篇
-
label 官方原话
label.png
所以还想用label绑定button的同学可以洗洗睡了，改回button布局吧。
- navigator 支付宝navigator不能绑定点击事件，所以改用view，至于想要有hoverClass的效果，可以参考以下代码：
<View hoverClass='navigator-hover-class'>click me</View>
.navigator-hover-class {
background: #EDEDED;
}
- button 如果自己项目的按钮没有点击态的话，记得设置hoverClass='none'，否则在支付宝点击按钮时可能巨丑无比。
额外注意
使用分包需要注意，小程序无问题，到了支付宝就无法跳转分包路径了，真是巨坑！
目前我的解决方案是定制不同的app.json（即支付宝不使用分包），定制不同app.json参考Taro文档（2.x关于分包的似乎找不到了），但是没有关西，下面上示例代码：
// app.js
class App extends Component {
config = {
pages: preval`
module.exports=(function() {
if (process.env.TARO_ENV === 'weapp') {
return [
'pages/index/index'
]
}
return [
'pages/index/index',
'pages/my/index',
]
})()
`,
subpackages: preval`
module.exports=(function() {
if (process.env.TARO_ENV === 'weapp') {
return [
{
root: 'pages/my',
pages: [
'index'
]
}
]
}
return []
})()
`
}
}
