Small program development is in full swing in the wechat ecology and front-end community, I have experienced a lot of small programs of large and small factories, more commonly encountered a painful problem for me:

Please don’t do this unless you absolutely have to! Hurt powder hurt body!!

First, this kind of authorization request without context is very easy to scare off users.

Put yourself in the user’s shoes: I don’t see anything, so let me license it? What the hell is this? Could he be a liar? Will it take the money from my wechat wallet? Will you steal my wechat account?

Second, it is not conducive to the presentation of key information or software functions.

First screen first impression is very important, the average user before starting your small program to your effective cognition only a small program name, at this time, it is very necessary to enhance the user’s understanding of this small program through the most direct way. If such a tragic authorization is adopted, the first page stay time tends to zero and the bounce rate tends to one. (Hey ~~ watch a commercial before you go ~)

So, what kind of authorization is better?

Let’s start by taking a look at our product perspective and trying to answer some of the most important questions:

Q1. Why is user authorization required?

  • Basic user information is required
  • You need to exchange openID/unionID for the user ID
  • Need user location, number…

Of course, there are many specific reasons, but nothing more than the situations listed above.

Q2. Can you request authorization when you need it most?

  • No, in this callback, I need the user name and gender information
  • No, I need openID to associate with local users in my next request
  • No,……

It is often based on the above development implementation level considerations that you want to put the user information in memory as soon as possible, ready for use. But why do we do development? It’s about making products, right?! So, rethinking the product from the experience point of view, can we wait to disturb users?

I think there is only one typical scenario that requires user information (in this case userInfo) :

The data to be read or written is related to a user

Such as “query my order”, “modify my profile” and so on, beyond this scenario, please rethink the business logic.

How to gracefully request user authorization

To clarify this issue, allow me to invent two terms: Page authorization and Action authorization

Page authorization

User information, such as the user ID, is required as a query condition before loading the main data on the current page. In this case, user authorization should be requested in the page.onload function.

Page({
  onLoad(){
    requireAuth
    	.then(onAuthSuccess)
    	.catch(onAuthFailure)
  }
})
Copy the code

The action authorization

An interactive action (such as clicking a button) that requires user information as an action parameter. This is a bit more cumbersome, because newer versions of the base library may force open-data, and authorization operations are bound to button components, causing UI headaches, since buttons aren’t everything. Here, JS sister recommended a practice, intended to cast a brick to attract jade, for your reference.

On the UI, we need to use conditional templates, render normal button/text whatever when authorized, render authorization button when not.

<text 
  wx:if="{{authenticated}}" 
  bindtap="onTapAction"
>give a like</text>

<button open-type="getUserInfo"
  wx:if="{{! authenticated}}" 
  bindgetuserinfo="onTapAuth"
>give a like</button>
Copy the code

These two interactions need to be handled in the corresponding Handle function.

//onTapAction
onTapAction(){
  sendRequest(this.data.user)
}

onTapAuth(e){
  if(success){
    sendRequest(e.detail.userInfo)
  }else{
    console.log('auth denied')
    // notify user}}Copy the code

How to do it more gracefully?

For page authorization and Action authorization, try abstracting the two components for reuse, like this:

<! -- Page authorization -->
<auth-page
  bind:authenticated="onAuthenticated"
>
  <view>Dear {{user.name}}, hello! You are the {{counter}} visitor to this site</view>
</auth-page>


<! -- Action authorization -->
<auth-button bind:action="onAction">give a like</auth-button>
Copy the code

For the above scheme examples, please experience the mini programs “interactive shell”, “chain story” and “Joy than Salary” and other online mini programs.

Welcome to pay attention to [stack notes], message consultation auth Components instance.