共计 3871 个字符,预计需要花费 10 分钟才能阅读完成。
在浏览某个云课堂的时候,发现了一个直播揭示的性能。在点击 开启揭示
后,发现它走了如下流程:
- 点击
开启揭示
,弹出一个公众号二维码 - 微信扫描二维码,进入小程序客服(app 流程)
- 点击发送右小角的小程序卡片(app 流程)
- 服务器返回公众号二维码图片(app 流程)
- 点击图片辨认二维码,关注公众号
云课堂的 PC 端的开启揭示很简略,只须要扫描二维码即可,然而在 app
开启揭示就略微简单了点。
尽管不容易,但通过一番折腾后,终于走通了整个直播揭示的性能。现分享给须要的敌人。
以下是 app
直播揭示性能:
生成待带参数的二维码
据我所知,目前关注公众号有两种形式:
- 扫描或辨认公众号后盾生成的二维码
- 扫描或辨认带参数的二维码
这两种都属于关注事件,但第二种在用户关注公众号后,会将带场景值的扫描事件推送给开发者。咱们利用这个场景值,可带额定的参数传递给应用服务器,开发者可依据这些参数来判断用户是否已开启揭示。
所以,咱们用生成带参数的二维码来实现扫码关注。
生成带参数的二维码地址
上面咱们来创立长期二维码:
- 获取
access token
$client = new \GuzzleHttp\Client(['verify' => false]);
$header['content-type'] = 'application/json; charset=UTF-8';
$param = [
'appid' => 'appId', // 公众号的 appid
'secret' => 'appSecret', // 公众号的 secret
'grant_type' => 'client_credential'
];
$url = 'https://api.weixin.qq.com/cgi-bin/token?' . http_build_query($param);
$result = file_get_contents($url);
$result = \GuzzleHttp\json_decode($result, true);
if (isset($result['errcode']) && $result['errcode'] <> 0) {throw new WeChatException('获取 access_token 失败', 500);
}
$accessToken = $result['access_token'];
2. 依据 access_token
获取 ticket
// app 传递的数据
$data = [
'live_id' => 10, // 直播 ID
'user_id' => 5 // 用户 ID,未登录可传递 0
];
// post 数据格式
$tmp = [
'expire_seconds' => 5 * 60,
'action_name' => 'QR_STR_SCENE',
'action_info' => [
'scene' => ['scene_str' => http_build_query($data)
]
]
];
$url = 'https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=' . $accessToken;
$json = \GuzzleHttp\json_encode($data, 256);
$ticket = $this->post($url, $json, ['headers' => $headers])['ticket';
3. 依据 ticket
生成二维码图片
拿到 ticket
后,拜访上面的链接,关上的是一个公众号二维码图片。云课堂的 PC 端即是用这种形式
$qCodeUrl = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=urlencode('.$ticket.')';
唤起小程序
在 app
中,当点击 开启揭示
时,因为要跳转到小程序客服,所以咱们须要将公众号与小程序进行关联。
关联步骤:登录公众号 -> 小程序 -> 治理小程序 -> 增加
关联实现后,就能够在 app
中唤起小程序了。
这个步骤须要 app
开发者和前端开发者协同开发 app
跳转到小程序时,同样要传递 直播 ID
和 用户 ID
。
小程序推送客服音讯
客服音讯地址
相似公众号推送音讯,小程序同样也能够推送该音讯。
当用户想微信服务器发送小程序卡片时,
判断 当msgtype
的值为 miniprogrampage
时,发送回复音讯
1. 获取 Access toten
小程序获取 access token
和公众号获取 access token
基本相同,不同的是 appid
和 secret
别离要换成小程序的 appid
和 secret
$client = new \GuzzleHttp\Client(['verify' => false]);
$header['content-type'] = 'application/json; charset=UTF-8';
$param = [
'appid' => 'appId', // 小程序的 appid
'secret' => 'appSecret', // 小程序的 secret
'grant_type' => 'client_credential'
];
$url = 'https://api.weixin.qq.com/cgi-bin/token?' . http_build_query($param);
$result = file_get_contents($url);
$result = \GuzzleHttp\json_decode($result, true);
if (isset($result['errcode']) && $result['errcode'] <> 0) {throw new WeChatException('获取 access_token 失败', 500);
}
$accessToken = $result['access_token'];
- 发送图文音讯
咱们在第二步中曾经生成了公众号二维码,能够间接拿来用
$url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=" . $accessToken;
$tmp = [
'touser' => 'OPENID', // 用户发送卡片时会有个 FromUserName 字段,即 openid
'msgtype' => "link",
'link' => [
'title' => '直播揭示',
"description" => "点击辨认二维码",
'url' => $qrCodeUrl, // 带参数的二维码地址
'thumb_url' => '小程序跳转地址'
]
];
$client = new \GuzzleHttp\Client(['verify' => false]);
$header['content-type'] = 'application/json; charset=UTF-8';
$response = $client->request('POST', $url, [
'headers' => $header,
'body' => \GuzzleHttp\json_encode($data, 256),
]);
return \GuzzleHttp\json_decode((string)$response->getBody(), true);
图文音讯辨认二维码
因为推送二维码图片时,须要 Media_id
,比拟麻烦,所以在小程序中,我将公众号二维码地址做成了图文音讯发送给用户,
用户点击图文音讯后,会显示二维码,用户辨认二维码后,即可关注公众号
保留揭示信息
关注公众号,要做个提醒音讯,通知用户曾经 开启揭示胜利 。
刚好 生成带参数的二维码 能够帮忙咱们。
扫描带参数二维码事件有两种状况:
- 用户未关注时,进行关注后事件音讯:
<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[FromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[subscribe]]></Event>
<EventKey><![CDATA[qrscene_123123]]></EventKey>
<Ticket><![CDATA[TICKET]]></Ticket>
</xml>
- 用户已关注时的事件音讯:
<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[FromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[SCAN]]></Event>
<EventKey><![CDATA[SCENE_VALUE]]></EventKey>
<Ticket><![CDATA[TICKET]]></Ticket>
</xml>
第一种状况,咱们能够依据 EventKey
来判断是否是扫描带参数的二维码;
第二种状况,咱们能够依据 Event
来判断是否是扫描带参数的二维码;
所以,当呈现以上两种状况时,咱们就能够断定,用户开启了直播揭示。记录用户的 openid
,以便给用户推送揭示音讯
申请模板音讯
略
以上既是 app
开启直播揭示的流程。
须要留神的点:
- 公众号必须是服务号
- 公众号必须关联小程序
-
app
唤起小程序时必须传递参数