微信小程序官方开放了 3 个创建二维码的接口,其中有一个是生成二维码的,还有一个是葵花状的小程序码,我这里就用 php 生成二维码。
这个请求起来也是很容易的,微信开发文档有请求接口: 要把自己的小程序的 APPID 和 APPSECRET 获取到
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
access_token 只有 2 小时有效期,所以要缓存最好,避免重复请求
可以构建一个数组,然后转成 json 数据赋给一个变量
$param = json_encode(array("path"=>"pages/index/index?id=123","width"=> 150));
然后 POST 数据发送到微信服务器换取二维码
<?php
header('content-type:text/html;charset=utf-8');
//配置 APPID、APPSECRET
$APPID = "APPID";
$APPSECRET = "APPSECRET";
//获取 access_token
$access_token = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$APPID&secret=$APPSECRET";
//缓存 access_token
session_start();
$_SESSION['access_token'] = "";
$_SESSION['expires_in'] = 0;
$ACCESS_TOKEN = "";
if(!isset($_SESSION['access_token']) || (isset($_SESSION['expires_in']) && time() > $_SESSION['expires_in']))
{
$json = httpRequest( $access_token );
$json = json_decode($json,true);
// var_dump($json);
$_SESSION['access_token'] = $json['access_token'];
$_SESSION['expires_in'] = time()+7200;
$ACCESS_TOKEN = $json["access_token"];
}
else{
$ACCESS_TOKEN = $_SESSION["access_token"];
}
//构建请求二维码参数
//path 是扫描二维码跳转的小程序路径,可以带参数?id=xxx
//width 是二维码宽度
$qcode ="https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=$ACCESS_TOKEN";
$param = json_encode(array("path"=>"pages/index/index?id=123","width"=> 150));
//POST 参数
$result = httpRequest( $qcode, $param,"POST");
//生成二维码
file_put_contents("qrcode.png", $result);
$base64_image ="data:image/jpeg;base64,".base64_encode( $result );
//把请求发送到微信服务器换取二维码
function httpRequest($url, $data='', $method='GET'){
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($curl, CURLOPT_AUTOREFERER, 1);
if($method=='POST')
{
curl_setopt($curl, CURLOPT_POST, 1);
if ($data != '')
{
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
}
}
curl_setopt($curl, CURLOPT_TIMEOUT, 30);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($curl);
curl_close($curl);
return $result;
}
?>
1、新建 qrcode.php
2、拷贝上面代码进去
3、修改 APPID 和 APPSECRET
4、访问 qrcode.php
即可生成一个带参数的小程序二维码
但是这个接口生成的是有 LOGO 的小程序二维码。 我们想要生成一个简简单单的,无 LOGO 的小程序二维码可以吗? 官方的是没有办法的,但是我们可以用第三方的接口生成普通的二维码的方式。
1、先解码,把刚才生成的小程序二维码解码,获得 URL
2、把获得的 URL 用普通的二维码生成接口生成普通的无 LOGO 的二维码
解码其实有很多的库我这里直接用了第三方的 JSSDK 解码,免费的,需要申请接口和 appid 和 appkey
<h2>生成无 LOGO 二维码</h2>
<!DOCTYPE html>
<html>
<head>
<title>PHP 生成微信小程序二维码</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script src="hprose.min.js"></script>
<script src="md5.min.js"></script>
</head>
<body>
<!--显示二维码-->
<div id="show_test"></div>
<div id="select_img" style="display:none;">
<input type="file" id="imgTest" type="file" accept=".gif,.jpg,.jpeg,.png">
<br/>
<img src="" id="showImage" alt="">
</div>
<a href="javascript:;" id="qrdecode">点击生成无 LOGO 二维码</a>
<script>
var get_timestamp = function(){
var timestamp =0;
timestamp = Date.parse(new Date());// 获取当前时间戳(以 s 为单位)
timestamp = timestamp / 1000;
return timestamp;
};
//config,申请解码接口: http://www.wwei.cn/ ,免费
var api_id = 'xxxxxxx';//改为您自己的
var api_key = 'xxxxxxxxx';//改为您自己的
var timestamp = get_timestamp();
var client = hprose.Client.create('http://hprose.wwei.cn/qrcode.html', ['qrencode','qrdecode']);
//解码
$("#qrdecode").click(function(){
var timestamp = get_timestamp();
var imgurl = '';//远程图片
var imgdata ='<?php echo $base64_image;?>';//本地图片,直接调用生成的官方小程序二维码,用于解码
var signature = md5(api_key + timestamp + imgurl + imgdata);
client.ready(function(qrcode) {
qrcode.qrdecode(api_id,signature,timestamp,imgurl,imgdata)
.then(function(result) {
if(result.status !=1){
alert(result.msg);
return ;
}
//生成无 LOGO 二维码 api 接口
var qrcodeapi = "http://qr.liantu.com/api.php?text=";
//拼接接口+解码 url 并输出为图片
$("#show_test").html('<img src="'+qrcodeapi+result.data.raw_text+'"/>');
},function(e) {
console.error(e);
});
},
function(e) {
console.error(e);
});
});
</script>
</body>
</html>
上面是通过 js 来实现的解码,解码还是调用了 php 生成的二维码的一个图片地址的
<?php echo $base64_image;?>
上面是调用本地图片,所以需要结合 php 生成小程序二维码的代码使用这个解码程序。
解码后需要生成无 LOGO 的二维码,这个我只需要调用一个接口就行。
接口: http://qr.liantu.com/api.php?text=
那么生成小程序码和生成无 LOGO 二维码的代码结合起来就是:
<?php
header('content-type:text/html;charset=utf-8');
//配置 APPID、APPSECRET
$APPID = "APPID";
$APPSECRET = "APPSECRET";
//获取 access_token
$access_token = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$APPID&secret=$APPSECRET";
//缓存 access_token
session_start();
$_SESSION['access_token'] = "";
$_SESSION['expires_in'] = 0;
$ACCESS_TOKEN = "";
if(!isset($_SESSION['access_token']) || (isset($_SESSION['expires_in']) && time() > $_SESSION['expires_in']))
{
$json = httpRequest( $access_token );
$json = json_decode($json,true);
// var_dump($json);
$_SESSION['access_token'] = $json['access_token'];
$_SESSION['expires_in'] = time()+7200;
$ACCESS_TOKEN = $json["access_token"];
}
else{
$ACCESS_TOKEN = $_SESSION["access_token"];
}
//构建请求二维码参数
//path 是扫描二维码跳转的小程序路径,可以带参数?id=xxx
//width 是二维码宽度
$qcode ="https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=$ACCESS_TOKEN";
$param = json_encode(array("path"=>"pages/index/index?id=123","width"=> 150));
//POST 参数
$result = httpRequest( $qcode, $param,"POST");
//生成二维码
file_put_contents("qrcode.png", $result);
$base64_image ="data:image/jpeg;base64,".base64_encode( $result );
//把请求发送到微信服务器换取二维码
function httpRequest($url, $data='', $method='GET'){
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($curl, CURLOPT_AUTOREFERER, 1);
if($method=='POST')
{
curl_setopt($curl, CURLOPT_POST, 1);
if ($data != '')
{
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
}
}
curl_setopt($curl, CURLOPT_TIMEOUT, 30);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($curl);
curl_close($curl);
return $result;
}
?>
<h2>生成小程序官方二维码</h2>
<!-- 生成小程序官方二维码 -->
<img src="<?php echo $base64_image;?>"/>
<br/>
<h2>生成无 LOGO 二维码</h2>
<!-- 生成无 LOGO 二维码 -->
<!DOCTYPE html>
<html>
<head>
<title>PHP 生成微信小程序二维码</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script src="hprose.min.js"></script>
<script src="md5.min.js"></script>
</head>
<body>
<div id="show_test"><!--显示信息--></div>
<div id="select_img" style="display:none;">
<input type="file" id="imgTest" type="file" accept=".gif,.jpg,.jpeg,.png">
<br/>
<img src="" id="showImage" alt="">
</div>
<a href="javascript:;" id="qrdecode">点击生成无 LOGO 二维码</a>
<script>
var get_timestamp = function(){
var timestamp =0;
timestamp = Date.parse(new Date());// 获取当前时间戳(以 s 为单位)
timestamp = timestamp / 1000;
return timestamp;
};
//config,申请解码接口: http://www.wwei.cn/ ,免费
var api_id = 'xxx';//改为您自己的
var api_key = 'xxx';//改为您自己的 (实际使用,建议在后台完成 signature 签名,以防暴露 api_key,或定期更改)
var timestamp = get_timestamp();
var client = hprose.Client.create('http://hprose.wwei.cn/qrcode.html', ['qrencode','qrdecode']);
//解码
$("#qrdecode").click(function(){
var timestamp = get_timestamp();
var imgurl = '';//远程图片
var imgdata ='<?php echo $base64_image;?>';//本地图片,直接调用生成的官方小程序二维码,用于解码
var signature = md5(api_key + timestamp + imgurl + imgdata);
client.ready(function(qrcode) {
qrcode.qrdecode(api_id,signature,timestamp,imgurl,imgdata)
.then(function(result) {
if(result.status !=1){
alert(result.msg);
return ;
}
//生成无 LOGO 二维码 api 接口
var qrcodeapi = "http://qr.liantu.com/api.php?text=";
//拼接接口+解码 url 并输出为图片
$("#show_test").html('<img src="'+qrcodeapi+result.data.raw_text+'"/>');
},function(e) {
console.error(e);
});
},
function(e) {
console.error(e);
});
});
</script>
</body>
</html>
但是解码需要用到的两个 js 库
这里直接提供下载地址: https://pan.baidu.com/s/1UYDj_WbmCG21VPd8XtpaXA
作者:TANKING
2018-7-13
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.