---

前言

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

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

1. 授权页面

一、授权页面

1.业务逻辑

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

2.涉及的接口数据

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

二、授权页面相关代码

1.页面代码

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 获取小程序登录成功后的codeconst { code } = await login();const loginParams={ encryptedData, rawData, iv, signature ,code};//  3 发送请求 获取用户的tokenconst {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);}}
})

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

button{margin-top: 40rpx;width: 70%;
}

2.效果

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

1. 【愚公系列】2022年11月 微信小程序-优购电商项目-首页设计

   文章目录 前言 一.首页设计 1.首页的业务逻辑 2.涉及的接口数据 3.关键技术 二.首页相关代码 1.⾃定义组件搜索框 2.wx.request封装 3.首页页面 4.效果 前言 对于小程序电商首 ...

2. 【愚公系列】2022年11月 微信小程序-优购电商项目-商品支付页面

   文章目录 前言 1. 商品⽀付页面设计规范 一.商品支付页面 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品购物车页面相关代码 1.页面代码 2.效果 前言 1. 商品⽀付页面设计规范 第 ...

3. 【愚公系列】2022年11月 微信小程序-优购电商项目-商品详情页面

   文章目录 前言 一.商品详情⻚⾯ 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品详情⻚⾯相关代码 1.页面代码 2.效果 前言 商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流 ...

4. 【愚公系列】2022年11月 微信小程序-优购电商项目-商品收藏⻚⾯

   文章目录 前言 一.商品收藏⻚⾯ 1.业务逻辑 2. 关键技术 二.商品收藏⻚⾯代码 1.页面代码 2.效果 前言 商品收藏其实是可以衡量商品好坏和受欢迎程度的一个标准,根据标准可以设置商品权重. 商 ...

5. 【愚公系列】2022年11月 微信小程序-优购电商项目-意见反馈页面

   文章目录 前言 一.意见反馈页面 1. 业务逻辑 2. 关键技术 二.意见反馈页面代码 1.图片上传组件 2.页面代码 3.效果 前言 对于需要收集产品上线后用户实际使用感受的,意见反馈绝对是一个很好 ...

6. 【愚公系列】2022年10月 微信小程序-优购电商项目-⾃定义组件传参

   文章目录 前言 一.id和data-xxx传参 二.导航传值 三.父子组件传值 前言 组件传参是小程序中非常重要的一个功能,因为小程序大多都是组件形式存在的. 一.id和data-xxx传参 view ...

7. 【愚公系列】2022年10月 微信小程序-优购电商项目-商品分类

   文章目录 前言 一.商品分类 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品分类代码 1.相关代码 2.效果 前言 商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部 ...

8. 【愚公系列】2022年10月 微信小程序-优购电商项目-小程序模板语法

   文章目录 前言 一.数据绑定 1. 普通写法 2. 组件属性 3. bool类型 二.运算 1. 三元运算 2. 算数运算 3. 逻辑判断 4. 字符串运算 5. 注意 三.列表渲染 1. wx:fo ...

9. 【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证

   文章目录 前言 一.webview内嵌网页的授权认证 1.内嵌页面 2.登录页面 二.web端相关函数 1.判断是否是小程序环境 前言 随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积 ...

最新文章

1. acwing算法题--铁路与公路
2. ubuntu查看网关
3. 微型计算机组装实验报告虚拟,微型计算机组装与维护实训(附光盘)
4. 推荐：Flowchart 一种通过文本方式描述的流程图
5. C++ static关键字
6. 【小项目】Axios 实现前后端交互
7. iOS中的所有字体和UILabel
8. css中用#id.class的形式定义样式，为什么这样用，不直接写成.class.代码如下：#skin_0.selected{}这种的...
9. http请求axios封装
10. java编程思想之并发(线程之间的协作)
11. Poj 1328 Radar Installation 贪心
12. drain open 线与_开漏（opendrain）和开集（opencollector）介绍
13. [转]Maxima笔记
14. C++设计模式23——访问者模式
15. 腾讯云8核 16G 18M配置服务器评测
16. GNS3快捷安装指南
17. Android手机直播系统开发介绍
18. 栈解旋unwinding
19. QQ小程序——无法正常创建项目与uniapp联动问题
20. 服务器安全检测和防御技术

热门文章

1. 【154期】面试官问：请你说说 B 树、B+ 树的原理及区别？
2. 用SendMessage/PostMessage发送WM_SIZE消息
3. 泊松分酒 泊松是法国数学家、物理学家和力学家。他一生致力科学事业，成果颇多。
4. 5G及后5G时代：万物互联到万物智能的黄金时代
5. uClinux操作系统移植
6. Unity3D 片元NDC空间z值（ZBuffer)转View空间z值，公式推导
7. DSM -- 进入linux文件系统
8. 不朽凡人 第五百二十章 有脾气冲我来
9. 对称加密 非对称加密
10. [原创]如何获得SBO的数据表中文描述和数据表的中文字段