Django与Vue2搭建一个简单的微信扫码登录页面

0、Github代码

• GitHub - caip1299920300/wx_Django_Vue: Django和vue2搭建一个简单的微信扫码登录页面

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

 3、网页显示结果