小程序学习--JS点击按钮得到用户授权得到信息(复用组件)

首先,第一步,创建一个按钮的组件,方便复用,当点击按钮时候,会跳出是否授权的对话框:

组件的wxml代码:

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

绑定事件onGetUserInfo 定义opentype属性 slot标签是一个组件插槽

组件的JS代码:

component({
  /**
   * 组件的属性列表
   */
  //开启插槽
  options:{
    multipleSlots:true
  },
  properties: {
    openType:{
      type:String
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onGetUserInfo(event){
      this.triggerEvent('getuserinfo',event.detail,{})
    }
  }
})

在JS中,定义options开启组件的插槽:true

定义openType属性的数据类型为字符串,

在刚刚wxml代码的绑定的事件,编写触发器事件,获取用户信息,getuserinfo

组件编写完之后,在page页面中进行应用,

首先打开page页面的json文件:(进行配置组件的调用)

page页面的json代码:

{
    "usingComponents":{
       
        "v-button":"/components/image-button/index"
        
    }
}

上面的v-button就是我给刚刚的组件取得名字,可以拿到page页面的wxml中进行调用

扫描二维码关注公众号，回复： 3999755 查看本文章

page页面的wxml代码:

<!-- 未授权的时候 显示click me图片 -->
    <v-button wx:if="{{!authorized}}"
         open-type="getUserInfo" class="avatar-position"
                 bind:getuserinfo="onGetUserInfo">
        <image slot="img" class="avatar" src="/images/my/my.png"/>
    </v-button>
    <!-- 授权的时候 显示获取到的头像 -->
    <view wx:if="{{authorized}}"
         class="avatar-container avatar-position">
        <image src="{{userInfo.avatarUrl}}" class="avatar"/>
        <text>{{userInfo.nickName}}</text>
    </view>

代码上已注释了 ,如果未进行授权的时候,用户头像区域部分是一个点击我的图片按钮,

在组件标签内进行判断如果未授权 wx:if="{{!authorized}}" ,显示click me的头像 open-type为getuserinfo这个自带的方法

绑定js文件中的事件方法名 onGetUserInfo() 点击的时候就会触发这个事件

如果授权过了之后,那么就是wx:if="{{authorized}}" 代表授权成功

然后进行渲染从JS中拿到的值头像内容和对应的名字

page页面的js代码:

Page({
  data:{
    //切换授权头像的变量
    authorized:false,
    userInfo:null,
  },
  onload(options){

    this.userAuthorized()

  },
  //判断用户是否已经授权过
  userAuthorized(){
    wx.getSetting({
      success:data=>{
        //用户授权过
        if(data.authSetting['scope.userInfo']){
          wx.getUserInfo({
            success:data=>{
              this.setData({
                authorized:true,//代表已经授权
                userInfo:data.userInfo

              })
            }
          })
        }else{
          console.log('err')
        }

      }
    })
  },
  onGetUserInfo(event){
    const userInfo = event.detail.userInfo
    if(userInfo){//如果有值的话
      this.setData({
        userInfo:userInfo,
        authorized:true
      })
    }
    
  },
  
  


})

data方面定义两个变量一个是authorized 授权变量一个是userInfo 用户信息

授权变量默认为false 未授权用户信息默认为空 null

接下来,定义一个方法,进行判断用户是否授权:也就是userAuthorized() 这个方法

如果授权成功,那就进行数据绑定 this.setData更新变量的值:authorized为true 代表授权了

如果没有授权成功,就返回错误.

还有,定义另外一个方法,用来获取用户的信息,如果获取到了,同样就是授权成功 authorized为true userInfo:userInfo

所以我点击头像进行用户信息授权,就可以获取到我的信息了

效果图:

这边稍微提一下:如果只是显示用户信息的话,不用像上述的方法那么麻烦,可以这样:

使用open-data标签就能显示出来但仅仅是显示信息而不是获取信息概念不一样

<open-data type="userAvatarUrl" class="avatar avatar-position"/>

初次接触小程序不到一个星期,欢迎评论多多交流,觉得有用的朋友,标个喜欢哦!

小程序学习--JS点击按钮得到用户授权得到信息(复用组件)

猜你喜欢