【原生微信小程序】 组件的使用，权限弹窗

1， pages 同级页面增加 文件夹（components）

2， 组件文件夹内容 还是 老四样

![在这里插入图片描述](https://img-blog.csdnimg.cn/b541b617e2734b2b8b767e7dae178efb.png

3， 弹框 组件的内容
wxml 文件

 <!-- 弹窗 -->
<view class="shade" wx:if="{{show_loadnote}}"></view>
<view class="reminder" wx:if="{{show_loadnote}}">
  <view class="reminder_title">
    <view class="title_text">{{title}}</view>
  </view>
  <view class="reminder_content">
  {{content}}
  </view>

  <view class="reminder-btn">
    <button class="confirm" style="width:50%;" catchtap="close_reminder" >{{cancel}}</button>
    <button class="cancel"  bindgetphonenumber="getPhoneNumber" open-type="getPhoneNumber" style="width:50%;">{{confirm}}</button>

    <!-- <button class="cancel"  bindtap="getUserProfile" open-type="getUserInfo" style="width:50%;">{{confirm}}</button> -->
    <!-- <button style='background-color: transparent; width:100%; height:100%;' class="authbtn" hover-class="none" open-type="getPhoneNumber" 
      bindgetphonenumber="getPhoneNumber">授权登录</button> -->
  </view>
</view>

wxss 文件

/* 弹窗 */
.shade{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.reminder{
  width: 80%;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  top: 30%;
  left: 10%;
  position: absolute;
  z-index: 3;
}
.reminder_title{
width: 94%;
padding-left: 3%;
padding-right: 3%;
margin-top: 4%;
}
.title_text{
  width: 100%;
  text-align: center;
  font-weight: 600;
}
.reminder_content{
  width: 100%;
  height: 240rpx;
  line-height: 240rpx;
  text-align: center;
  color: #555;
}
.reminder-btn{
  width: 100%;
  display: flex;
  justify-content: space-around;
  
}
.confirm{
  color: #555;
  border-top: 1px solid #f8f8f8;
  border-right: 1px solid #f8f8f8;
  font-size: 32rpx;
  background-color: #fff;
}
.reminder-btn button{
  border-radius: 0px;
  font-weight: 400;
  height: 110rpx;
  line-height: 80rpx;
}
.cancel{
  color:#2979FF;
  border-top: 1px solid #f8f8f8;
  font-size: 32rpx;
  background-color: #fff;
}

js文件

Component({
  //组件的属性可以直接在组件标签上定义
    properties: {
      title:'提示',// 属性名
      content:'此功能需要登录使用',
      confirm:'确定',
      cancel:'取消',
      show_loadnote:false,
    },

    data: {// 私有数据，可用于模板渲染
      onload:0,
      titlename:'详情',
      scienceid:'',
      usermessage:{
        userid:'',
        NickName:'',
        HeadUrl:'',
        openid:'',
        session_key:'',
      }
    },
    methods: {//方法

      close_reminder:function(){
        console.log('000')
        this.setData({
          show_loadnote:false
        })
        wx.showToast({
          title: '部分功能无法使用',
          icon:'none',
        })
      },
      getUserProfile(e){
        let that=this;
        let a = wx.getStorageSync('usermessage');//同步获取
        console.log(a);
        let b=0;
        if (a) {
          b=1;
          that.setData({
            onload:1,
            usermessage: userme,
            })
        }else{
          b=0;
        }
        if(b==0){
        // 获取用户头像昵称
        wx.getUserProfile({
          desc:'用于完善用户资料',
          success:(res)=>{
            let n='usermessage.NickName';
            let a='usermessage.HeadUrl';
            that.setData({
              [n]:res.userInfo.nickName,
              [a]:res.userInfo.avatarUrl,
            })
            console.log(that.data.usermessage);
            // 登录
            wx.login({
              success(res){
                if(res.code){
                  wx.request({
                    url:'https://lujinga/user/getsessionkeydemo',//假地址
                    data:{
                      code:res.code
                    },
                    success(res){
                      let o='usermessage.openid';
                      let s='usermessage.session_key';
                        that.setData({
                            [o]:res.data.openid,
                            [s]:res.data.session_key,
                        })
                        console.log(that.data.usermessage);
                        wx.request({
                          url: 'https://tlujing/api/user/authlogin',//假路径
                          method:'POST',
                          data:{
                            openid:that.data.usermessage.openid,
                            NickName:that.data.usermessage.NickName,
                            HeadUrl:that.data.usermessage.HeadUrl
                          },
                          success(res){
                            console.log(res);
                            let id='usermessage.userid';
                            that.setData({
                              [id]:res.data.userid,
                              onload:1
                            })
                            var usermessage=that.data.usermessage;
                            usermessage=JSON.stringify(usermessage);
                            wx.setStorage({
                              key:'usermessage',
                              data:usermessage,
                            })
                            wx.showToast({
                              title: '登录成功',
                              icon:'success',
                              duration:2000
                            })
                            console.log(that.data.usermessage);
                          }
                        })
                    }
                  })
                }
              }
            })
          }
        })
    }else{
      console.log(已登录);
    }
        this.setData({
          show_loadnote:false
        })
      },



      // 授权手机号
      getPhoneNumber(e){
        let that=this;
        let a = wx.getStorageSync('usermessage');//同步获取
        console.log(a);
        let b=0;
        if (a) {
          b=1;
          that.setData({
            onload:1,
            usermessage: userme,
            })
        }else{
          b=0;
        }

        
        if(b==0){

           // 用户拒绝授权
           if(e.detail.errMsg == "getPhoneNumber:fail user deny") {
            wx.showToast({
              icon: "none",
              title: '请允许获取手机号，否则功能不可用！',
            })
            return
          }
          // console.log(e.detail,'用户信息')
          // console.log("e.detail.iv=->", e.detail.iv); //包括敏感数据在内的完整用户信息的加密数据,需要解密
          // console.log("e.detail.encryptedData->", e.detail.encryptedData); //加密算法的初始向量，解密需要用到
      
        console.log(that.data.usermessage);
        wx.setStorageSync('usermessage', '数据')
        // 登录
        wx.login({
          success(res){
            if(res.code){
              wx.request({
                url:'https://lujinga/user/getsessionkeydemo',//假地址
                data:{
                  code:res.code
                },
                success(res){
                  let o='usermessage.openid';
                  let s='usermessage.session_key';
                    that.setData({
                        [o]:res.data.openid,
                        [s]:res.data.session_key,
                    })
                    console.log(that.data.usermessage);
                    wx.request({
                      url: 'https://tlujing/api/user/authlogin',//假路径
                      method:'POST',
                      data:{
                        openid:that.data.usermessage.openid,
                        NickName:that.data.usermessage.NickName,
                        HeadUrl:that.data.usermessage.HeadUrl
                      },
                      success(res){
                        console.log(res);
                        let id='usermessage.userid';
                        that.setData({
                          [id]:res.data.userid,
                          onload:1
                        })
                        var usermessage=that.data.usermessage;
                        usermessage=JSON.stringify(usermessage);
                        wx.setStorage({
                          key:'usermessage',
                          data:usermessage,
                        })
                        wx.showToast({
                          title: '登录成功',
                          icon:'success',
                          duration:2000
                        })
                        console.log(that.data.usermessage);
                      }
                    })
                }
              })
            }
          }
        })


    }else{
      console.log(已登录);
    }
        this.setData({
          show_loadnote:false
        })
      },

    },
    lifetimes: {
  
    },
  })
  

4， 需要的文件，下 引入使用
json文件 引入

   "usingComponents": {
    "load_note":"../../components/load_note/load_note"
  }

wxml 文件 引入

<!-- 登录组件 -->
<load_note title="提示" content="此功能需要登录使用" confirm="确定" cancel="取消" show_loadnote="{{show_loadnote}}"></load_note>

js 文件 引入

Page({
	 data: {
	  show_loadnote: false
	 }，
  onLoad() {
 var user = wx.getStorageSync('usermessage');
    if(user){
      this.setData({
        show_loadnote: false
      })
    }else{
      this.setData({
        show_loadnote:true
      })
    }
  }

}）