0、Github代码
1、在微信公众平台,注册公众平台测试号
注册网址:微信公众平台
参考:微信公众号扫码实现网站登录-Django+Vue版本-超详细保姆级教程_微信公众号网页扫码登录_PENG越的博客-CSDN博客
-
进入后会给你一个appID和一个appsecret,这个是关键参数,等会测试要用。这个接口配置信息就是与微信后端交互的关键。
-
实现接口配置信息
- URL这里填公网的api。本项目:http::/或https::/ + 公网ip + /api/weChatSignature/
- Token,可以随便写。这里的Token在Django中需要用到。
注意:这里的“接口配置信息”提交,需要先跑Django,之后才会成功
2、代码修改
(1)Django
下面要修改的信息在网址(申请得到):微信公众平台
修改的位置:wx_django\app\views.py
-
修改 appID 和 appSecret
appID = "wx8ac3xxx9236efe2a"
appSecret = "131b8d9d8xxx74afb751ce6b2"
-
修改token(即yue_token),这里的token就是步骤1的Token
class WeChatSignature(APIView):
def get(self, request):
...
yue_token = 'yueyue'
...
def post(self, request):
...
-
可以获取小程序的独有id(OpenId)
# 这里的from_user_name就是OpenID
from_user_name = xml_data.find('FromUserName').text
注意:这里的Django发出的服务端口必须时80端口,否则需要通过nginx映射到80端口
- 运行Django命令
python manage.py runserver 0.0.0.0:80
(2)Vue2
修改的位置:wx_vue\src\components\HelloWorld.vue
-
修改发送发送的地址
https://api.xxxx.pro + /api/weChatLogin (前面这个是跑django的ip,需要公网)
'https://api.xxxx.pro/api/verifyLogin?scene=' + this.scene
methods: {
getQrUrl() {
axios.get('https://api.xxxx.pro/api/weChatLogin').then((res) => {
....
})
},
loginPoll() {
axios.get('https://api.xxxx.pro/api/verifyLogin?scene=' + this.scene).then((res) => {
...
}
})
}
}
- 运行vue2
# 安装相关依赖
npm install
# 运行服务
npm run serve