前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【愚公系列】2022年11月 微信小程序-优购电商项目-授权页面

【愚公系列】2022年11月 微信小程序-优购电商项目-授权页面

作者头像
愚公搬代码
发布2022-11-14 17:00:21
3790
发布2022-11-14 17:00:21
举报
文章被收录于专栏:历史专栏历史专栏

文章目录


前言

前言:由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发。

自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口。在用户进入微信小程序的时候,判断用户是否授权了,如果没有授权的话就显示下面“界面简介”的第一个图,让用户去执行授权的操作。如果已经授权了,则直接跳过这个页面,进入首页。

1. 授权页面

一、授权页面

1.业务逻辑

  1. 获取⽤⼾信息 返回 encryptedData,rawData,iv,signature
  2. ⼩程序登录 返回 code
  3. 提交数据到⾃⼰ 的后台 执⾏post请求 提交数据
  4. 将 token 和⽤⼾数据 rawData 存⼊本地存储
在这里插入图片描述
在这里插入图片描述

2.涉及的接口数据

  1. 提交数据到后台 返回token

二、授权页面相关代码

1.页面代码

代码语言:javascript
复制
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
import { login } from "../../utils/asyncWx.js";

Page({
  // 获取用户信息
  async handleGetUserInfo(e) {
    try {
      
    // 1 获取用户信息
    const { encryptedData, rawData, iv, signature } = e.detail;
    // 2 获取小程序登录成功后的code
    const { code } = await login();
    const loginParams={ encryptedData, rawData, iv, signature ,code};
    //  3 发送请求 获取用户的token
    const {token}=await request({url:"/users/wxlogin",data:loginParams,method:"post"});
    // 4 把token存入缓存中 同时跳转回上一个页面
    wx.setStorageSync("token", token);
    wx.navigateBack({
      delta: 1
    });
  
    } catch (error) {
      console.log(error);
    }
  }
})
代码语言:javascript
复制
<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" >
  获取授权
</button>
代码语言:javascript
复制
button{
  margin-top: 40rpx;
  width: 70%;
}

2.效果

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-11-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 前言
    • 1. 授权页面
    • 一、授权页面
      • 1.业务逻辑
        • 2.涉及的接口数据
        • 二、授权页面相关代码
          • 1.页面代码
            • 2.效果
            相关产品与服务
            云开发 CloudBase
            云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档