微信小程序 制作微信一键登录按钮

wxml

  <view class="content_3">
    <button open-type="getUserInfo" type="primary" lang="zh_CN" bindgetuserinfo="onGotUserInfo">
      <image class="btnImg" src="../../images/login/wechat.png"></image>
    微信用户一键登录</button>
    <view class="tip">
      <text>点击登录，即代表已阅读并同意</text><text style="color:#5FCDED" bindtap="userAgreement">《用户注册协议》</text>
    </view>
    <view class="phone_login" bindtap="phoneLogin">
      <text>输入手机号码登录/注册</text>
    </view>
  </view>

wxss

.btnImg {
  margin-right: 8rpx;
  width: 48rpx;
  height: 46rpx;
}


.content_3 button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.content_3 {
  padding: 0% 5%
}

js

  onGotUserInfo: function(e) {
    console.log(e)
    if (e.detail.errMsg != "getUserInfo:fail auth deny"){
      /** 获取用户信息 **/
      wx.getUserInfo({
        success: res => {
          console.log(res)
          app.globalData.userInfo = res.userInfo
          wx.setStorage({
            key: 'userInfo',
            data: res.userInfo,
          })
        }
      })
    }
  },