Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to develop Mini Program pre-licensing components. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

Train of thought

Because the authorized basic information / mobile number must use Mini Program native button, and then specify open-type to get the relevant information through callback (wx.getUserInfo () can no longer pop-up window, must go through button pop-up window), but the click area style that requires pre-authorization is not necessarily button style, so it is decided to use a transparent native button to cover the click area. Achieve indiscriminate authorization visually. Whether the button is displayed is determined by whether the field is authorized or not.

Because there may be multiple click areas in Mini Program that require the same authorization, I decided to implement it in Observer mode, that is, after one of the components is authorized, all the components with the same authorization are updated and the authorization button is hidden.

Style

Because you need to let the authorized button completely cover the clicked area, you need to let the contents of the slot support the parent positioning element, and then authorize the button to be absolutely positioned within the parent element, with the width and height set to 100%. You can also specify styles from outside the Mini Program component through the externalClasses of the component. The code is as follows:

.wrapper {position: relative; width: 100%; height: 100%; .auth {position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; z-index: 10;}} copy code copy code logic

Properties

OpenType sets the authorization type of the component by setting different parameters

Data

Authorized controls whether the authorization button is displayed by this value.

Attached

In the attached phase of the component, determine whether the user is authorized. If so, set authorized to false directly.

If the user is not authorized, initialize the listener

Detached

Remove listener

The click event of the click area itself needs to be bound outside the component, and a click callback will be triggered if it has been authorized.

Xxxxxxx copy code

Detailed code:

Import event from'.. / utils/event' Component ({externalClasses: ['mmerclass'], properties: {openType: {type: String, value:' getUserInfo'}}, data: {authorized: false}) Methods: {getPhoneNumber ({detail}) {const vm = this if (detail.errMsg = 'getPhoneNumber:ok') {/ * * obtain the business code * * / vm._triggerEvent (detail)}}, getUserInfo ({detail: {userInfo: {avatarUrl, nickName}) ErrMsg}}) {const vm = this if (errMsg = 'getUserInfo:ok') {/ * * the business code * * / vm._triggerEvent ()} after obtaining the user's information, _ triggerEvent (arg) {const vm = this / * * after triggering the listener Then trigger the click callback of the click area itself * * / event.triggerEvent ([vm.data.config.eventName], true) vm.triggerEvent ('action', arg)}, handleTap () {const vm = this vm.triggerEvent (' action')}} Attached () {const vm = this let config switch (vm.data.openType) {case 'getUserInfo': config = {eventName:' userInfo'} break case 'getPhoneNumber': config = {eventName:' phoneNumber'} break} if ( GetApp () .globalData [config.eventName]) {vm.setData ({authorized: true})} else {event.addEventListener ([config.eventName]) Vm, (authorized) = > {if (authorized) {vm.setData ({authorized: true})})} vm.setData ({config})}, detached () {const vm = this event.removeEventListener ([vm.data.config.eventName], vm)}}) copy the code other

The relevant logic of open-type can be extended according to business needs, and in this case only userInfo and phoneNumber.

You cannot bind tap events directly on slot, and cannot respond to events in the base library version 1.9.7 or below, so package another layer of view externally

These are all the contents of this article entitled "how to develop Mini Program pre-license components". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.