网页设计作业网站素材和效果图html5 手机网站开发教程
在企业微信里面新建了一个应用，指向了搭建服务器上Django写的web应用。
web应用需要使用扫描二维码的功能，就使用了大家都评价效果好的微信的扫一扫，事实也证明微信的扫一扫很好，但实现这个功能还是花了自己不少时间，很多都是细节，如果你陷在坑里都不知道自己在坑里。
一.python文件:wx_method.py
拷贝这个文件，只需要修改两个地方：app_id和secret，但你着两个参数值要找对，否则后面的签名过不了。
另外特别注意企业微信和微信的token_url是不一样的。
# -*- encoding:utf-8 -*-
import uuid
import time
import requests
import json
# app_id和secret从微信公众号中获取;获取路径:微信公众号->开发->基本配置->公众号开发信息,secret从APP的地方获取
app_id = "wx************************"
secret = "fN**********************************************"
grant_type = "client_credential"
def get_token():
"""
获取微信access_token;
access_token有效期为2小时,建议保存到数据库中,定时更新;
直接获取数据库中的数据.
"""
#token_url = "https://api.weixin.qq.com/cgi-bin/token"
token_url ="https://qyapi.weixin.qq.com/cgi-bin/gettoken"
payload = {
#"appid": app_id,
#"secret": secret,
"corpid": app_id,
"corpsecret": secret,
"grant_type": grant_type
}
res = requests.get(token_url, params=payload)
resp = json.loads(res.text)
if resp.get('access_token'):
return True, resp['access_token']
return False, resp
def create_noncestr():
'''
生成签名的随机串
'''
return uuid.uuid1()
def create_timestamp():
'''
生成签名的时间戳
'''
return str(int(time.time()))
def get_jsapi_ticket(access_token):
'''
获取jsapi_ticket;
jsapi_ticket是公众号用于调用微信JS接口的临时票据;
https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN
'''
url = 'https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket'
payload = {
"access_token": access_token,
"type": "jsapi"
}
res = requests.get(url, params=payload)
res_result = json.loads(res.text)
if res_result["errcode"] == 0:
return True, res_result['ticket']
return False, res_result
二.view.py中的签名方法调用
这个主要是获得签名传给html中的js进行处理。
from .wx_method import get_token, get_jsapi_ticket, create_noncestr, create_timestamp
def logwechat(request):
'''
生成签名算法;
返回微信config接口注入权限验证配置参数;
'''
app_id = "wx******************"
#url = 'http://yourtesturl
url = request.POST.get('tokenUrl')
ok, access_token = get_token()
if not ok:
return {'code': 1006, 'message': '获取签名算法失败'}
ok, jsapi_ticket = get_jsapi_ticket(access_token)
if not ok:
return {'code': 1006, 'message': '获取签名算法失败'}
noncestr = create_noncestr()
timestamp = create_timestamp()
stringlink = "jsapi_ticket={}&noncestr={}×tamp={}&url={}".format(jsapi_ticket, noncestr, timestamp, url)
crypt = hashlib.sha1(stringlink .encode('utf-8'))
signature = crypt.hexdigest()
result_dict = {
"code": 0,
"nonceStr": noncestr,
"timestamp": timestamp,
"signature": signature,
"appId": app_id,
"message": ""
}
return JsonResponse(result_dict)
这个不复杂，只要你调试时调用能生成签名就没有问题。
三.html 页面扫一扫
调用微信扫一扫的功能代码网上很多，随便都能找了一个 。
<body>
<div><input type="text" name="sn" id="codeValue"><input id="scanQRCode" value="扫一扫" type="button"></div>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
<script type="text/javascript">
$(function() {
//需要把当前页面的url地址传到后台,生成签名信息时需要使用到
var tokenUrl= location.href;
//获取签名的后台接口
var _getWechatSignUrl = '/logwechat/';
$(document).ready(function(){
//获取签名
$.ajax({
url:_getWechatSignUrl,
data:{tokenUrl:tokenUrl},
dataType: 'json',//返回数据格式
success:function(res){
//alert(tokenUrl);
//获得签名之后传入配置中进行配置
if (res.code != 0){
alert(res.message+',请刷新重试');
return false;
}
//alert(res.code);
wxConfig(res.appId,res.timestamp,res.nonceStr,res.signature);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(XMLHttpRequest.status);
//alert(textStatus);
//alert(tokenUrl);
}
})
})
//微信的配置信息
function wxConfig(_appId,_timestamp, _nonceStr, _signature) {
wx.config({
// beta: ture,
//debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: _appId,// 必填,公众号的唯一标识
timestamp: _timestamp,// 必填,生成签名的时间戳
nonceStr: _nonceStr,// 必填,生成签名的随机串
signature: _signature,// 必填,签名,见附录1
jsApiList: ['scanQRCode']
// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
//alert(_signature);
}
$("#scanQRCode").click(function(event){
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult : 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有
success : function(res) {
// alert('ok2');
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
$("#codeValue").val(result);//赋值
//form.submit(); //如果希望扫描后提交页面
},
error:function(res){
//alert(res);
}
});
})
});
</script>
</body>
</html>
一旦你调通了就容易了。