taro2.x开发支付宝小程序踩坑总结（持续更新~）

api篇

1. showActionSheet的success 返回参数在微信为tapIndex，支付宝为index，可做兼容处理：

let tapIndex = res && (res.tapIndex || res.index);

2. showModal在不传cancelText时，支付宝的取消按钮会显示undefined，因此每次使用带取消按钮的模态弹窗时，都应该传cancelText。
   补充：showModal的另外一个坑：success回调里，按确认按钮的话，res.confirm为true;按取消则res.confirm为false。不会有res.cancel！！！
3. requestPayment不兼容支付宝，支付宝支付用my.tradePay，同时需要注意：支付宝用户取消支付时，是进success回调！！！可以通过res.resultCode得知用户取消了支付：

// 用户取消了支付
if (res.resultCode === '6001')

4. login不兼容支付宝，支付宝登录用my.getAuthCode，详见支付宝小程序文档。
5. 支付宝授权，获取手机号之类的也是跟微信不同的，详见支付宝小程序文档。
6. createSelectorQuery在支付宝里需要在in()方法里传上下文：

// weapp
Taro.createSelectorQuery()
// alipay
Taro.createSelectorQuery().in(this.$scope)

样式篇

1. 组件样式中的externalClasses对支付宝无效，如：custom-class，笔者的解决方案是：开启addGlobalClass，但是这样存在外部样式无意间污染组件样式的风险，现实情况也确实发生了。我的reset.scss覆盖了所有的组件样式：

// reset.scss
view,
text {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
}

// demo.js
render() {
    return (
        
            demo
        
    )
}

// demo.scss
.demo__text {
    line-height: 1.5;
}

这种情况在支付宝生效的样式是line-height: 1而不是line-height: 1.5，这就是全局样式污染了，我的解决方案是：增加css权重

// demo.js
render() {
    return (
        
            demo
        
    )
}

// demo.scss
.demo__text.weighted1 {
    line-height: 1.5;
}

这样，line-height: 1.5就生效了。

2. 外部自定义样式给组件使用，我们可以传className作为props给组件，当然addGlobalClass是要开启的：（注意：addGlobalClass 这个 API 只对 Page 上的 class 起作用。）

// 组件Comp
import classNames from 'classnames'

render() {
    return (
        
            hello world
        
    )
}

// 页面
render() {
    return 
}

/* 页面.scss */
.hello.comp {
    color: red;
}

3. 按钮默认样式支付宝与微信不同，为了与微信统一，需要添加：

.my-button {
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    padding-left: 28px;
    padding-right: 28px;
    line-height: 2.55555556;
    border: 0;
}

4. z-index负值在支付宝上表现不佳，通常，我们会把背景div设置z-index为负值来防止覆盖主内容，然而在支付宝中背景div直接就看不到了，汗-_-||。目前我的解决方案是：主内容div设置z-index值（任意值），背景div不设置z-index来解决。

组件篇

1. label 官方原话

   
   
   label.png
   
   

   所以还想用label绑定button的同学可以洗洗睡了，改回button布局吧。

2. navigator 支付宝navigator不能绑定点击事件，所以改用view，至于想要有hoverClass的效果，可以参考以下代码：

click me

.navigator-hover-class {
    background: #EDEDED;
}

3. 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 []
            })()
          `
    }
}