需求:使用企业微信进行扫码装车。
难点:如何调起企业微信扫一扫功能
实现步骤如下
1:注册企业微信,成为管理员,得到CORPID(企业ID,每个企业微信都有一个,企业下的所有应用都是同一个)和CORPSECRET(应用Secret,每个应用都有,各不相同)
企业ID所在位置如下图
应用Secret位置如下图,如果没有应用先创建应用(废话)
3,开始配置扫码核心代码文件,单独一个php文件叫qy-weixin.php。就当接口文件吧
<?php
// 签名公司效验地址 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
// 方法1 get_access_token() 获取 access_token
// 方法2 get_jsapi_ticket() 获取 jsapi_ticket
// 方法3 fen_xaing_config($url) 获取js分享配置文件,需要传入分享的地址(#号以前的)
class WeiXingInit
{
public $CORPID = 'wwc1f9******40';//这里填企业ID
public $CORPSECRET = 'vDX_a5********L8w';//这里是应用Secret
// access_token 存储文件 频繁刷新access_token会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存access_token
public $fileName_access = 'access_token_xiaolong.txt';
public $fileName_sing = 'sing_xiaolong.txt';
// jsapi_ticket 存储文件 频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket
public $fileName_jsapi_ticket = 'jsapi_ticket_xl.txt';
public $debug = false;
// 获取 access_token
public function get_access_token()
{
$data = [];
if (is_file($this->fileName_access)) {
// 验证是否过期
$time = time();
$data = json_decode(file_get_contents($this->fileName_access), true);
if (($time - $data['time']) > ($data['expires_in'] - 100)) {
$data = $this->access_token_get_save();
}
} else {
$data = $this->access_token_get_save();
}
return $data;
}
// access_token 获取保存
public function access_token_get_save()
{
$url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken";
$post_string = "corpid=" . $this->CORPID . "&corpsecret=" . $this->CORPSECRET;
$url = $url . '?' . $post_string;
$data = json_decode($this->curl($url), true);
$data['time'] = time();
file_put_contents($this->fileName_access, json_encode($data));
return $data;
}
// 获取 jsapi_ticket
public function get_jsapi_ticket()
{
$data = [];
if (is_file($this->fileName_jsapi_ticket)) {
// 验证是否过期
$time = time();
$data = json_decode(file_get_contents($this->fileName_jsapi_ticket), true);
if (($time - $data['time']) > ($data['expires_in'] - 100)) {
$data = $this->jsapi_ticket_get_save();
}
} else {
$data = $this->jsapi_ticket_get_save();
}
return $data;
}
// jsapi_ticket 获取保存
public function jsapi_ticket_get_save()
{
$data = [];
$data_access = $this->get_access_token();
if (!empty($data_access['access_token'])) {
$url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket";
$post_string = "access_token=" . $data_access['access_token'];
$url = $url . '?' . $post_string;
$data = json_decode($this->curl($url, $post_string), true);
$data['time'] = time();
file_put_contents($this->fileName_jsapi_ticket, json_encode($data));
}
return $data;
}
// 生成随机字符串
public function generate_password($length = 8)
{
// 密码字符集,可任意添加你需要的字符
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$password = "";
for ($i = 0; $i < $length; $i++) {
// 这里提供两种字符获取方式
// 第一种是使用 substr 截取$chars中的任意一位字符;
// 第二种是取字符数组 $chars 的任意元素
// $password .= substr($chars, mt_rand(0, strlen($chars) – 1), 1);
$password .= $chars[mt_rand(0, strlen($chars) - 1)];
}
return $password;
}
// 微信分享config
public function fen_xaing_config($url)
{
$noncestr = $this->generate_password(15);
$time = time();
file_put_contents($this->fileName_sing, 'sing='.$this->get_qian_ming($url, $time, $noncestr).'url:'.$url.'time'.$time.'--non'.$noncestr);
return [
'debug' => $this->debug,
'appId' => $this->CORPID, // 必填,公众号的唯一标识
'timestamp' => $time, // 必填,生成签名的时间戳
'nonceStr' => $noncestr, // 必填,生成签名的随机串
'signature' => $this->get_qian_ming($url, $time, $noncestr), // 必填,签名
'jsApiList' => ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'scanQRCode'], // 必填,需要使用的JS接口列表
];
}
// 生成签名
public function get_qian_ming($url, $t_time, $noncestr)
{
$data_jsapi = $this->get_jsapi_ticket();
$str = "";
if (!empty($data_jsapi['ticket'])) {
$jsapi_ticket = $data_jsapi['ticket'];
$timestamp = $t_time;
$str = 'jsapi_ticket=' . $jsapi_ticket . '&noncestr=' . $noncestr . '×tamp=' . $timestamp . '&url=' . $url;
$str = sha1($str);
}
return $str;
}
// 获取接口数据
public function curl($url, $post_string = '')
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 500);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_URL, $url);
$res = curl_exec($curl);
curl_close($curl);
return $res;
}
}
$weiXingInit = new WeiXingInit();
$url = $_GET['url'];
$info = $weiXingInit->fen_xaing_config($url);
$protocol = (!empty($_SERVER[HTTPS]) && $_SERVER[HTTPS] !== off || $_SERVER[SERVER_PORT] == 443) ? "https://" : "http://";
$url1 = $protocol.$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
file_put_contents('url.txt',$url1);
header('Access-Control-Allow-Origin:*'); //支持全域名访问,不安全,部署后需要固定限制为客户端网址
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 动作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //响应头 请按照自己需求添加。
$result = array('code' => 1, 'msg' => 'findok', 'data' => $info, 'url' => '', 'wait' => '');
echo json_encode($result);exit;
4,开始使用功能,创建一个文件进行测试。如下是doqrcode.php(不能直接使用,要填自己的接口地址)
<?php
header('Content-Type:text/html;charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>装车验收扫码入口</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<style>
body{margin: 0;padding: 0;height: 100%;}
.mian{
width: 100%;
overflow: hidden;
height: 100%;
position: absolute;
left: 0px;
width: 100%;
background-image: linear-gradient(160deg, #4F77AB 20%,#008cff 80%);
}
.center{
text-align: center;
position: relative;
top: 30%;
width: 100%;
}
#scanQRCode{
margin: 0 auto;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 155px;
height: 155px;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
text-align: center;
letter-spacing:10px;
padding-left: 10px;
}
.footer{
position: absolute;
bottom: 50px;
width: 100%;
}
.texts{
text-align: center;
color: #BFBFBF;
}
</style>
</head>
<body>
<div class="mian">
<div class="center">
<div id="scanQRCode">扫客户码</div>
</div>
<div class="footer"><div class="texts">本应用由深圳市中用软件科技有限公司提供技术支持</div></div>
</div>
</body>
<script>
window.onload = function () {
var pageUrl = location.href.split('#')[0];
//alert(location.href.split('#')[0]);
// console.log(pageUrl)
$.get('http://你的接口地址/qy-weixin.php', {
url: pageUrl
}, function (data) {
if (data != '') {
var res = JSON.parse(data);
//alert(data);
resd = res.data;
wx.config({
beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: resd.appId, // 必填,企业微信的corpID
timestamp: resd.timestamp, // 必填,生成签名的时间戳
nonceStr: resd.nonceStr, // 必填,生成签名的随机串
signature: resd.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: ["scanQRCode", "translateVoice"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
}
});
wx.error(function (res) {
alert("出错了:" + res.errMsg); //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['scanQRCode', 'translateVoice'],
success: function (res) {}
});
//点击按钮扫描二维码
document.querySelector('#scanQRCode').onclick = function () {
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
// alert(res);
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
window.location.href = './goodlist.php?khid='+result;//扫描后有个链接,然后跳转到该页面
},
error: function(res) {
if (res.errMsg.indexOf('function_not_exist') > 0) {
alert('版本过低请升级')
}
}
});
};
});
}
</script>
</html>
5,接口和测试文件都写好了,就回到企业微信进行配置应用配置访问路径。
6,最后一步。非常重要。验证域名合法性
具体验证方法里面有说明,其实很简单,就下载那个txt文件放到域名根目录,然后点击开始验证就可以了
以上就是简单的企业微信上的扫码功能,其实微信扫码也差不多。附件包含以上文件和另加微信扫一扫接口文件。修改参考企业微信的接口文件即可。