uniCloud开发公众号：三、生成带参数二维码

算是个系列内容吧，最终要实现的是将uniCloud作为后端完成“扫码关注公众号后完成网站登录”
将要涉及的内容可能包括：
0.准备工作：各种配置、基础搭建
1.接受、解析、组装xml消息
2.请求access_token并缓存
3.生成带参数二维码(本节)
4.引入、封装redis缓存方法
5.引入、配置、初始化unipush
6.解析不同情况下用户扫码时推送的事件并完成登录

系列内容全部基于uniCloud+vk-uniCloud(云函数路由)+uni-app
编辑器HbuilderX最新版
云空间为阿里云
公众号为认证服务号

一、编写云函数
这个创建二维码的函数，笔者是直接放在了pub目录下/router/service/client/mp/pub/createQrCode.js，这样不需要鉴权即可直接生成，各位担心被滥用的话，也可以加一些简单的前后端验证，这里不再赘述。

来看一下代码：

'use strict';
module.exports = {/*** 生成二维吗* @url client/mp/pub/createQrCode 前端调用的url参数地址* data 请求参数*/main: async (event) => {let { data = {}, userInfo, util, filterResponse, originalParam } = event;let { customUtil, uniID, config, pubFun, vk, db, _ } = util;let { uid } = data;let res = { code: 0, msg: "" };// 业务逻辑开始-----------------------------------------------------------let clientAppid = data.client_appid; // 客户端平台appidlet pushClientid = data.push_clientid // unipush生成的客户端推送idlet sceneCode = vk.pubfn.random(6); // 随机生成的场景值let currentTime = new Date().getTime(); // 当前时间戳// 判断是否有未过期的二维码（ticket）let oldTicketInfo = await vk.baseDao.findByWhereJson({dbName: "wx-mp-cache",whereJson: _.and([{name: 'qrCodeTicket'},{clientAppid: clientAppid},{pushClientid: pushClientid},{expire_time: _.gt(currentTime)}])});if (vk.pubfn.isNotNull(oldTicketInfo)) {res.msg = 'get old';res.data = oldTicketInfo.ticket;return res;}// 这里引用了第二节里封装的方法let accessTokenInfo = await pubFun.getWxAccessToken();// http请求方式: POST URL:let url = 'https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=' + accessTokenInfo.token;let response = await uniCloud.httpProxyForEip.postJson(url, { "expire_seconds": 604800, "action_name": "QR_SCENE", "action_info": { "scene": { "scene_id": sceneCode } } })// 还是记得要parseresponse = JSON.parse(response);// 换取二维码的ticketlet ticket = encodeURIComponent(response.body.ticket); // 上边有请求交互，可能会浪费时间，不能直接用一开始的时间戳入库currentTime = new Date().getTime(); // 当前时间戳// 存入数据库await vk.baseDao.add({dbName: "wx-mp-cache",dataJson: {name: 'qrCodeTicket',ticket: ticket,clientAppid,pushClientid,expire_time: (parseInt(currentTime) + 60000)}});// 缓存到redis// 这里的方法下一节会讲到if (vk.pubfn.isNotNull(ticket)) {let keyName = 'qrscene_' + sceneCode; // redis的keylet redisJson = {sceneCode,clientAppid,pushClientid,expireTime: (parseInt(currentTime) + 60000)}// 这是一个封装好的redis方法await pubFun.setRedisData(keyName, redisJson, 60);}res.msg = 'create success';res.data = ticket; // 把ticket返回给前端// 业务逻辑结束-----------------------------------------------------------return res;}
}

二、前端请求获取ticket
一般是打开登录界面，就发起请求获取tikect，当然也可以是先用手机登录之类的，然后有个切换按钮来发起请求。

// 创建并拉取公众号二维码
vk.callFunction({url: 'client/mp/pub/createQrCode',title: '正在生成二维码', // loading的titledata: {client_appid: uni.getSystemInfoSync().appId, // 原生方法获取发起请求的平台appidpush_clientid: vk.vuex.get('$user.push_clientid') // 这是在app.vue初始化unipush的时候生成并缓存到vuex的}
}).then(res => {// 实际上拿到的是ticket，这里拼一下图片的urlthis.qrCodeSrc = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + res.data;setTimeout(() => {// 没登录的话60秒后提示过期if (!vk.checkToken()) {vk.toast('二维码已失效，点击重新获取');}}, 60000);
});

<view v-show="loginType == 'weixin'" class="weixin-qrcode" id="pologin"><image class="qrCode" :src="qrCodeSrc" @click="getMpLogin"></image>
</view>

我这里这样弄完，就是从手机登录切换为微信登录时，发起请求拉取二维码；
然后点击二维码时，可以再次拉取（有未过期的ticket时，拉取到的是未过期的ticket）。

uniCloud开发公众号：三、生成带参数二维码相关推荐

JAVA 实现微信公众号的生成带参数二维码和扫码后被动回复消息
公司新需求实现生成微信公众号带参数二维码和对应扫码后回复相应信息的功能. 1.实现带参数二维码功能 public class QrTest {private static Logger logger ...
实例：用C#.NET手把手教你做微信公众号开发（11）--生成带参数二维码
上一篇讲了普通关注的各种情景,接下来准备详细讲解带参数的二维码的应用实例.在下一篇详解之前,这里先介绍一下如何下载二维码.生成二维码表,为后续的应用做好准备. 为了满足用户渠道推广分析和用户帐号绑定等 ...
Java 微信开发（四）生成带参数二维码及分享到朋友圈、好友、QQ
微信公众号中的微信分享到朋友圈.分享到QQ.分享到好友功能都是可以帮助营销活动支持的,今天就说一下公众号生成带参数的二维码分享到朋友圈功能根据微信公众号提供的开发者文档我们可以看出提供的有方法,我们 ...
基于OpenJWeb平台的微信服务号开发培训-生成带参数二维码
因为OpenJWeb平台已经集成了微信服务号接口,所以在OpenJWeb平台上开发微信服务号会起到事半功倍的作用.本文介绍如何使用微信公众号接口生成带参数二维码功能. 下面是开发及操作过程: (1)首 ...
微信公众平台开发(83) 生成带参数二维码
本文介绍在微信公众平台上如何使用高级接口开发生成带参数二维码的功能. 一.场景二维码为了满足用户渠道推广分析的需要,公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码, ...
微信公众号订阅号生成带参数二维码
1.公众号的任意一篇文章页链接例如: http://mp.weixin.qq.com/s?__biz=MjM5NzAwNzMwMQ==&mid=2655787844&idx=3&am ...
微信订阅号渠道推广带参数二维码如何生成和统计呢？
2019独角兽企业重金招聘Python工程师标准>>> 微信公众号订阅号渠道推广带参数二维码,公众号功能接口不支持订阅号生成带参数二维码,只有服务号才可以,订阅号只能通过服务号转接 ...
微信公众号开发（十）——扫描带参数二维码事件
我们通过微信扫码二维码已经是十分频繁的操作了,为了满足用户渠道推广分析和用户帐号绑定等场景的需要,微信公众平台提供了创建带参数二维码的接口,通过产生的ticket,去获取二维码图片.当用户扫描这个二维 ...
微信生成带参数二维码逻辑，无代码
目前貌似网页不能直接跳转到公众号了,遇到客户要做地推,要生成带参数的二维码,关注公众号的量,后面做统计.就顺便研究下微信的接口.. 前提: 1.必须是服务号可以看公众号接口权限,订阅号是未获得如果 ...

uniCloud开发公众号：三、生成带参数二维码

uniCloud开发公众号：三、生成带参数二维码相关推荐

最新文章

热门文章