小程序 点击图片授权获取个人信息 点击图片分享

直接获取个人信息。不通过授权

这种方式直接写在wxml上就可以，为了与js代码交互 我们需要一套完整的方案

授权方案

第一。只能按钮才可以触发 open-type事件。如果我们想用图片直接触发呢

自定义控件

新建commponents/image-button  目录 -》目录下组件叫index

index.js

// components/image-button/index.js
Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true
  },
  properties: {
    openType: {
      type: String
    }

  },

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

  },

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

 

开启插座 multipleSlots

openType 还叫openType 。保留控件的原始性

   onGetUserInfo(event) {
      this.triggerEvent('getuserinfo', event.detail,{})
    }

获取到的事件。抛出给getuserinfo 方法 这个是自定义的可以随便写 这里我们用了getuserinfo

index.wxml

这里。bind:getuserinfo是系统的那个事件 不是我们自定义的哦。open Type不用多讲也是系统事件。

plain="{{true}}" 去掉按钮边框  

slot 是插座，，相当于预留一个位置。

接着看样式

/* components/image-button/index.wxss */
.container{
  padding: 0 !important;
  border: none !important
}

！imprtant提升样式的优先级。

这样这个组件完成了

使用：

在需要的页面上面的json文件中引用 我们叫v-button

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

wxml

bind:getuserinfo 这个事件不是系统的 是我们刚才自定义的

open type 不必多讲。。

slot就是插座。留下一个位置。然后我们现在就是插头了 替换掉

实际图片

效果

完美的把图片外面包了一层button

onGetUserInfo 就是我们要写的事件了

onGetUserInfo(event) {
    const userInfo = event.detail.userInfo;
    console.log(userInfo)

  },

至此授权就结束了。

复杂一点授权切换图片 没授权之前是上图片 授权之后是微信头像。怎么处理 

页面 的wxml中

  

    
  
  
    
    {{userInfo.nickName}}

  

这里我们关注这个点

authorized  这个是自定义用户变量 用来切换布局

js data中

  data: {
    authorized: false,


  },

修改刚才授权之后的方法

  onGetUserInfo(event) {
    const userInfo = event.detail.userInfo;
    if (userInfo) {
      this.setData({
        userInfo,
        authorized: true
      })
    }

  },

下面一些相关的wxss我也贴出来吧

.avatar-position {
  position: absolute;
  top: 255rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  overflow: hidden;
  border-radius: 50%;
}
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

-----------------------------------------------------单身分割线------------------------------------

下面写分享功能

logo

相关wxss

.share-btn{
 margin-top: 28rpx;
 margin-left: 10rpx
}
.share{
  width: 40rpx;
  height: 40rpx;
}

done