share下載 - share原始碼下載

share

Ai源碼

1.0.0

下載

Mini-share

微信小程式分享元件,可透過視覺化設計並匯出json，產生分享海報模板

雖然目前提供了監聽右上角選單「分享到朋友圈」按鈕行為的介面(beta版，暫僅在Android平台支援)，但限制眾多。圖片式分享仍是目前可以跨越朋友關係，跨越平台的較好方式。

效果展示

如何使用

取得組件

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

引入組件

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

將share和painter複製到元件資料夾下，並透過設定檔引入本元件:

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

使用組件

 <!-- 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 ( )
    } )
  } ,
} )

海報範本檔案透過工具繪製,儲存到poster.js

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

Tips :

如果是在Tab頁呼叫元件，由於底部Tabbar層級較高，海報尺寸較長時會被其遮蔽操作，可以透過showPoster和closePoster兩個事件狀態控制Tabbar的顯隱。
尺寸單位支援rpx
可透過提取公共樣式來簡化和壓縮海報模板文件

屬性列表

屬性	類型	預設值	必填	說明
show	Boolean	false	是	是否顯示
palette	Object		是	海報資料來源
mask	Boolean	true	否	是否顯示背景蒙層
maskClosable	Boolean	false	否	點選背景蒙層是否可以關閉
bind:setPoster	eventhandler		是	點擊分享到朋友圈時觸發的事件，一般用來產生和傳入實例化後的海報數據
bind:showPoster	eventhandler		否	海報產生後觸發的事件，,event.detail = {path}
bind:closePoster	eventhandler		否	關閉海報後觸發的事件,event.detail = {saved}