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
})
}
}
}）
