项目需求,自我记录
微信公众号权限登录 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、确认微信开放平台里小程序和微信公众号是否关联。