微信小程序登录实现过程

微信小程序登录思路及代码

因为项目要求要做微信小程序的登录功能,因为比较繁琐所以记录一下笔记,梳理一下思路

  1. 思路
    当用户点击个人主页或者购买物品收藏物品的时候往往都需要验证个人信息,比如提交订单要确定是谁购买的才能下订单,或者用户在查看个人信息的时候不能页面上都是空的什么都没有吧,所以这是候就需要登录的功能了

但是因为像微信、QQ这种社交软件都是腾讯的软件,而且牵扯到个人信息,往往都是通过加密的方式,一般公司的后台是不能直接请求到微信个人信息的数据的,所以都是通过三方协同来实现个人信息交互请求的,就像下图所示一样:
在这里插入图片描述
2. 废话说了这么多具体实现还是要看代码,所以直接上代码吧。
在这里插入图片描述
在完成一定的样式后,给要点击的元素添加上点击事件,点击允许的时候思考一下,当用户的状态如果是登录的那我们,让他去进行登录刷新页面头像和姓名一些信息呈现出来,那么如果不是登录状态呢,是不是要让他注册,注册完成之后在进行登录,有一定的思路之后就可以进行代码的编写。

3.因为我是用组件写的所以要在进行点击的时候把事件传给父组件
在这里插入图片描述
open-type或者是binduserinfo获取用户信息,可以从bindgetuserinfo回调中获取到用户信息
在这里插入图片描述
这里把子组件的方法传递给父组件,在父组件的子组件名上定义方法,在js文件夹中使用子组件传递给父组件的方法
在这里插入图片描述
这里是直接写好的代码,不过可以忽略其余代码主要是 AUTH.register(this),这里是把当前页面的实例this传了过去,上面引入了文件因为没有截图所以我打了出来
const AUTH = require("…/…/utils/auth"),具体实现登录注册时在这个文件夹里面去写,这里是auth.js里面的一个函数this作为一个参数给传了过去。
4.实现注册

/*注册的函数获取用户需要登录的code码还有用wx.getUserInfo获取用户
的信息提交必要传递的参数像iv加密算法、encryptedData包括铭感数据在
内的完整用户信息加密数据,
还有其他参数,根据文档需求那些是必传参数,
哪些是选择性的参数根据选择性的不同来传递。*/
async function register(page) {
   
  let _this = this;
  wx
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值