当用户进入微信小程序登陆时，，会泛起一个登录界面，，好比获取用户用户头像和昵称等，，这些在微信小程序开发者而言，，是可以获取用户数据的，，下面就为各人介绍小程序种种姿势实现登录的要领 

在本篇文章所讲的登录不但仅指的是wx.login而是包括以下三点--

• 获取用户基本信息
• 挪用微信wx.login接口
• 实现服务器端登录

我需要获取用户头像和昵称要怎么做？
？？？

用户头像和昵称关于我们开发小程序险些算是刚需，，那么我们应该怎么样准确高效的获取&使用它们呢？
？？？

旧时代--自动授权一把梭

新时代--使用小程序的open-data

使用open-data时需要注重小程序基础库的版本
。。。详细使用方式如下

着实可以将open-data看作图片或字符串，，想要控制样式在外层加上view标签以及响应的class即可
。。。

相比之前获取用户基本信息的方式，，这个方案照旧较量走心的，，若是一些小程序只是对用户的头像昵称等基本信息有需求的话就不需要和以前一样大费周章的调一个getUserInfo，，拿回来一堆用不上的工具
。。。

我需要用户在服务器端实现登录该怎么做？
？？？

凭证微信小程序的文档，，能在服务器端完成登录（获取用户session_key/openid等），，有三个前端传回的参数是必不可少的：

• code
• encryptedData
• iv

code是通过wx.login获取的，，而encryptedData & iv是从wx.getUserInfo中获取的
。。。

可是，，由于微信基础库更新，，作废通过api挪用getUserInfo的能力，，需要使用button组件的开放能力[open-type]去挪用getUserInfo要领
。。。

上述获取数据的要领详细建议阅读官方文档：

有关getUserInfo的文档

有关login的文档

踩坑心得：请确保wx.login早于getUserInfo，，不但是代码执行层面的早，，最好是login回调乐成之后才去getUserInfo，，否则可能会泛起后端解密失败的情形，，导致登录失败
。。。

（还可以通过API方式挪用getUserInfo的时间怎样实现后端登录就不在此赘述了
。。。）

只管已经无法自动授权，，我们还可以这样实现小程序的登录授权

总体来说有两种授权模式，，一种是强制授权，，另一种则是按需授权，，无论是怎么样的流程基本都可以归类为这两种授权
。。。

强制授权

• 适用规模：对用户身份强依赖的小程序，，用户一进来就必需要知道用户的相关信息，，或者是用户一进来就必需凭证用户id来拉取相关资源
  。。。

• 授权模式：模式多种，，但配合特点都是会打断用户正常进入小程序的流程，，体验上有点瑕疵，，在此列出两种模式：

  • 不跳转页面，，无论点击页面中的任何地方都会弹出授权弹窗，，(没有将鼠标点击录进去，，现实是无论点哪都会触发授权)↓↓

   

  这种方案的实现方式着实很简朴也很粗暴--将一个笼罩全屏的button组件以position: fixed的方式盖在需要这样登录的页面上，，然后将其opacity设为0即可
  。。。

   

  • 跳转页面，，检测到非登任命户则强制跳转到登录页，，在内里举行登录逻辑的处理
    。。。

   

  就个人而言，，照旧较量喜欢这种授权模式的，，和微信自己生态内的授权有些许相似，，对用户来说不会那么突兀
  。。。

  详细实现方式--相比上一种就重大一些了，，这一种方式属于全局性子的阻挡授权，，会中止目今页面的所有行动，，跳转至登录专用的页面，，在登录页登录乐成后再返回原页面
  。。。

   

按需授权

• 适用规模：对用户身份妄想十明确确、可以接受在用户做出某些行动之后再获取用户身份的小程序
  。。。

• 授权模式：不会打断小程序页面的主流程，，将授权加入主流程中
  。。。实现方式也是十分无邪，，无论是列表或是图片甚至是一段文字，，只要是需要用户手动触发的，，都可以作为授权的提倡时机
  。。。

  与上述强制授权中不跳转页面的方式类似，，可是有一个重大的差别--这种方式不会强制用户授权，，而是在需要授权时才会泛起，，相对没有这么骚扰使用小程序的用户
  。。。

以上就是微信小程序登录授权界面怎样开发 ，，更多小程序开发文档可以关注网站
。。。

小程序工具提供多类型商城/门店小程序制作，，可视化编辑 1秒天生5步上线
。。。通过拖拽、拼接？
？？？榻峁剐〕绦蛏坛且趁，，所看即所得，，只需要美工就能做出细腻商城
。。。更多小程序请审查：小程序市肆