微信小程序分享組件

效果展示

如何使用

1. 獲取組件

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

2. 引入組件

├─components
  ├─share
  ├─painter

將share和painter復制到組件文件夾下

// 頁面配置文件
{
  "usingComponents":{
    "share":"../../components/share/share" // 相對定位到share.js所在位置
  }
}

3. 使用組件

<!-- index.wxml -->
<view bindtap="toShare">分享</view>
<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().palette()
    })
  },
})

海報模板文件通過工具繪制,保存到

// poster.js
export default class Poster{
  palette() {
    return ({
      ...
    })
  }
}

Tips
如果是在Tab頁調用組件，由於底部Tabbar層級較高，海報尺寸較長時會被其遮擋操作，可以通過showPoster和closePoster兩個事件狀態控制Tabbar的顯隱。

屬性列表

屬性	類型	默認值	必填	說明
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}

依賴

• Painter
• iconfont