微信小程序及公众号会员卡开发攻略

作者:dante_wd 发布时间:2019-10-31 09:27:18

这些天搞小程序还有公众号的会员卡领取,接口文档翻了很多遍,这文档看的,操碎了心。几乎所有接口都调过了,对整体的流程接口使用也都有了明确的了解。

于是写一个攻略出来。


微信会员卡,是电子卡,可自带积分,余额,带跳转WEB页,二维码用在微信上消费用。(领完会在微信的卡包里)

1572399166967553.png

上图是调试创建了很多会员卡。(下边是一个会员卡的页面,这个大家都比较熟悉不多说)其中的内容都可以自定。

1572399274497543.png

创建会员卡有两种方式,简单的可以在公众号里直接创建

1572399512642052.png

公众号的创建主要是生成一个会员卡ID,后边接口开发会用

image.png

页面的内容在这里设置很方便,相对比API创建更直观,好操作。(API创建会员卡之后,可以在公众号里改,可以改的很漂亮,内容都丰富上)

注:页面建卡里没有设置自动激活的方式项(激活方式分别是接口激活、一键激活和自动激活。)具体页面配出来的激活流程,这个自己试下就可以,我这边主要是API相关的。


然后我按步骤想到哪写到哪,大家跟好,尤其注意细节(都是泪)。


1、创建会员卡(API接口)

https://api.weixin.qq.com/card/create?access_token=accesstoken

(获取accesstoken:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=xxx&secret=xxx)


a.获取token比较简单,get方式,拿到的token会有过期时间,现在这会接口给的都是7200秒,自己可以缓存下来,省着再次请求拿新的旧的token会失效影响业务


b.创建会员卡

参数示例:

image.png

注意的地方:

自动激活字段auto_activate为true之后,一键开卡设置和接口激活设置的激活url均不再显示,用户领取卡片之后,系统自动帮用户激活,积分、储值等自定义显示信息均为0,开发者可以通过更新会员信息接口更新用户会员数据。(我这里是用的跳转型激活方式,auto_active为false,这种适合跳转中间页拿我们自己的数据信息与激活的用户信息作关联,方便打通业务数据,具体参考文档:https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1479824356&version=1&lang=zh_CN&platform=2)


1572400755211119.png


#非跳转的不会走自己的中间页,直接激活,配置参数"wx_activate" : true即可

#跳转的会走自己的页面,可以在自己的页面获取开卡时用户的身份信息,关联业务处理

                    "wx_activate" => true,

                    "wx_activate_after_submit" => true,

                    "wx_activate_after_submit_url" => "https://api.littleworld.wang/mp/cardactivate",

                    "background_pic_url" => "https://mmbiz.qlogo.cn/mmbiz/0?wx_fmt=jpeg",

wx_activate_after_submit_url为自己的中间页(openid,activate_ticket在中转到这个中间页里可以get到,两个都是很有意义的参数)

#这里可以拿到的参数有encrypt_code(code加密串,可以接口解出来),openid,card_id,activate_ticket(用来获取用户填表单的数据)

encrypt_code解密:

image.png

获取用户表单信息:

image.png

通过 https://api.weixin.qq.com/card/membercard/activatetempinfo/get?access_token= 这个接口可以获取用户开卡时填写的用户信息

openid,手机号都有了,如果通过这种链接(微信直接进)或者说通过公众号(菜单跳转)过来的可以关联业务了。


参数格式:PHP方式的话,请求接口需要对参数JSON,

重点注意:post请求接口的curl设置,这样可以有效解决47001,参数格式的error问题

$data = json_encode($data, JSON_UNESCAPED_UNICODE);

curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: text/plain'));


用户点击会员卡链接(我管它叫领卡链接)会进到开卡页,也就是用户填信息的页面,需要设置开卡字段

image.png

其实就是个配置,配置能展示能填写那些微信那边给出来的信息项,USER_FORM_INFO_FLAG_MOBILE电话,USER_FORM_INFO_FLAG_NAME名字等等,自己看文档这块很简单,手机号是微信号自带绑定的那个号,如果说填别的号,自带验证码功能,这个省心,直接用。(有人可能会问这个页面从哪个链接过来,按开发步骤来走,这块先设置好,不然到时跳过来也没东西,虽说可以后边再改再配置)

1572402319616811.png


设置完开卡字段之后,我们接下来就是拿链接,获取卡包的重要参数(公众号的跳转入口,小程序的卡包跳转参数都在这)

 $url = 'https://api.weixin.qq.com/card/membercard/activate/geturl?access_token=' . $this->token;

 $data = array("card_id" => $card_id, "outer_str" => "w1");

 $r = Utils::posturl($url, $data);

没啥注意的,outer_str自己编,想怎么写怎么写,用来统计渠道数据

重要的是返回值:

