小程序发劵插件sendCoupon的使用

发劵插件官方文档

我目前的需求是，商家自定义满减劵、优惠劵，点击添加按钮可以添加到自己的卡包。
一开始后台是给了我发劵插件send-coupon文档，但是我其实不想用插件，又占空间，感觉又麻烦，不是有个wx.addCard嘛。非常自信的选择的wx.addCard这个api，做了一大堆前缀工作。申请一个卡劵权限公众号、申请开发平台，将小程序和公众好绑定在同一个开放平台，主体还要一致。根据网上的操作流程，全部做完后，后台一调接口。哦豁，报错。

“errmsg”: “暂不支持本账号创建优惠券，具体可访问mp.weixin.qq.com,关注卡券下线公告通知。12月10日0点起，商户可正常申请开通“微信卡券”功能，申请开通后，“优惠券”功能将不再支持使用。新开通卡券功能的商户使用“会员卡”、“礼品卡”或“票证”等能力不受影响；如商户有在微信生态内发放优惠券的需求，可使用微信支付优惠券：商家券或支付券（即代金券）。如需了解更多，可查阅微信支付优惠券产品功能介绍。 hint: [wUrrRA06809061]”

一上班，脑子就发懵。仔细看了下后台反馈的问题，一顿猛搜找人问，最后发现关于满减劵、优惠劵这一块，在wx.addCard这个api上，已经下架了，用不了。网上关于这方个api都是2021年之前的，之前是可以用，反正我现在用不了。
咋整，又是咔咔一段猛搜，最后发现，只能用一开始的微信支付发劵插件send-coupon。兜兜转转一周多，又回到了起点。
下面就是关于这个插件使用踩得的一些小坑。

1. 当前小程序需要开通了微信支付。
2. app.json引入插件包，并添加到开发工具，我后面放分包了，因为不占用主包大小。

    "plugins": {
        "sendCoupon": {
            "version": "latest",
            "provider": "wxf3f436ba9bd4be7b"
        },
    },

3. 当前页面引入组件使用

   "usingComponents": {
        "send-coupon": "plugin://sendCoupon/send-coupon"
    },

4. wxml使用

<van-popup show="{{isAddCard}}" position="bottom" custom-style="height: 30%;" round bind:close="onClose">
    <send-coupon bindsendcoupon="wxGetCoupon" 
    binduserconfirm="redirectuser" 
    send_coupon_params="{{send_coupon_params}}" 
    sign="{{signtureResult.sign}}" 
    send_coupon_merchant="{{signtureResult.merchant}}">
        <view class="addCardModel" >
            <view class="cardToast">提示</view>
            <view>确认领取此优惠劵？</view>
            <view class="cardBtn" bind:tap="onAddCard">确定领取</view>
        </view>
    </send-coupon>
</van-popup>

5. js逻辑使用

    /**自定义领取 */
    onAddCard(){
        let {goodsList,signtureResult} = this.data
        let send_coupon_params = [{
            out_request_no: goodsList.outRequestNo ,
            stock_id: goodsList.wxStockId,
            create_coupon_merchant: signtureResult.merchant,
        }]
        this.setData({
            send_coupon_params,
            isAddCard:false
        })
    },
      /**微信领取 */
    wxGetCoupon(params){
        console.log(params);
        if (params.detail.errcode == 'OK') {
            if (params.detail.send_coupon_result[0].code == 'SUCCESS') {
            //领取成功调用接口，告诉后台已成功领取优惠劵，方便后台返回一个"是否添加优惠劵到卡包"的状态
            this._updateWxCouponCode(params.detail.send_coupon_result[0].coupon_code)
               wx.showToast({
                 title: '领取成功',
                 icon:'none'
               })
            }else if(params.detail.send_coupon_result[0].code == 'DUPREQUEST'){
                wx.showToast({
                  title: '已添加到卡包',
                })
            }else{
                console.log('领取失败');
                this.onClose()
            }
        }else{
            this.onClose()
            wx.showToast({
              title: '领取失败',
              icon:'none'
            })
        }
    },
    /** 点击"我知道了" 回调事件 */
    redirectuser(res){
        wx.showToast({
          title: '卡包已添加成功',
          icon:'none'
        })
        this.setData({
            isAddCard:false
        })
    },

有一个注意点是send_coupon_params的参数格式和内容。还有一个是确定领取的onAddCard一定不要写成catchtap方法，不然冒泡不到插件的自定义事件，触发不了bindsendcoupon的事件。我就是下意识写catchtap方法，没注意，卡这里半天。其实这个send-coupon里面的自定义内容就算不写方法，只写个文本内容领取，也可以触发bindsendcoupon的方法。但是一定要人为点击了才能触发。

前端小程序这边如果没绕弯、没跳坑里就还好。因为插件的参数基本都是后台返回的，需要后台仔细看接口文档，小程序调接口用就是。还有需要注意的参数是sign，这个参数貌似也很坑，放个以前的人填的坑。发券插件至验签流程

操作成功界面演示