使用uniapp开发支付宝小程序时引入卡包插件

1、官网文档

https://opendocs.alipay.com/pre-open/03k88a?pathHash=30ce86a9

2、代码开发

//manifest.json 配置文件添加卡包插件
"mp-alipay": {
    "usingComponents": true,
    "appid": "xxxxxxxxxxxxxxxxx",
    "plugins": {
      "syncCardPack": {
        "version": "*",
        "provider": "2021002171626459"
      }
    }
  },

// pages.json 在要使用卡包的页面引入插件组件
{
  "path": "pages/healthLic/myLic",
  "style": {
    "usingComponents": {
      "sync-card-pack": "plugin://syncCardPack/sync-card-pack"
    }
  }
}

//myLic.vue,这里添加v-if是判断只有查询到了证件时才出现加入卡包的悬浮窗，具体的配置项如何填写请参考上面的官方文档
<template>
  <packPage :customHeader="false" title="健康证">
    <view slot="gBody" class="content">
      <view v-if="JSON.stringify(licDetail) == '{}'" class="empty-box">
        <image class="empty-img" src="@/static/images/no-thing.png" mode="widthFix"></image>
        <view class="empty-tips">
          <u--text text="您没有健康证，无法加入卡包" type="info" align="center"></u--text>
        </view>
      </view>
      <view v-else class="lic-wrap">
        <view class="lic-box" id="licbox" ref="licbox">
          <view class="title">从业人员健康合格证</view>
          <view class="lic-flex">
            <view style="flex: 1">
              <view class="item">体检类别：{{ licDetail.tjlbName || '' }}</view>
              <view class="item"><text>姓名：{{ licDetail.xm || '' }}</text>&nbsp;&nbsp;<text
                  style="min-width: 180rpx">年龄：{{ licDetail.age || '' }}</text></view>
              <view class="item">工作单位：{{ licDetail.glqymc || '' }}</view>
            </view>
            <view class="lic-pic" v-if="licDetail.jkzly == '2'">
              <image :src="licDetail.jkzurl" mode="widthFix" />
            </view>
          </view>
          <view class="item">有效期：{{ licDetail.fzrq || '' }}--{{ licDetail.yxq || '' }}</view>
          <view class="item">发证机构：{{ licDetail.tjjgmc || '' }}</view>
        </view>
        <view v-if="item.jkzly == '1'" style="margin-top: 15px">
          <image :src="licDetail.jkzurl" mode="widthFix" style="width: 100%" />
        </view>
      </view>
      
      <sync-card-pack v-if="licDetail.sfzh" certificateInstanceCode="20240511xxxxxxxxxxxxxx8_E_HEALTH_CARE_CARD"
        :certificateId="licDetail.sfzh"
        :summaryInfo="{ desens_show_name: licDetail.xm, desens_show_no: licDetail.sfzh }" certificateStatus="T"
        summaryType="DESENS" ownerType="SELF" :position="{
    top: 0,
    bottom: 88
  }" onSuccessCallBack="onSuccessCallBack" onFailCallBack="onFailCallBack" onCloseCallBack="onCloseCallBack"
        onNotShowCallBack="onNotShowCallBack" onFirstFailCallBack="onFirstFailCallBack" />
    </view>
  </packPage>
</template>

<script>
/**
 * @Date 2024-03-16
 * @Description 健康证
 */
import { mapActions } from 'vuex';
import { healthLicMy } from '@/common/api/healthLic';
import { $config } from '@/config.js';

export default {
  data() {
    return {
      licDetail: {},
      isRedirect: ''  //判断是否是从卡包直接跳转进来的
    };
  },
  onShow() {
    this.queryDetail();
  },
  onLoad(option) {
    const { isRedirect = '' } = option;
    this.isRedirect = isRedirect;
  },
  methods: {
    ...mapActions('user', ['login']),
    queryDetail(e) {
      //如果是从卡包直接跳转过来的，就先自动登录，再调用接口
      if (this.isRedirect !== '') {
        this.handleLoading('正在查询，请稍后...');
        my.getAuthCode({
          scopes: ['auth_base'],
          success: (res) => {
            if (res.authCode) {
              this.login({
                mobile: res.authCode
              })
                .then(() => {
                  healthLicMy()
                    .then((res) => {
                      this.licDetail = res.data || {};
                      res.data.jkzurl && (this.licDetail.jkzurl = $config.api.baseUrl + res.data.jkzurl);
                    })
                    .finally(() => {
                      uni.hideLoading();
                    });
                })
                .catch(() => {
                  uni.hideLoading();
                  this.handleToast('登录失败');
                });
            }
          },
          fail: (err) => {
            uni.hideLoading();
            this.handleToast('my.getAuthCode 调用失败');
          }
        });
      } else {
        this.handleLoading('正在查询，请稍后...');
        healthLicMy()
          .then((res) => {
            this.licDetail = res.data || {};
            res.data.jkzurl && (this.licDetail.jkzurl = $config.api.baseUrl + res.data.jkzurl);
          })
          .finally(() => {
            uni.hideLoading();
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.lic-wrap {
  margin: 20rpx;
  .lic-box {
    padding: 30rpx 30rpx;
    background: #fff;
    border-radius: 20rpx;
    line-height: 2;
    .title {
      font-size: 36rpx;
      letter-spacing: 1px;
      text-align: center;
    }
    .item {
      color: #999;
      font-size: 28rpx;
      border-bottom: 1px solid #cacaca;
      padding: 16rpx 0;
      display: flex;
      justify-content: space-between;
    }
    .lic-flex {
      display: flex;
      align-items: end;
      .lic-pic {
        width: 180rpx;
        flex-shrink: 0;
        margin-left: 20rpx;
        display: flex;
        align-items: flex-end;
        image {
          width: 100%;
        }
      }
    }
  }
  .lic-btn {
    margin-top: 40rpx;
    width: 100%;
  }
}
.empty-box {
  padding: 100rpx 50rpx 50rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  .empty-img {
    width: 60%;
  }
  .empty-tips {
    margin-top: -20px;
  }
  .empty-btn {
    margin-top: 40rpx;
    width: 100%;
  }
}
</style>

3、注意事项

• 以上代码直接在HBuilder X中运行到支付宝模拟器后，会报错文件找不到，导致项目无法正常启动至模拟器。可以把template中引入卡包的代码先注释掉，等模拟器正常运行了项目后再把代码注释去掉，此时模拟器会自动刷新，可以正常测试（一定要用真机调试卡包功能）和上传版本。【HBuilder X报错的问题目前没找到解决办法】
• 当卡包直接跳转查看详情及去领取卡包时，本项目是直接跳转到了同一个页面，会由于未登录导致页面自动跳转到首页。我的解决办法是在配置卡包的领取及跳转链接时多加一个参数，在页面中判断是否有那个参数，有的话就自动登录。跳转链接配置如下（appId为支付宝小程序的id，page路径为要跳转的页面路径，最后是添加的参数）：console.log(alipays://platformapi/startapp?appId=XXXXXXXXXXXX&page=pages/healthLic/myLic${encodeURIComponent('?isRedirect=1')})，最后配置的链接为：
  alipays://platformapi/startapp?appId=XXXXXXXXXXXX&page=pages/healthLic/myLic%3FisRedirect%3D1