作者：艳斐儿M | 来源：互联网 | 2023-06-29 22:08
刚完成一个微信小程序卡券开发的项目。下面记录开发前，自己困惑的几个问题。因为我只负责了前端。所以下面主要是前端的工作。项目概述：按照设计图开发好首页上的优惠券列表，点击某个优惠券，输入手机号，
刚完成一个微信小程序卡券开发的项目。下面记录开发前，自己困惑的几个问题。
因为我只负责了前端。所以下面主要是前端的工作。
项目概述：按照设计图开发好首页上的优惠券列表，点击某个优惠券，输入手机号，点击领取，调用 wx.addCard()接口，跳到微信的领取卡券页面。
点击首页的某处按钮，点击后，调用wx.openCard()接口，打开已领取的卡券列表页。
1、小程序提供的 wx.addCard() ，如果调用成功，打开的界面，长下面这个样子。（微信本身就有的页面）
如果点击了返回，没有点击“领取到卡包”。此时是没有领取成功的。
2、小程序提供的 wx.openCard() ，如果调用成功，打开的界面，长下面这个样子。（微信本身就有的页面）
3、开发流程（后续补充）：
1) 获取openId。
在app.json文件中，前端调用wx.request()，发送code至自己公司后台提供的接口，获取openId，存到缓存中，为了确保其他页面能获取到。我也存到了一个公共变量中。
2) 按照微信提供的API说明，传必要参数。
领取卡券的前端处理：
① 先判断当前微信版本是否支持领取卡券这个api
if ( wx.addCard ) { 如果支持的话，就调用领取卡券的接口 } else { 不支持的话，弹出更新提示 }
② 调用领取卡券的接口
下面是我实际调用这个接口时，传入的参数
if (wx.addCard) {
//领取卡券接口
wx.addCard({
cardList: [
{
cardId: card_id,
cardExt: '{"nonce_str": "'+ result.data.sign.nonce_str +'", "openid": "'+ openid +'", "timestamp": "'+ result.data.sign.timestamp +'", "signature":"'+ result.data.sign.signature +'"}'
}
],
success: function(res) {
if(res.cardList.length > 0) {
if(res.cardList[0].isSuccess) {
var get_card_id = res.cardList[0].cardId;
var get_code = res.cardList[0].code;
//将领取成功结果返回至服务器
wx.request({
url: '服务器接口地址',
method: 'POST',
data: {
mobile: user_phone,
openid: openid,
card_id: get_card_id,
code: get_code
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function(result) {
if(result.data.error_code != 200) {
//error处理
}
//领取完，跳回首页
wx.reLaunch({
url: '../index/index'
})
}
})
}
}
},
fail: function() {
//领取失败，跳回首页
wx.reLaunch({
url: '../index/index'
})
}
})
} else {
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
参数说明：
cardId：是从后台接口获取到的数据。
timestamp：是从后台获取的时间戳。
nonce_str： 是从后台获取的数据。
openid：在小程序app.js文件中，调用 wx.login()接口，发送code至后台，获取openId，保存到缓存中。（为了防止取不到，我也存到了自定义的全局变量中）
在这里需要用时，就取出openId
signature： 是从后台获取的数据。
success：在这个函数中，我将领取成功结果返回至了服务器（后台提供的接口，参数因项目而异。我们是要求传回手机号，openId，card_id，和code 。这里的card_id 和 code，是success函数中返回的结果）
success, 其实也就是点击“领取到卡包”后触发的函数。
凡是需要调用 api.weixin.qq.com这个接口获取的数据，都要由后台调用，返回给前端。前端无法直接调用。
4、踩的坑
1）点击领取后，接口调用成功，就要设置按钮不可点击。否则多次快速点击，微信卡包中，卡券列表里会出现多次重复领取的卡券。
2）用自己的appId登录开发者工具，查看公司的小程序项目时，会报错。因为后台服务器使用的是公司小程序的 appsecret 获取的 accesstoken。和自己的appId对不上，就调不了接口。
解决：开通公司小程序的开发权限，用公司的appId登录开发者工具。注意，先选择小程序文件，然后再输入appId。因为如果之前已经打开过这个小程序，再次导入小程序文件时，appId会自动输入之前的appId记录。先输入appId ，有可能会被自动改掉。
3) 注意遇到的几个code的含义，注意区分。
......做项目时，想写的很多，做完了，突然词穷了。等有人问，或者我自己想，再慢慢补充吧 ==||
①
京公网安备 11010802041100号