这里我提供我个人的几个思路：
-
在小程序端发起请求，然后服务端请求微信 API 获取 ACCESS_TOKEN 。
-
服务端通过 ACCESS_TOKEN 去请求微信 API 生成二维码。
-
服务端保存二维码，把二维码保存的路径返回给小程序（路径线上可访问）。
-
小程序通过服务端保存的路径获取二维码，通过 canvas 将二维码画出。
-
保存图到本地，然后发圈。
小程序端实际操作代码示例：
// 多余的代码我就不贴了，贴关键代码，并且具体的逻辑处理自己酌情处理。
// 请求后端生成 ACCESS_TOKEN
wx.request({
// 后端接口，自己实现，示例代码后面贴出
url: 'https://your.domain.com/api/getaccess_token',
method: "GET",
success: function (res) {
// 请求成功后，返回 ACCESS_TOKEN ，保存为临时变量（注：官方的 ACCESS_TOKEN 只具备有 7200 的有效时间）
let access_token = res.data.data.access_token; // 你可以保存为 data 变量
}
)}
// 上一步我们已经拿到 ACCESS_TOKEN ， 接下来请求继续请求服务端然后获取二维码路径
wx.request({
url: 'https://your.domain.com/api/getqr',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
scene: _that.data.article.id, // B类二维码参数，重要
// path（注：B类小程序码无论你填写什么都是扫码进去小程序首页！！然后你需要在你首页进行 scene 的一些逻辑处理）
page: 'pages/home/home',
access_token: access_token // 刚刚我们从服务端获取到的 ACCESS_TOKEN
},
success: function (res) {
// 这里我们已经在服务端获取到 二维码线上路径，真实可以访问的资源
// 我们保存一下
let qrcodeurl = res.data; // 这里是小程序码的资源路径
}
)}
// 到这里我们已经拿到了小程序的线上资源了。将资源保存为临时变量
wx.downloadFile({
// 这里的url要又https://your.domian.com/ 看你怎么返回的路径，我这里没有把我的域名放到url里面，所以我要加个域名。反正就是完整的url
url: qrcodeurl,
success: function (res) {
// 这里我们我们将保存这个小程序码保存为临时文件，具体查看小程序 api 的 downloadFile
let qrcodetempfile = res.tempFilePath
}
})
// 画图，这里是我自己的写的函数。可以参考
// that：调用此函数传过来的当前 this
drawimg: function (that) {
// 这里将绘图 这里的myCanvas是要在wxml里面的，我的例子：（样式和位置自己写哈）
// <canvas style="width: 600px; height: 600px;position:fixed;top:-600px;left:0;" canvas-id="myCanvas"></canvas>
var ctx = wx.createCanvasContext('myCanvas')
// 画背景色 白色
ctx.setFillStyle('#ffffff', 600, 600)
ctx.fillRect(0, 0, 600, 600)
// 画文章封面图 这是我原本的内容 里面的画图全是临时文件，具体操作看上面 downloadFile
ctx.drawImage(that.data.coverimgpath, 0, 0, 600, 340);
// 画二维码
ctx.drawImage(that.data.qrcodetempfile , 380, 400, 180, 180);
// 画标题
ctx.setFontSize(32)
ctx.setFillStyle('#000000')
ctx.fillText(that.data.article.title, 20, 390)
// 画作者
ctx.setFontSize(18)
ctx.fillText('文 / ' + that.data.article.author, 20, 460)
// 画来源
ctx.fillText('源 / ' + that.data.article.source, 20, 500)
ctx.draw()
},
// 这里我们已经画完图片了，接下来就是保存这个 Canvas
// 小程序 API 有个 canvasToTempFilePath，请参考该api
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 600,
height: 600,
destWidth: 600,
destHeight: 600,
canvasId: 'myCanvas', // 页面canvas的id 也是我们drawimg的id
success: function (res) {
// 可以自己将这个变量存到data里面
let shareImgSrc: res.tempFilePath
}
})
// 上一步我们将画图保存为了临时文件，那么接下来就是将这个临时文件保存我们的手机上面了
wx.saveImageToPhotosAlbum({
filePath: shareImgSrc,
success(res) {
wx.showModal({
title: '存图成功',
content: '图片成功保存',
showCancel: false,
confirmText: '确认',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用户点击确认');
}
}
})
}
})
// 这里顺便说一个问题，就是B类小程序码生成后带有scene参数，并且都是直接默认进入app.json的首页的
// 所以我们要在首页进行一下逻辑判断。我这里比较简单，我PO一下代码
onLoad: function (option) {
// 这里是判断用户是否扫码进来的
// 因为我的是文章id，所以相对比较好处理，具体情况具体分析
if (decodeURIComponent(option.scene) > 0) {
wx.redirectTo({
url: "/pages/articles/article-detail/article-detail?id=" + decodeURIComponent(option.scene)
})
}
}
以上就是小程序的关键代码啦，复制粘贴是没有用的啦，你要理解步骤，并且在自己的理解基础上进行修改和优化。
接下来就是 PO 服务端API的关键代码啦（注：我用的是PHP thinkphp框架）
/**
* 获取access token
*
* @return void
*/
public function getaccess_tokenAction()
{
$appid = 'yourappid';
$secret = 'yoursecret';
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
$data = $this->curl_get($url);
// 这里的返回数据你们要注意自己的返回，我为了简单说明就直接=了
return return_msg(200, '成获取access token', $data);
}
/**
* 获取小程序码 B类
*
* @return void
*/
public function getqrAction()
{
$access_token = input('access_token');
$url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token={$access_token}";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// post 请求方式
curl_setopt($ch, CURLOPT_POST, 1);
// post 请求的数据
$scene = input('scene');
$path = input('path');
// $post_data = '{"scene":"xxxx","path":"pages/articles/articles"}';
$post_data = json_encode(['scene' => $scene, 'path' => $path]);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
// 这里要注意 curl返回的是二进制文件，所以我们要写入file里面。
$output = curl_exec($ch);
curl_close($ch);
// file_put_contents($_SERVER["DOCUMENT_ROOT"].'/adsf.jpg', $output);
// 上传的文件路径
$path = '/upload/qrcode';
// 上传的文件名字
$filename = 'qrcode_'.uniqid().'.jpg';
$file = fopen($_SERVER["DOCUMENT_ROOT"].$path.'/'.$filename, "w");//打开文件准备写入
fwrite($file, $output);//写入
fclose($file);//关闭
$file_path = $path.'/'.$filename;
return return_msg(200, '成获取小程序码', $file_path);
}
// 第一个函数调用用的
public function curl_get($url)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
return json_decode($data, true);
}
php服务端代码也给了，那么我就 PO 一下我的运行效果图吧。
-
首页，长按封面图触发事件
微信图片_20180203154701.png
-
生成的小程序码和封面图一起画
微信图片_20180203154826.png
-
保存之后
微信图片_20180203154928.png
-
最后生成的效果图
wx3e2ac0555c5656b2.o6zAJsxbLLfTz-f6IkAzD-VTPWVA.120ed048b0923cad77fc9a49de1b0259.png
该小程序已经上线了（扫码可以直接进去）小程序名字叫 - 蚂蚁童话
但是二维码的功能也是今天提交审核，希望大家多多支持。
第一次写这类技术文章，不是很会，希望大家能看懂吧。。心累。
网友评论