为了账号安全,请及时绑定邮箱和手机立即绑定

小程序自定义button组件获取用户信息(用户授权登录)

2020.06.27 16:51 6165浏览

背景

不得不提一句:微信小程序的【获取用户信息的机制】改了(早就改了)。或许是不想让开发者对用户“随意”造成困扰——毕竟有的用户上来只是为了“逛一圈”。于是增加了“只有触发button才能弹窗”的功能。

包括“分享”、“消息模板”也以用户为主做了修改

新版-微信授权机制

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权</button>

//js
onLoad(options){
	this.userAuthorized();
},
getUserInfo(event){
	const userInfo=event.detail.userInfo;
	this.setData({
		userInfo:userInfo
	})
},
authorized(){
	wx.getSetting(){
		success:data=>{
			if(data.authSetting["scope.userInfo"]){
				wx.getUserInfo({
					success:data=>{
						this.setData({
							userInfo:data.userInfo
						})
					}
				})
			}
		}
	}
}

那么,从老版小程序一路跟进的用户就该问了:有了open-type为什么还要有getUserInfo呢?

要知道,open-type只是为了获取用户信息,这一点上<button>和原先的<open-type></open-type>没有什么区别,但是!其实获取完用户信息,最重要的其实是“ 登录 ”,这一步就涉及到和服务器的交互了。

登录操作在服务器端是有一套非常完整的逻辑的,并不像我们所想的那么简单,这一点以后再说。

当然,上面的代码只是阐述一下新版微信小程序改进的地方,下面的才是重点:

自定义button组件实现用户授权登录

为什么要用“组件”? —— 方便复用

我们在于主文件夹同级建立img-button文件夹,作为button组件的地方。
img-button.wxml

<button bind:getuserinfo="onGetUserInfo"
		open-type="{{openType}}" plain="{{true}}" class="container">
		<slot name="img"></slot>
</button>

这里的bind后面必须跟userinfo,这是button组件的API。
在这里插入图片描述

img-button.js

Component({
	// “备注项”——启用“插槽”
	options:{
		multipleSlot:true
	},
	prototies:{
		openType:{
			type:String
		}
	},
	methods:{
		onGetUserInfo(event){
			this.triggerEvent('getUserinfo',event.detail,{})
		}
	}
})

组件都有一项“必备属性”——prototies。(就如同vue中的props——接收数据,规范格式)

接收谁的数据? —— 主wxml中传来的数据!
既然有接收,就有传出。不然要组件干嘛。
对!在methods里面,组件“告诉”调用它的元素——用getUserInfo定义事件,给你传一个值event.detail
(这个“getUserInfo”将作为主页面bind的事件——这里机制其实和vue中的“$emit”->子组件向父组件传值,是一样的)

这样“一来一往”,自定义组件内部和外面调用文件就能“互相访问”了。
我们在主文件的json文件里添加“对自定义组件文件的访问”:
main.json

"usingComponents":{
	...
	"v-button":"../img-button/img-button"
}

main.wxml

<v-button wx:if="{{!authorized}}" open-type="getUserInfo" class="..."
			bind:getUserinfo="onGetUserInfo">
	<image slot="img" class="..." src="图片路径" />
</v-button>
<view wx:if="{{authorized}}" class="...">
	<image src="{{userInfo.avatarUrl}}" class="..." />
	<text>{{userInfo.nickName}}</text>
</view>

这里还真有一点需要注意的:调用组件时的bind的事件名就是自定义组件内部传出来的值!(而且必须是)(这一点和上面button组件里面不同)
main.js

data:{
	authorized:false,
	userInfo:null
}onLoad(options){
	this.userAuthorized();
},
onGetUserInfo(event){
	const userInfo=event.detail.userInfo;   //取出组件内部传出来的值
	if(userInfo){
		this.setData({
			userInfo,
			authorized:true
		})
	}
},
userAuthorized(){
	wx.getSetting({
		success:data=>{
			if(data.authSetting['scope.userInfo']){
				wx.getUserInfo({
					success:data=>{
						this.setData({
							authorized:true,
							userInfo:data.userInfo
						})
					}
				})
			}else{
				wx.showToast({
					title:'抱歉!请检查微信',
					icon:'none',
					duration:1200
				})
			}
		}
	})
}
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消