Django开发微信小程序之逆波兰计算器（三）获取用户授权和用户名

太过爱你忘了你带给我的痛 2022-05-22 06:50 149阅读 0赞

**本小程序的计算器带有历史记录功能，也就是每个用户都有自己的历史记录，因此需要存储用户信息，用于识别用户。这就少不了获取用户的Openid，因为这是用户的唯一标识符，除此之外，我们还需要获取用户名及头像信息。**

**整体的流程为：**

*  用户登录，前端获取到code，将code传给服务器后端
 *  服务器后端用code，AppId和AppSecret到微信指定的API中换取用户Openid，若是新用户，则新建一个用户，存储该Openid
 *  后端将该用户的Openid传给前端，同时前端获取到该用户的用户名，并将用户名和Openid传给后端，存储用户名

[微信官方文档][Link 1]推荐的流程是在前端获取到**加密数据encryptedData**、**初始向量iv**、**code**，然后将他们一起传给后端，后端利用code获取到**session\_key**，最后利用iv和session\_key，解密encryptedData，从而获取到包含Openid和用户名等的所有信息。这样的好处是无需在前端和后端来回传送多次数据，但由于本小程序只需要Openid和用户名，因此不必那么麻烦解密数据。

**用户登录，获取code并传给后端**  
app.js

App({
      globalData: {
        userInfo: null,  //存储用户信息
        openid: null     //存储openid
      },
      onLaunch: function () {
        var that = this;
    
        // 登录
        wx.login({
          success: res => {
              wx.request({
                url: 'https://www.******/getopenid',
                data: {
                   code: res.code
                },
                success:function(result){
                   if(result.data != 'none'){
                      that.globalData.openid = result.data;
                   }else{
                     wx.showToast({
                       title: '登录失败',
                       icon: 'none',
                       duration: 1500,
                     })
                   } 
                },
                fail:function(){
                  wx.showToast({
                    title: '网络错误',
                    icon: 'none',
                    duration: 1500
                  })
                } 
              })
          },
          fail:function(){
            wx.showToast({
              title: '网络错误',
              icon: 'none',
              duration: 1500,
            })
          }
        })
      }
    })

**建立用户模型，用于存储用户Openid和用户名**  
models.py

from django.db import models
    
    class User(models.Model):
            openid = models.CharField(max_length=20)
            nickname = models.CharField(max_length=20,default='匿名')
            def __str__(self):
                    return self.nickname

**获取openid并传给前端**  
views.py

from django.conf import settings
    from django.http import HttpResponse
    from .models import User,Record
    
    import urllib.request,json
    
    def getOpenid(request):
            code = request.GET.get('code')
            url = 'https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code' % (settings.APPID,settings.APPSECRET,code)
            response = urllib.request.urlopen(url)
            result = json.loads(response.read().decode('utf-8'))
            openid = result.get('openid')
            if openid:
                    users = User.objects.filter(openid=openid)
                    if not users:
                            user = User(openid=openid)
                            user.save()
            else:
                    openid = 'none'
            return HttpResponse(openid)

**在欢迎页获取用户信息，并存储在globalData中。在此过程中需要用户授权，若用户之前已经授权，则直接使用wx.getUserInfo方法获取用户信息，若用户未授权，则弹出模态框，询问用户是否授权，若同意授权，则从open-type为getUserInfo的button绑定的回调函数返回的结果中获取用户信息。最后获取到用户信息之后才跳转到计算页面。**  
index.js

**由于微信的模态框无法加入按钮，所以需要模态框需要自己写一个，并附带上open-type为getUserInfo的button。模态框用绝对定位布局即可实现，利用z-index，在模态框的底下一层加一个覆盖全屏的遮罩，并使模态框和遮罩同时显示和隐藏。**  
index.wxml

<view class="container">
      <view class="cover">
        <image src="{
       {userInfo.avatarUrl}}" class="userinfo-avatar" mode="cover"></image>
      </view>
      <text>{
       {userInfo.nickName}}</text>
      <view class="model" wx:if="{
       {showModel}}">
        <view class="modelTitle">微信授权</view>
        <view class="modelBody">微信登录需要获取你的用户信息，请前往授权</view>
        <view class="btns">
          <button open-type="getUserInfo" class="getInfo_button" bindgetuserinfo='getUserInfo' bindtap='closeModel'>去授权</button>
        </view>
      </view>
      <view class="mask" wx:if="{
       {showModel}}"></view>
      <view class="usermotto">
        <text class="user-motto">{
       {motto}}</text>
      </view>
    </view>

**效果如下：**  
![这里写图片描述][70]

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html#wxloginobject
[70]: /images/20220522/0a2ea13f985b4ee2b90e9f1be6678d74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220522/d1b0e585827a440db7203360c7fa1ad8.png