!--components/login/index.wxml--buttonbind:getuserinfo="onGetUserInfo"open-type='{{openType}}'plain='{{true}}'class="container"slotname="img"/slot/button清除button的原始样式
.container{padding:0!important;border:none!important;}定义组件的事件
//components/login/index.jsComponent({//开启使用插拔式的结点options:{multipleSlots:true},/组件的属性列表/properties:{openType:{type:String}},/组件的初始数据/data:{},/组件的方法列表/methods:{onGetUserInfo(event){this.triggerEvent('getuserinfo',event.detail,{})}}})登录页面使用登录组件
viewclass="container"!--登录组件--img-btn-cmpwx:if="{{!hasUserInfo}}"open-type="getUserInfo"class="avatar-position"bind:getuserinfo="onGetUserInfo"imageslot="img"class="avatar"src="/components/images/my.png"//img-btn-cmp!--登录后使用open-data--viewclass="avatar-containeravatar-position"imagesrc="{{userInfo.avatarUrl}}"wx:if="{{hasUserInfo}}"class="avatar"/open-datawx:if="{{hasUserInfo}}"type="userNickName"/open-data/view/view登录授权逻辑
//pages/me/me.jsPage({/页面的初始数据/data:{hasUserInfo:false,userInfo:null},onLoad:function(){//页面加载时使用用户授权逻辑，弹出确认的框this.userAuthorized()},userAuthorized(){wx.getSetting({success:data={if(data.authSetting['scope.userInfo']){wx.getUserInfo({success:data={this.setData({hasUserInfo:true,userInfo:data.userInfo})}})}else{this.setData({hasUserInfo:false})}}})},onGetUserInfo(event){constuserInfo=event.detail.userInfoif(userInfo){wx.login({success:function(res_1){console.log(res_1)wx.getUserInfo({success:function(res_2){console.log(res_2)//发给服务器的数据}})}})this.setData({hasUserInfo:true,userInfo:userInfo})}}})wx.getSetting()回调函数返回数据
登录状态图示登录
未登录
wx.getUserInfo()回调函数返回数据
wx.login()函数返回值
接下就是后台接受处理请求。
后台的处理请查看我的下一篇博客：
