小程序学习笔记（一）：用户微信授权登录

小程序学习笔记（一）：用户微信授权登录

一，思路：

判断用户是否已经授权，若未授权，显示默认页面；已授权，则显示用户信息，并跳转至下一页面。
默认页面：头像区域显示默认照片，底部有授权按钮。用户可通过点击授权按钮进行授权。

二，实现：

1，index.wxml：

• 头像区域：利用三元表达式，根据用户信息列表的头像属性值是否为空，判断头像区域显示照片来源，userInfo.avatarUrl为用户自身头像，defaultAvatarUrl为默认图片。
• 按钮显示：style属性设置display，根据用户是否已授权判断其值为true还是false。
• 按钮属性：open-type:微信开放能力，值为getUserInfo是获取用户信息；bindgetuserinfo:绑定用户点击的回调函数，返回获取到的用户信息。

open-type：getUserInfo：获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
bindgetuserinfo：用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效

<!--pages/index/index.wxml-->
<view class="login-index">
  <!-- 头像区域 -->
  <image class="login-avator" src="{
    {userInfo.avatarUrl ? userInfo.avatarUrl : defaultAvatarUrl}}"></image>
  <!-- 默认显示语&&用户昵称 -->
  <text class="welcome-word">Hi~{