Applet: how to get the user's mobile number in the plug-in

background

We know , It cannot be used in applet plug-ins open-type relevant API Of , Official documents There are also detailed instructions

But if we want to make a login related plug-in , Is to get the user's mobile number , How do you do that , It can be used Refer to the custom component function of the applet

Introduce the custom component functions of the reference applet

Part of a plug-in （ Whether it's a component or a page ） You can pass in a component to render through an applet .

practice

Small program end

Introducing plug-ins

"plugins": {
    
  "auth-login": {
    
    "version": "dev",
    "provider": "wxxxxxxxx",
    "genericsImplementation": {
    
      "auth-login-default": {
    
        //  Put this component （get-phone-number-btn） To the plug-in page （auth-login-default） Rendering 
        "get-phone-number-btn": "components/get-phone-number-btn/index"
      }
    }
  }
},

Follow this path in the applet components/get-phone-number-btn/index , Create a new component
index.js

Component({
    
  properties: {
    
    show: {
    
      type: Boolean,
      value: false
    },
    phoneStyle: {
    
      type: String,
      value: ''
    }
  },
  methods: {
    
    getPhoneNumber (e) {
    
      console.log('e', e)
      this.triggerEvent('getPhoneNumber', e.detail)
    }
  }
})

index.wxml

<button wx:if="{
     { show }}" class="btn-com ok" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" style="{
        {
         phoneStyle }}"> Wechat authorized login </button>

index.json

{
    
  "component": true,
  "usingComponents": {
    }
}

Plug in side

For example, there is a page on the plug-in side , It's called auth-login-default, Can be in plugin.json View in .
plugin.json

{
    
  "publicComponents": {
    },
  "pages": {
    
    "auth-login-default": "pages/auth-login/index"
  },
  "main": "index.js"
}

"auth-login-default": "pages/auth-login/index" The code in this page is as follows ：
index.wxml

<text> I am the original code of the plug-in </text>
//  I am a component passed in by an applet 
<get-phone-number-btn show="{
    { loginCode && !token && checked }}" bind:getPhoneNumber="getPhoneNumber" phoneStyle="width: 100%;height: 88rpx;line-height: 88rpx;text-align: center;border-radius: 44rpx;border: none;font-size: 32rpx;border: none;outline: none;background: #02C160;color: #fff;" />

index.json

"componentGenerics": {
    
  "get-phone-number-btn": true
}

index.js

Page({
    
	async getPhoneNumber (e) {
    
		//  Get your mobile number 
		console.log(e.detail)
	}
})

effect

Final , We see this plug-in page （auth-login-default） The effect of

After clicking, you can also adjust the pop-up window of the authorized mobile phone number ~