小程序-自定义组件获取个人信息和分享小程序

在小程序开发过程中，会经常做获取用户个人信息和分享小程序功能，老版本的wx.getUserInfo已经不支持弹窗授权了，如果需要js获取数据明显只有通过授权才可以

userAuthorized(){
    wx.getSetting({
      success: (res)=>{
        if(res.authSetting['scope.userInfo']){
          wx.getUserInfo({
            success: (data)=>{
              console.log(data);
              this.setData({
                authorized:true,
                userInfo: data.userInfo
              })  
            },
          });
        }else{
        
          console.log("请授权");
        }
      },
    });
  },

上面判断是用户是否授权

要想用户授权，微信小程序规定必须使用button原生提供的butoon，那么现在可以封装一个通用button，实现授权按钮和分享按钮

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

js

onGetUserInfo(event){
      this.triggerEvent('getUserinfo',event.detail,{})
}
// *就是这么简单 指的注意的是“bind:getuserinfo” 是原生提供的事件

css

.container{
    padding: 0 !important;
    border: none !important;
}

当时进行授权的时候使用者

 <v-button wx:if="{{!authorized}}"
        open-type="getUserInfo"  class="avatar-position"  bind:getUserinfo="onGetUserInfo">
<!--为什么可以传递image标签，因为组件中使用了插槽-->        
<image slot="img" class="avatar" src="/image/my/my.png" />
</v-button>

js

onGetUserInfo(event){
    const userInfo = event.detail.userInfo; //使用triggerEvent事件的
   
  },

如果当要使用分享功能应该如何做呢？

<v-button class="share-btn" open-type="share">
        <image class="share" slot="img" src="/image/icon/share.png" />
</v-button> //原来只需要更改open-type就可以了

 小程序最新open-type属性