小程序之----用户授权（获取用户信息）

前言：

      自打微信调整wx.getUserInfo接口之后，开发之中对用户授权获取用户信息的问题，也是层出不穷，上网搜索各位大佬的经典操作之法，学习之余结合自己的想法，也总结处一套适合自己使用的方法。

     如果已经知道怎么处理的，也烦请你看一下，给出你的宝贵意见！！！！！

    wx.getUserInfo 在开始阶段是自己执行的，自动弹框，让用户授权，现在虽然调整为不自动弹窗，但是微信官方还是给出了另外一个解决方案，button .

     我的方案：

         1.在你需要获取用户信息的页面自定义弹出框；

         2.弹出框button设置open-type='getUserInfo'；

         3.用button点击事件获取信息就可以了；

我们可以让用户自己唤起弹窗授权，接下来上代码说明一切！！！

项目文件分类：

 自定义弹出框：

   scope文件夹   在template文件之中，可以当作一个模板多次调用，因为用户不一定一次性就授权成功

scope 文件是模板文件。。。。

scop.wxml

<template name="Scope">
  <view class="scope {{scopeShow?'active':''}}" style='height:{{SystemInfo.Height*0.24}}px'>
    <view class='scope_title' 
          style='line-height:{{SystemInfo.Height*0.24*0.25}}px'>
      温馨提示
    </view>
    <view class='scope_content'>
      该小程序需要获取您的基本信息！
    </view>
    <view class='scope_footer' >
      <button style='line-height:{{SystemInfo.Height*0.24*0.3}}px' bindtap="onCancel">
        取消
      </button>
      <button style='line-height:{{SystemInfo.Height*0.24*0.3}}px'
               open-type='getUserInfo' bindgetuserinfo="onConfirm" >
        确认
      </button>
    </view>
  </view>
</template>

scope.wxss

.scope {
  width: 70%;
  margin: 0 auto;
  margin-top: 60%;
  background: #fff;
  border-radius: 20rpx;
  font-family: PingFangSC-Regular;
  opacity: 0;
}

.scope.active{
  opacity: 1;
}

.scope_title {
  text-align: center;
  vertical-align: middle;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #444;
}

.scope_content {
  width: 80%;
  height: 30%;
  margin: 5% auto;
  font-size: 32rpx;
  font-weight: 500;
  color: #222;
  text-align: center;
}

.scope_footer {
  height: 30%;
}

.scope_footer button {
  width: 50%;
  height: 100%;
  padding: 0;
  display: inline-block;
  background: transparent;
  font-size: 32rpx;
  font-weight: 500;
  color: #939ba4;
  text-align: center;
  border: none;
  outline: medium;
  border-radius: 0rpx;
}

.scope_footer button::after {
  background: transparent;
  border: none;
  outline: medium;
  border-top: 1rpx solid #939ba4;
  border-radius: 0rpx;
}

.scope_footer button:last-of-type {
  color: #ff8b00;
}

.scope_footer button:last-of-type::after {
  border-left: 1rpx solid #939ba4;
}

@keyframes scope {
  0%{
    transform: scale(0)
  }
  100%{
    transform: scale(2)
  }
}

home文件是项目首页  在pages文件夹中

 

   home.wxml

<import src="../../template/scope/index.wxml" /> //模板调用
<view  wx:if="{{scopeShow}}"  class='ScopeBox' catchtouchmove='move'
       animation="{{scopeBoxanimation}}">
  <template is="Scope" data="{{SystemInfo,scopeShow}}" />
</view>

home.wxss

@import '../../template/scope/index.wxss';  
//引入样式文件

.ScopeBox{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* animation: fade-in 0.3s ease; */
  background-color:rgba(0,0,0,.7);
  z-index: 1000;
}

home.js

Page({
  data: {
   
    scopeBoxanimation:'',
    scopeShow:false,
  },
  onLoad (options) {
    
    setTimeout(()=>{
      that.scopeBox(that,'open')
    },1000)
   
  },
  
  
 
  scopeBox(that, currentStatu){//蒙版层动画
    var animation = wx.createAnimation({
      duration: 400, //动画时长 
      timingFunction: "linear", //线性 
      delay: 100 //0则不延迟 
    });
    this.animation = animation;
    animation.opacity(0).step();
    that.setData({
      scopeBoxanimation: animation.export()
    })
    setTimeout(function () {
      animation.opacity(1).step();
      that.setData({
        scopeBoxanimation: animation
      })
      if (currentStatu == "close") {//关闭 
        that.setData({
          scopeShow: false
        });
      }
    }.bind(this), 200)
    if (currentStatu == "open") {//打开
      that.setData({
        scopeShow: true
      });
    }
  },
  
  onConfirm(e) {
    let that = this;
     console.log(e.detail)
//查看控制台输出的内容就是你想获取到的用户信息，可以用来和自己服务器存储等等一系列操作

    that.scopeBox(that, 'close')
  },
  move(){},//解决事件穿透问题
  
})

小提示：

   微信之所以修改用户授权弹窗，其实也是为了保护微信用户的信息安全，但对于一部分小程序来说是需要获取用户信息的，同样的一部分是完全不需要获取的用户信息的，一方面减少代码逻辑，另一方面也可以怎强用户体验。

 小程序本来就是一个用完就走的微型APP，这样才能更加规范小程序的生态环境。

 

 

 

后记：

   这篇文章只是说明了获取用户信息的解决办法，但是这也存在弊端，就是只能弹起一次用户授权，如果一定要用户授权的话，还需要做一些处理，请关注后续的文章更新。。。