api篇
- showActionSheet的success 返回參數(shù)在微信為tapIndex蒲祈，支付寶為index，可做兼容處理：
let tapIndex = res && (res.tapIndex || res.index);
-
showModal在不傳cancelText時碍侦，支付寶的取消按鈕會顯示undefined，因此每次使用帶取消按鈕的模態(tài)彈窗時，都應(yīng)該傳cancelText。
補充：showModal的另外一個坑：success回調(diào)里鹃祖，按確認(rèn)按鈕的話，res.confirm為true;按取消則res.confirm為false普舆。不會有res.cancelＬ窨凇！奔害！ - requestPayment不兼容支付寶楷兽，支付寶支付用my.tradePay地熄，同時需要注意：支付寶用戶取消支付時华临，是進success回調(diào)！６丝肌雅潭！可以通過res.resultCode得知用戶取消了支付：
// 用戶取消了支付
if (res.resultCode === '6001')
- login不兼容支付寶，支付寶登錄用my.getAuthCode却特，詳見支付寶小程序文檔扶供。
- 支付寶授權(quán)，獲取手機號之類的也是跟微信不同的裂明，詳見支付寶小程序文檔椿浓。
- createSelectorQuery在支付寶里需要在in()方法里傳上下文：
// weapp
Taro.createSelectorQuery()
// alipay
Taro.createSelectorQuery().in(this.$scope)
樣式篇
- 組件樣式中的externalClasses對支付寶無效，如：custom-class，筆者的解決方案是：開啟addGlobalClass扳碍，但是這樣存在外部樣式無意間污染組件樣式的風(fēng)險提岔，現(xiàn)實情況也確實發(fā)生了。我的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權(quán)重
// 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給組件，當(dāng)然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;
}
- 按鈕默認(rèn)樣式支付寶與微信不同喷兼，為了與微信統(tǒng)一，需要添加：
.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負值在支付寶上表現(xiàn)不佳后雷，通常褒搔，我們會把背景div設(shè)置z-index為負值來防止覆蓋主內(nèi)容，然而在支付寶中背景div直接就看不到了喷面，汗-_-||星瘾。目前我的解決方案是：主內(nèi)容div設(shè)置z-index值（任意值），背景div不設(shè)置z-index來解決惧辈。
組件篇
-
label 官方原話
label.png
所以還想用label綁定button的同學(xué)可以洗洗睡了琳状，改回button布局吧。
- navigator 支付寶navigator不能綁定點擊事件盒齿，所以改用view念逞，至于想要有hoverClass的效果，可以參考以下代碼：
<View hoverClass='navigator-hover-class'>click me</View>
.navigator-hover-class {
background: #EDEDED;
}
- button 如果自己項目的按鈕沒有點擊態(tài)的話边翁，記得設(shè)置hoverClass='none'翎承，否則在支付寶點擊按鈕時可能巨丑無比。
額外注意
使用分包需要注意符匾，小程序無問題叨咖，到了支付寶就無法跳轉(zhuǎn)分包路徑了，真是巨坑啊胶！
目前我的解決方案是定制不同的app.json（即支付寶不使用分包）甸各，定制不同app.json參考Taro文檔（2.x關(guān)于分包的似乎找不到了），但是沒有關(guān)西焰坪，下面上示例代碼：
// 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 []
})()
`
}
}
