组件的封装

新建components文件

与pages文件同级创建一个components文件夹
在components文件下创建一个组件文件
然后在文件下新建component

写wxml文件

component文件结构与页面一样
都包括以下

以下是一个授权登录的弹窗
这个弹窗内容都是活的也可以修改下做别的弹窗组件来用

<!-- 弹窗 -->
<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_loadnote" >{{cancel}}</button><button class="cancel"  bindtap="getUserProfile" open-type="getUserInfo" style="width:50%;">{{confirm}}</button></view>
</view>

wxss部分

同页面wxss一样写的是css样式

/* 弹窗 */
.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: 10%;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 #aaa;border-right: 1px solid #aaa;
}
.reminder-btn button{border-radius: 0px;font-weight: 400;height: 110rpx;line-height: 80rpx;
}
.cancel{color:#2979FF;border-top: 1px solid #aaa;
}

js部分

与页面不同的是组件外面结构是component包裹

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(){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})},},lifetimes: {},
})

json引用

{"usingComponents": {//前面引号为组件名,后面引号为路径"load_note":"../../components/load_note/load_note"}
}

页面使用

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

页面js

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

授权登录

授权登录在上面js部分中
授权登录需要有一个button按钮来实现
所以做了个弹窗
具体可以看上面js

流程如下:

wx.getUserProfile API来调出授权窗口
用户同意后成功可以获得头像及昵称
wx.login api
获得code码
给后台,后台传回
openid 和session_key
拿着用户昵称头像openid 和后台换取用户id(具体后台需要什么数据各有不同可以根据实际情况具体分析)
前端最后将上述用户信息保存好就可以了

微信小程序授权登录组件的封装相关推荐

微信小程序授权登录第一次总是失败，第二次登录便正常了
微信小程序授权登录第一次总是失败,第二次登录便正常了错误流程调用用户点击授权用户信息按钮 ===> 调用wx.login( )生成code发送给后台生成session_key解密 ===& ...
微信小程序授权登录+获取手机号
微信小程序授权登录+获取手机号一.官方文档背景: 小程序登录的链接: 微信小程序获取手机号的链接: 二.微信小程序授权登录+获取手机号 1.简单说明官方文档的操作:先授权登录后拿手机号 2.前端代码 ...
新版微信小程序授权登录流程及问题汇总（getUserProfile）
问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有.其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个 ...
微信小程序授权登录报错encryted_data或iv不合法，前端坑^-^~~
微信小程序授权登录原来用的wx.getUserInfo(),在用户未授权过的情况下调用此接口,将不再出现授权弹窗, 会直接进入 fail 回调(详见<公告>).在用户已授权的情况下调用此接 ...
SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
微信小程序授权登录取消授权重新授权处理方法附可用代码
微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
SpringCloud 微信小程序授权登录获取openId SessionKey【SpringCloud系列13】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见. 自我提升方法推荐:神奇的早起早上 5:00 -5:20 起床刷牙 5:30-6:00 晨练(跑步.跳绳.骑自行车.打球等等) ...

微信小程序授权登录组件的封装

微信小程序授权登录

组件的封装

新建components文件

写wxml文件

wxss部分

js部分

json引用

页面使用

页面js

授权登录

流程如下:

微信小程序授权登录组件的封装相关推荐

最新文章

热门文章

微信小程序授权登录 组件的封装

微信小程序授权登录

组件的封装

新建components文件

写wxml文件

wxss部分

js部分

json引用

页面使用

页面js

授权登录

流程如下:

微信小程序授权登录 组件的封装相关推荐

最新文章

热门文章

微信小程序授权登录组件的封装

微信小程序授权登录组件的封装相关推荐