MatchMpAuthorizePopup WeChat Mini Program Authorization Popup

WeChat Mini Program authorization popup component for obtaining user avatar and nickname permissions, supporting avatar selection and custom nickname input.

Import

import PressMatchMpAuthorizePopup from 'press-next/press-match-mp-authorize-popup/press-match-mp-authorize-popup.vue'

Code Examples

Basic Usage

<template>
  <PressMatchMpAuthorizePopup
    :show="show"
    title="Get Your Avatar Authorization"
    desc="To facilitate content display on pages such as scores, authorize us to get your account nickname"
    @close="onClose"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)

const onClose = () => {
  show.value = false
}

const handleConfirm = () => {
  console.log('Confirm authorization')
  show.value = false
}
</script>

Custom Avatar and Nickname

<template>
  <PressMatchMpAuthorizePopup
    :show="show"
    title="Get Your Avatar Authorization"
    desc="To facilitate content display on pages such as scores, authorize us to get your account nickname"
    :avatar-url="avatarUrl"
    :nickname="nickname"
    nickname-placeholder="Please enter your nickname"
    @avatar-click="handleAvatarClick"
    @nickname-change="handleNicknameChange"
    @nickname-auth="handleNicknameAuth"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const avatarUrl = ref('')
const nickname = ref('')

const handleAvatarClick = () => {
  // Open avatar selector
  console.log('Select avatar')
}

const handleNicknameChange = (value) => {
  nickname.value = value
}

const handleConfirm = () => {
  console.log('Confirm authorization', {
    avatarUrl: avatarUrl.value,
    nickname: nickname.value
  })
}
</script>

Complete Feature Example

<template>
  <div>
    <PressButton @click="showPopup">Show Authorization Popup</PressButton>
    
    <PressMatchMpAuthorizePopup
      :show="show"
      title="Get Your Avatar Authorization"
      desc="To facilitate content display on pages such as scores, authorize us to get your account nickname"
      :avatar-url="avatarUrl"
      :nickname="nickname"
      :default-avatar-url="defaultAvatar"
      nickname-placeholder="Please enter nickname"
      confirm-text="Authorize Now"
      @close="onClose"
      @avatar-click="handleAvatarClick"
      @nickname-change="handleNicknameChange"
      @nickname-blur="handleNicknameBlur"
      @nickname-auth="handleNicknameAuth"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const avatarUrl = ref('')
const nickname = ref('')
const defaultAvatar = 'https://example.com/default-avatar.png'

const showPopup = () => {
  show.value = true
}

const onClose = () => {
  show.value = false
}

const handleAvatarClick = () => {
  // Call WeChat Mini Program avatar selection API
  wx.chooseMedia({
    count: 1,
    mediaType: ['image'],
    success: (res) => {
      avatarUrl.value = res.tempFiles[0].tempFilePath
    }
  })
}

const handleNicknameChange = (value) => {
  nickname.value = value
}

const handleNicknameBlur = (value) => {
  console.log('Nickname input completed:', value)
}

const handleConfirm = () => {
  if (!avatarUrl.value) {
    wx.showToast({ title: 'Please select avatar', icon: 'none' })
    return
  }
  if (!nickname.value.trim()) {
    wx.showToast({ title: 'Please enter nickname', icon: 'none' })
    return
  }
  
  // Submit authorization info
  console.log('Authorization info:', {
    avatarUrl: avatarUrl.value,
    nickname: nickname.value
  })
  show.value = false
}
</script>

Custom Buttons

<template>
  <PressMatchMpAuthorizePopup
    :show="show"
    title="Get Your Avatar Authorization"
    @close="onClose"
  >
    <template #confirm-btn>
      <div class="custom-buttons">
        <PressButton 
          type="default" 
          @click="onClose"
        >
          Cancel
        </PressButton>
        <PressButton 
          type="primary" 
          @click="handleConfirm"
        >
          Confirm Authorization
        </PressButton>
      </div>
    </template>
  </PressMatchMpAuthorizePopup>
</template>

Custom Description Content

<template>
  <PressMatchMpAuthorizePopup
    :show="show"
    title="Get Your Avatar Authorization"
    @close="onClose"
  >
    <template #description>
      <div class="custom-desc">
        <p>For a better user experience, we need the following permissions:</p>
        <ul>
          <li>Avatar information: for personal profile display</li>
          <li>Nickname information: for leaderboard display</li>
        </ul>
      </div>
    </template>
  </PressMatchMpAuthorizePopup>
</template>

API

Props

Parameter	Description	Type	Default
show	Whether to show popup	boolean	false
title	PopupPlus title	string	'Get Your Avatar Authorization'
desc	Description text	string	'To facilitate content display on pages such as scores, authorize us to get your account nickname'
avatar-url	Avatar URL	string	''
nickname	Nickname	string	''
default-avatar-url	Default avatar URL	string	'https://image-1251917893.file.myqcloud.com/general-match-components/img/common/avatar/default-avatar.png'
nickname-placeholder	Nickname input placeholder	string	'Please enter nickname'
confirm-text	Confirm button text	string	'Confirm'
custom-class	Custom style class name	string	''

Events

Event	Description	Callback Parameters
avatar-click	Triggered when avatar is clicked	-
nickname-change	Triggered when nickname input changes	value: string
nickname-blur	Triggered when nickname input loses focus	value: string
nickname-auth	Triggered when clicking the arrow on the right side of nickname, used to trigger WeChat nickname authorization	-
confirm	Triggered when confirm button is clicked	-
close	Triggered when popup is closed	-

Slots

Name	Description
description	Custom description content
confirm-btn	Custom confirm button

Methods

Method	Description	Parameters
onClose	Close popup	-

Notes

1. This component is primarily designed for WeChat Mini Program environment, avatar selection requires WeChat Mini Program API
2. The nickname input field uses the press-field component and supports all field component features
3. Avatar display priority: avatarUrl > defaultAvatarUrl
4. The component automatically handles input field styling to maintain consistency with overall design
5. It's recommended to check if user has already authorized before use to avoid duplicate popups

FAQ

How to get WeChat Mini Program avatar?

// Call in avatar click event
const handleAvatarClick = () => {
  wx.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      avatarUrl.value = res.tempFiles[0].tempFilePath
    }
  })
}

How to validate nickname format?

const handleNicknameBlur = (value) => {
  if (value.length < 2) {
    wx.showToast({ title: 'Nickname must be at least 2 characters', icon: 'none' })
    return
  }
  if (value.length > 20) {
    wx.showToast({ title: 'Nickname cannot exceed 20 characters', icon: 'none' })
    return
  }
  // Other validation logic...
}

How to upload avatar to server?

const uploadAvatar = (tempFilePath) => {
  wx.uploadFile({
    url: 'https://your-api.com/upload',
    filePath: tempFilePath,
    name: 'avatar',
    success: (res) => {
      const data = JSON.parse(res.data)
      avatarUrl.value = data.url
    }
  })
}