share Download - share Source code download

share

AI Source Code

1.0.0

Download

Mini-share

WeChat applet sharing component can be designed visually and exported as json to generate sharing poster templates

Although there is currently an interface for monitoring the behavior of the "Share to Moments" button in the upper right corner menu (beta version, currently only supported on the Android platform), there are many limitations. Picture-based sharing is still a better way to cross friendships and platforms.

Effect display

How to use

Get component

 git clone https://github.com/MakerGYT/share.git

Introduce components

└── components
    ├── painter
    └── share

Copy share and painter to the component folder, and introduce this component through the configuration file:

{
  "usingComponents" :{
    "share" : " /components/share/share "
  }
}

Use components

 <!-- index.wxml -->
< button bindtap =" toShare " type =" primary " >分享</ button >
< share show =" {{shareShow}} " bind:setPoster =" toMoments " palette =" {{palette}} " > </ share >

 // index.js
import Poster from 'poster.js' ;
Page ( {
  data : {
    shareShow : false
  } ,
  toShare : function ( e ) {
    this . setData ( {
      shareShow : true
    } )
  } ,
  toMoments : function ( ) {
    this . setData ( {
      palette : new Poster ( params ) . palette ( )
    } )
  } ,
} )

The poster template file is drawn using tools and saved to poster.js

 // poster.js
export default class Poster {
  constructor ( params ) {
    this . params = params ;
  }
  palette ( ) {
    return ( {
      ...
    } )
  }
}

Tips :

If the component is called on the Tab page, since the Tabbar at the bottom has a higher level and the poster is longer, it will be obscured by it. You can control the visibility of the Tabbar through showPoster and closePoster event states.
Dimension unit supports rpx
Poster template files can be simplified and compressed by extracting common styles

Property list

property	type	default value	Required	illustrate
show	Boolean	false	yes	Whether to display
palette	Object		yes	poster data source
mask	Boolean	true	no	Whether to display the background mask
maskClosable	Boolean	false	no	Can the background mask be turned off by clicking on it?
bind:setPoster	eventhandler		yes	Event triggered when clicking to share to Moments, generally used to generate and pass in instantiated poster data
bind:showPoster	eventhandler		no	Event triggered after the poster is generated, event.detail = {path}
bind:closePoster	eventhandler		no	Event triggered after closing the poster, event.detail = {saved}