uni-app小程序内领取微信卡包会员卡

项目需求，自我记录

微信公众号权限登录   https://mp.weixin.qq.com/  进入这个页面右下角创建会员卡

选择好商家logo和名称，如果商家需要自定义卡片样式，可以后端配置图片格式，但只能改字和显示几个，总体布局无法改变，如果商家需要自定义整体样式，可以在下方加个“首页”选项，内接H5页面

微信小程序内开通会员卡页面，使用微信官方开卡组件

<view class="card" @click="card">领取会员卡</view>

<script>
	export default {
		data() {
			return {
				loading: false,
			}
		},
		methods: {
			card() {
				this.loading = true;
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				});
				this.$http(this.$api.card, {}).then(res => {  //后端出的接口
					if (res.code == 0) {
						const url = res.data.url  //后端会返回一个https://mp.weixin.qq.com/开头的路径
						const queryString = url.split('?')[1];
						const params = queryString.split('&');
						const result = {};
						params.forEach(param => {
							const [key, value] = param.split('=');
							if (key === 'encrypt_card_id' || key === 'biz') {
								result[key] = decodeURIComponent(value);
							}
						});
						console.log(result.encrypt_card_id);
						console.log(result.biz);

						wx.navigateToMiniProgram({
							appId: 'wxeb490c6f9b154ef9', //固定为此 appId，不可改动
							extraData: {
								encrypt_card_id: result.encrypt_card_id,  //路径里的
								outer_str: "123",
								biz: result.biz,  //路径里的
								// activate_type: "ACTIVATE_TYPE_NORMAL", // 指定跳转激活
							},
							success: function(ress) {
								uni.hideLoading();
								console.log(ress);
							},
							fail: function(ress) {
								console.log(ress);
								uni.hideLoading();
								uni.showToast({
									title: '开卡失败,',
									icon: 'none'
								});
							},
							complete: function() {
								uni.hideLoading();
							}
						})
					}else{
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						});
					}
				});

			},
		}
	}
</script>

领取过程中给了个加载效果

在微信卡包里，在H5的APP.vue全局

<script>
	export default {
		onLaunch: function() {
			if (uni.getStorageSync('token')) {  //判断是否已经存储了token,有就停止下面执行
				return
			}
			let urlParams = new URLSearchParams(window.location.search); //拿到链接
			let card_id = urlParams.get('card_id') || '';  //获取链接里的card_id
			setTimeout(() => {  //需要延时执行，要不会获取不到
				this.$http(this.$api.Login, {  //后端给的登录接口，给后端card_id
					card_id
				}).then(res => {
					uni.setStorageSync('token', res.data.api_token)  //本地存token
					//需要全局获取的信息
				});
			}, 1000)
		},
		onShow: function() {
			if (uni.getStorageSync('token')) {
				return
			}
			let urlParams = new URLSearchParams(window.location.search);
			let card_id = urlParams.get('card_id') || '';
			setTimeout(() => {
				this.$http(this.$api.Login, {
					card_id
				}).then(res => {
					uni.setStorageSync('token', res.data.api_token)
					//需要全局获取的信息
				});
			}, 1000)
		},
	}
</script>

目前bug:多次删除卡包卡片再添加过程中，有时首页获取不到信息，先去别的页面再去首页就有信息了。

过程中可能出现问题的解决方案：

1、查看是否填写安全域名

2、查看是否配置了白名单

3、确认微信开放平台里小程序和微信公众号是否关联。