[TOC] ## 1.用户登录 不需要用户授权 ``` <open-data type="userAvatarUrl" class="logo"></open-data> ``` ## 2.需授权 ``` <v-btn class="image-btn" openType="getUserInfo" bind:onGet="onGetUserInfo" wx:if="{{!authorized}}"> <image slot="image" src="/images/weixin.png" /> </v-btn> <image src="{{authorized?userInfo.avatarUrl:'/images/weixin.png'}}" class="logo" wx:if="{{authorized}}" /> ``` ### 2.1 js ``` Page({ /** * 页面的初始数据 */ data: { userInfo: '', authorized: false, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { /* 得到用户的相关信息 */ this._authorized() }, //v-btn绑定事件 onGetUserInfo(event) { let userInfo = event.detail.userInfo; this.setData({ userInfo, authorized: true }) }, /* 判断用户是否授权 */ _authorized() { //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。3.6 wx.getSetting({ success: (res) => { console.log(res) /* scope.userInfo判断用户是否授权依据 */ if (res.authSetting['scope.userInfo']) { /* 获取用户信息 // 必须是在用户已经授权的情况下调用*/ wx.getUserInfo({ success: (res) => { this.setData({ userInfo: res.userInfo, authorized: true }) } }) } } }) } }) ``` ### 2.2v-btn (组件image-button) ``` <button plain="{{true}}" open-type="{{openType}}" bindgetuserinfo="onGetUserInfo"> <!-- plain="{{true}}" 设置成透明--> <slot name="image"></slot> </button> ``` ### 2.3 image-button的js ``` properties: { openType:String }, options:{ multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的方法列表 */ methods: { //得到用户信息 onGetUserInfo(event){ const userInfo = event.detail.userInfo; this.triggerEvent('onGet',{ userInfo }) } } ```