微信小程序授权登录

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

    • 微信的详细登录流程如下 图
  • 前言
  • 一、 怎么使用 getUserInfo
  • 总结


微信的详细登录流程如下 图

微信小程序授权登录_第1张图片

前言

首先 要明白 授权登录是为了什么 ?
授权登录是为了要获取用户得信息、昵称、以及头像id,如果没有授权登录,用户无法正常使用小程序软件

微信小程序 是授权登录时是直接可以通过getUserInfo接口 弹出授权弹窗

一、 怎么使用 getUserInfo

使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息
就是 通过点击按钮 触发 getUserInfo 接口 获取用户信息
用户一点击 授权登录 就可以获取到 用户的信息了


 <button type='primary' open-type='getUserInfo'>授权登录</button>
 
	<!-- 头像 -->
		<view class="My_warpper_top">
			<view class="My_warpper_top_avatar">
				<view class="image">
					<open-data type="userAvatarUrl"></open-data>
				</view>
		
			</view>
			<view class="My_warpper_top_right">
				<text>
					用户ID{{UseId}}
				</text>
				<view>
					<open-data type="userNickName"></open-data>
				</view>
			</view>
		</view>
   

微信小程序授权登录_第2张图片
登录的时候 还需要调用一下 wx.login() 方法
调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成

      wx.login({
        timeout: 10000,
        success: async (result) => {
           console.log(result);
          // console.log(result.code);
          let { data } = await request("接口", {
            autoReg: true,
            code: result.code,
          })
          app.globalData.info = data.data
          // console.log(data);
          
          this.setData({
            UseId: app.globalData.info.uid,
          })

          console.log(this.data);



        },
        fail: () => { },
        complete: () => { }
      });

总结

微信登录就先讲解到这里,后续有补充的话 我会加上

你可能感兴趣的:(小程序入门到开发,小程序)