https://mp.weixin.qq.com/bizmall/activatemembercard?action=preshow&&encrypt_card_id=msI1BvcsmwSCWZTdmzcpacJ%2FikzfkrL%2B9efSjhA7aGjZTCXDB6nD%2FOvm0TNpCq%2BV&outer_str=w1&biz=MzUzNDkwMjg3MQ%3D%3D#wechat_redirect

这个就是开卡组件链接接口了,其中有很重要的参数:encrypt_card_id,biz,out_str这三个参数小程序进卡包会用。

这个链接可以直接配在公众号,也可以直接微信点链接进入,进去之后就是上图-开卡页面了~哦哦~(上边的上边,自己缕缕,我这一气下来的~)


到这里公众号的建卡,领卡,开卡都有了。然后还有激活,差点忘了。激活可以一键激活,可以走自己的激活页,接口激活。

一键激活怎么调,按着上边说的配个参数,上图点提交应该就可以了,就是没地处理用户信息数据去~(应该是这么回事)

跳转激活,自己需要写个页面,上边有写,点提交过来会Get到的参数encrypt_code(code加密串,可以接口解出来),openid,card_id,activate_ticket(用来获取用户填表单的数据)然后自己通过这些可以写一个激活页:

1572403555556733.png


点激活,自己服务端调API激活:

image.png

接口:https://api.weixin.qq.com/card/membercard/activate?access_token=

参数:card_id,code(前一步页面都有)

初始化一些会员卡的参数,也只有在接口激活里可以配置,自动激活的全是0,当然后期改会员卡数据。


这样公众号的会员卡一套流程走完了。而且是最复杂的一套流程,一键激活,自动激活的相对省事。


然后是小程序:(不能落了~)

image.png

进入卡包代码:(跳转到开卡小程序,固定appid,给需要的参数,参数在开卡链接里都有)

wx

wx.navigateToMiniProgram({

appId: 'wxeb490c6f9b154ef9', //固定为此 appid,不可改动

extraData: data, // 包括 encrypt_card_id, outer_str, biz三个字段,须从 step3 中获得的链接中获取参数

success: function (e) {

console.log(e);

},

fail: function () { },

complete: function (e) {

console.log(e);

}

})


需要注意的:在app.json文件里加上一行代码,才可以跳转

"navigateToMiniProgramAppIdList": [

"wxeb490c6f9b154ef9"

]


还有就是链接里可能会有%2F这种串,需要对就转换下,%2F是/,转完之后再用,不用会提示参数错误


1) + URL 中+号表示空格 %2B

2) 空格 URL中的空格可以用+号或者编码 %20

3) / 分隔目录和子目录 %2F

4) ? 分隔实际的 URL 和参数 %3F

5) % 指定特殊字符 %25

6) # 表示书签 %23

7) & URL 中指定的参数间的分隔符 %26

8) = URL 中指定参数的值 %3D


在跳开卡小程序前我们已经传入了card_id,也就是指定了领哪个会员卡,所以跳转会直接进到相应的开卡页面,也就是填信息的页面,如果是自动激活,会直接激活。并返回到我们原来的小程序页面,如果开卡激活成功,还会返回参数。

官方文档写的比较朦胧,猜了有一会。


在App.onShow里判断从会员开卡小程序返回的数据data

  1. 判断data.referrerInfo.appId是否为开卡小程序appId 'wxeb490c6f9b154ef9',如果不是则中止判断

  2. 判断是否有data.referrerInfo.extraData是否有数据,如果没有,表示用户未激活直接左滑/点返回键返回,或者用户已经激活

  3. 若用户激活成功,可以从data.referrerInfo.extraData中获取activate_ticket card_id code参数用于下一步操作


解释下:要在app.js文件的onShow里加这段内容,微信会把开卡信息打过来,包括openid,code,activate_ticket,拿到这些做相应检查,然后可以走自己接口绑定数据关联自己的业务,并且页面提示开卡成功。

注:一个很坑的事,自动激活,非跳转激活,在app.onshow方法里都拿不到extraData...

image.png

这个是非跳转的onshow返回值


目前的方式还是跳转型,在开卡页面不是开卡按钮而是提交按钮,提交点击之后就会有onshow的反回值:

image.png

建议这会把activate_ticke存起来,激活页用这个来获取用户表单数据(https://api.weixin.qq.com/card/membercard/activatetempinfo/get?access_token=)

正好这块遇到一个坑,就是小程序开卡组件点提交之后跳转中间页,没有这些参数(公众号跳过去有),只能说在onshow里处理完,再在激活页面用。

(wx_activate_after_submit_url如果设为空,跳转型会变成非跳转型,还是拿不到参数。本来想提交直接在onshow拿到返回值直接调激活,行不通)


还有一个坑,就是非跳转激活,跳转激活,至少有一个必填项手机号,不然会提示输入验证码,没法开卡或提交。


版权所有,转载请注明来源:梦幻岛 http://dreamisland.wang/article/3290p1.html

关于我 |  合作伙伴 |  用户注册 |  帮助中心 |  版权声明