Taro下利用Decorator快速實現小程序分享

關於微信分享邏輯

微信小程序下開發轉發有兩個途徑

1. 在Page的onLoad裏面定義wx.showShareMenu()顯示當前頁面的轉發按鈕
2. 使用button的open-type=share讓用戶點擊按鈕觸發轉發

若是須要對當前頁面轉發進行自定義編輯，則須要再當前頁面 Page 中定義 onShareAppMessage 事件處理函數，自定義該頁面的轉發內容。

官方相關文檔 轉發 · 小程序

痛點

使用原生微信轉發主要有如下痛點:

1. 須要轉發的頁面都要寫一次wx.showShareMenu()
2. 若是分享涉及一些統一的邏輯處理，則要麼要引入一個相似format的函數進行處理，或者每一個頁面單獨寫一次

舉個例子

在每次分享的卡片的連接上，都須要帶上當前分享用戶的userId，方便往後對於用戶拉新分析，助力，團購等行爲進行處理，這個時候就須要對分享卡片的路徑進行一次處理

解決方式

利用Decorator以及React的高階組件HOC，在willMount的時候往頁面注入wx.showShareMenu()，而後可經過參數或者在當前頁面觸發響應的設置函數進行相應的分享配置設置

代碼分享

分享修飾器

withShare.js

import Taro from '@tarojs/taro';
import { connect } from '@tarojs/redux';
import defaultShareImg from 'xxx.jpg';

function withShare(opts = {}) {
  
  // 設置默認
  const defalutPath = 'pages/index/index?';
  const defalutTitle = '默認標題';
  const defaultImageUrl = defaultShareImg;

  return function demoComponent(Component) {      
    // redux裏面的用戶數據
    @connect(({ user }) => ({
      userInfo: user.userInfo
    }))
    class WithShare extends Component {
      async componentWillMount() {
        wx.showShareMenu({
          withShareTicket: true
        });

        if (super.componentWillMount) {
          super.componentWillMount();
        }
      }

      // 點擊分享的那一刻會進行調用
      onShareAppMessage() {
        const { userInfo } = this.props;

        let { title, imageUrl, path = null } = opts;
		
        // 從繼承的組件獲取配置
        if (this.$setSharePath && typeof this.$setSharePath === 'function') {
          path = this.$setSharePath();
        }
		
        // 從繼承的組件獲取配置
        if (this.$setShareTitle && typeof this.$setShareTitle === 'function') {
          title = this.$setShareTitle();
        }

        // 從繼承的組件獲取配置
        if (
          this.$setShareImageUrl &&
          typeof this.$setShareImageUrl === 'function'
        ) {
          imageUrl = this.$setShareImageUrl();
        }

        if (!path) {
          path = defalutPath;
        }
		
        // 每條分享都補充用戶的分享id
        // 若是path不帶參數，分享出去後解析的params裏面會帶一個{''： ''}
        const sharePath = `${path}&shareFromUser=${userInfo.shareId}`; 

        return {
          title: title || defalutTitle,
          path: sharePath,
          imageUrl: imageUrl || defaultImageUrl
        };
      }

      render() {
        return super.render();
      }
    }

    return WithShare;
  };
}

export default withShare;

複製代碼

使用的頁面

pages/xxx/xxx.js

import Taro, { Component } from '@tarojs/taro';
import { connect } from '@tarojs/redux';
import { View } from '@tarojs/components';
import withShare from './withShare';

@withShare({
    title: '可設置分享標題', 
    imageUrl: '可設置分享圖片路徑', 
    path: '可設置分享路徑'
})
class Index extends Component {
  
  // $setSharePath = () => '可設置分享路徑(優先級最高)'

  // $setShareTitle = () => '可設置分享標題(優先級最高)'

  // $setShareImageUrl = () => '可設置分享圖片路徑(優先級最高)'
  
  render() {
     return <View /> } } 複製代碼

因爲是繼承傳入的組件，因此獲取分享配置除了能夠從函數的參數獲取，還能夠經過定義的一些方法，經過繼承的組件獲取到繼承的參數，這樣能夠再某些業務場景下，根據須要動態生成分享參數配置，例如代碼裏面的this.$setSharePath()等就是從父級組件動態獲取到分享的參數

相關參考資料

對於React高階組件的理解可參考 深刻理解 React 高階組件 - 簡書

對於ES7修飾器的理解可參考[使用 ES decorators 構建一致性 API | Taobao FED | 淘寶前端團隊](