微信小程序功能：用户授权

分手后的思念是犯贱 2023-02-20 03:20 36阅读 0赞

## 微信小程序–授权页面 ##

> 包含功能点：
> 
>  *  用户授权

### 结构：auth.wxml ###

<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">授权</button>

### 样式：auth.less ###

page{
      padding-top: 80rpx;
    }
    
    button {
      margin: auto;
      width: 70%;
    }

### 逻辑：auth.js文件 ###

// pages/auth/auth.js
    import {  login } from "../../utils/asyncWx.js"
    import {  request } from "../../request/index.js";
    
    
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
    
      },
      // 获取授权
       handleGetUserInfo(e) { 
        try { 
          // 1.获取用户信息
          const {  encryptedData, rawData, iv, signature } = e.detail;
          // 2.获取小程序登录成功后的code
          login().then(res=>{ 
            let code = res.code;
            console.log(code)
            let loginParams = {  encryptedData, rawData, iv, signature, code };
            console.log(loginParams)
            // 3.发送请求 获取用户token
            request({  url: "/users/wxlogin", data: loginParams, method: "POST" }).then(result=>{ 
              // 获取不到token，结果为null；分析结果：可能因为我不是开发者，没有权限
              console.log(result)
              // 4.把token存入缓存中 同时跳转回上一个页面
              wx.setStorageSync("token", result);
              wx.navigateBack({ 
                delta: 1
              });
            });
          });
          
        } catch (error) { 
          console.log(error)
        }
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
    
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

### 页面配置文件：auth.json文件 ###

{ 
      "usingComponents": { },
      "navigationBarTitleText": "支付授权"
    }