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;<textstyle="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