关于微信，qq小程序的登录，数据库-前端-接口解析

一、背景  

当我们在对接微信平台，开发微信小程序时，用户标识是必不可少的。用户标识贯通了整个开发过程，所以获取到唯一的用户标识是必须的。

二、多平台兼容  

因为考虑到一次开发，可多端运行，需要考虑兼容多平台兼容，这里我们同时考虑微信，qq，如果有其他小程序根据需要添加。

我们前端采用uniapp框架。后端采用python编写。

三、用户标识  

考虑到我们代码需要支持多平台，因此，需要对每个平台分析，并得到对应的唯一标识（openid）

1、微信  

根据小程序的开发文档，我们可以得知和解析其openid。具体看图：

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html    

流程如下：用户通过前端登录接口获得code，然后传给后台，后台再调用接口，解析到用户的openid。

2、qq  

qq小程序这边也是相同的方式，大差不差流程是相同。

qq开发文档

https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_userinfo.html    

四、需求分析  

首先第一步，是要分析我们的需求是什么，我们要实现什么功能。

1、我们要实现一个登录功能，并且可以同时支持qq和微信

2、我们要把数据库，前端，后端，都要描述清楚

五、开发设计  

（一）、前端设计  

1、code只能通过前端获得，所以前端需要先通过登录接口获取到code，然后把code传给后台。

2、如果后台返回得到的openid，或者其他id之后，前端需要把openid存起来，用作全局用户唯一标识。

3、需要根据微信，qq做区分，需要先调用渠道获取到当前渠道信息。使用uni.getprovider可以获取到渠道。    

（二）、数据库设计  

1、数据库需要储存用户信息，并方便之后用户标识。所以增加一个user表。

2、另外需要区分微信用户还是qq用户。

一个基础的用户数据表就完成了，有其他字段需要自行添加，比如后期可能需要用户昵称，手机号，用户头像等。

（三）、接口设计  

1、后台需要提前准备一个接口，供前前端传输code，后台处理之后并返回openid，

2、后台需要请求session接口获得openid。只需要一个接口。

3、需要做微信和qq区分。

六、代码实现  

1、前端代码  

这里我们通过getprovider获得渠道类型，然后调用登录接口获得code，然后使用code，provider传给后台。用来区分微信、qq，返回的openid我们存起来。setstorage是存缓存。也可以使用全局变量globaldata。

        onlaunch: function() {
           
            let that = this;
            uni.showloading({
                title: '正在登录中~'    
            });
            uni.getprovider({
                service: 'oauth',
                success: function(res) {
                    console.log(res.provider[0])
                    uni.login({
                        provider: res.provider[0],
                        success: (res2) => {
                            console.log(res2);
                            uni.request({
                                url: "https://127.0.0.1:80/login",
                                data: {
                                    "js_code": res2.code,
                                    "provider": res.provider[0]
           
                                },
                                method: "get",
                                success(res) {
                                    uni.setstorage({
                                        key: 'openid',
                                        data: res.data.openid,
                                        success: function() {
                                            console.log('success');
                                        }
                                    });
                                }
                            });
                            uni.hideloading();
           
                        },
                        fail: () => {
                            uni.showtoast({
                                title: "微信登录授权失败",
                                icon: "none"
                            });
                        }
                    })
           
                }
           
            });
        },
        globaldata: {    
            openid: ''
        },
           

2、模型  

后台我们采用python+django实现，我们创建对应的数据库模型，用来做数据处理

class wxuser(models.model):          
    """用户表"""          
    id = models.autofield(primary_key=true)          
    open_id = models.charfield(max_length=100, unique=true, verbose_name="微信 openid")          
    nick_name = models.charfield(max_length=28, verbose_name="昵称", null=true)          
    avatar_url = models.textfield(max_length=300, verbose_name="头像链接", null=true)          
    gender = models.integerfield(verbose_name="男0，女1", default="0")          
    source = models.integerfield(verbose_name="微信小程序0，qq小程序1", default="0")          
    created_at = models.datetimefield(default=timezone.now)          
    updated_at = models.datetimefield(default=timezone.now)          
    is_del = models.integerfield(blank=true, default="0", verbose_name="是否删除，0未删除，1已删除"
 

3、接口代码  

接口需要做渠道区分，如果已经存在就返回openid

def login(request):          
    js_code = request.get.get("js_code")          
    provider = request.get.get("provider")          
    if provider == "weixin":          
            appid = 'wxf8cb9a'          
            secret = 'ff2ff7a449b'          
            response = requests.get(          
                "https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code" % (          
                    appid, secret, js_code))          
            source = 0          
    elif provider == "qq":          
        appid = '11234084'          
        secret = '1loc0he'          
        response = requests.get(          
            "https://api.q.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code" % (          
                appid, secret, js_code))          
        source=1          
    openid = response.json()["openid"]          
    user= wxuser.objects.filter(open_id=openid, source=source).first()          
    if user== none:          
        wxuser(open_id=openid).save()          
    return jsonresponse({"openid": openid})        

七、文章总结  

本文提供了一个简单的登录实例，供大家参考。

使用开发工具：hbuilder x，pycharm，微信开发者工具。

本文主要讲述，前端如何获取设备渠道，微信，qq登录方式。后端数据库大概，如何调用接口获取openid。