背景
不得不提一句:微信小程序的:获取用户信息的机制改了(早就改了)。或许是不想让开发者对用户“随意”造成困扰——毕竟有的用户上来只是为了“逛一圈”。于是增加了“只有触发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 }) } } }) }
作者:行舟客
链接:https://yunxiaomeng.blog.csdn.net/article/details/103307029
来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。