微信小程序、taro 封装分享功能

效果图

实现过程

	1、利用onShareAppMessage (Object) 监听用户点击页面内转发按
	2、需要什么参数，官网有说：http://taro-docs.jd.com/taro/docs/react#onshareappmessage-object

---

提示：以下是本篇文章正文内容，下面案例可供参考

share.js

import Taro from '@tarojs/taro';
import shoppRequest from './shoppRequest'
import { api } from './api'
import { shoppUrlImg, imageShare } from '../config'

function withShare(opts = {}) {

  // 设置默认
  let defalutPath = '/pages/home/index?';
  let defalutTitle = '珑梨派-属于都是青年独享体验式购物平台';
  let defaultImageUrl = 'http://lingji-images.oss-cn-shenzhen.aliyuncs.com/lonely/20200517/8b21a4f48d764df5a99ca4823599e638.jpg';

  // 这里的 user_id 需求要用的来绑定某个用户分享，如果是单一的分享可以去掉
  const user_id = Taro.getStorageSync('user_id');
  return function demoComponent(Component) {
    if (process.env.TARO_ENV === 'h5') {
      return Component;
    }
    class WithShare extends Component {
      async componentWillMount() {
        // 这里是需求要这样改的，请求默认的图片 所以上面设置默认的没用了， 
        shoppRequest.post(api.mainPageQueryList, {
          param: { default: true }
        }, "application/json").then(
          res => {
            const result = res.data
            if (result.code == 0) {
              var pageData = result.result.list[0].page
              defalutTitle = pageData.introduction;
              defaultImageUrl = shoppUrlImg + pageData.bgImg;
            }
          }
        )
        Taro.showShareMenu({
          withShareTicket: true
        });
        if (super.componentWillMount) {
          super.componentWillMount();
        }
      }

      // 点击分享的那一刻会进行调用
      onShareAppMessage(res) {
      	// 这里也是项目需求，可以不要
        setTimeout(() => {
          Taro.getStorage({
            key: 'articleId',
            success: function (res) {
              shoppRequest.post(api.forwarding, {
                articleId: res.data
              })
            }
          })
        }, 50);
       	// 获取传进来的值
        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();
        }

        const sharePath = `${path}`

        // 以下是 button 按钮 触发分享的 openType='share' 
        if (res.from === 'button') {
          if (res.target.id == 1) {
            if (res.target.dataset.eTapAA != '' && res.target.dataset.eTapAA[0].vedioCover) {
              return {
                title: res.target.dataset.eTapAB,
                path: `/pages/ftSpacePage/fiftyTwoArticleDetails/index?id=${res.target.dataset.eTapAC}`,
                imageUrl: res.target.dataset.eTapAA[0].vedioCover,
              }
            }
            if (res.target.dataset.eTapAA && res.target.dataset.eTapAA[0] != null && res.target.dataset.eTapAA[0] != '') {
              return {
                title: res.target.dataset.eTapAB,
                path: `/pages/ftSpacePage/fiftyTwoArticleDetails/index?id=${res.target.dataset.eTapAC}`,
                imageUrl: shoppUrlImg + res.target.dataset.eTapAA[0] + imageShare
              }
            }
          } else if (res.target.id == 2) {
            return {
              title: title || defalutTitle,
              path: `/pages/discover/index?scene=inToView3`,
              imageUrl: res.target.dataset.eTapAA
            }
          } else if (res.target.id == 3) { // 话题页的分享
            return {
              title: res.target.dataset.eTapAB,
              path: `/pages/ftSpacePage/fiftyTwoSapceHotMessage/index?id=${res.target.dataset.eTapAC}`,
              imageUrl: shoppUrlImg + res.target.dataset.eTapAA
            }
          }
          else {
            return {
              title: title || defalutTitle,
              path: sharePath,
              imageUrl: imageUrl || defaultImageUrl
            }
          }
          return
        }
        if (!path) {
          path = defalutPath;
        }
        // 每条分享都补充用户的分享id
        // 如果path不带参数，分享出去后解析的params里面会带一个{''： ''}
        // const sharePath = `${path}&shareFromUser=${user_id}`;
        return {
          title: title || defalutTitle,
          path: sharePath,
          imageUrl: imageUrl || defaultImageUrl
        };
      }
      render() {
        return super.render();
      }
    }
    return WithShare;
  };
}

export default withShare;

index.jsx 页面使用

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Button } from '@tarojs/components'
import withShare from '../../utils/withShare'
import shareIcon from '../../images/share_icon.png'
import './index.less'

@withShare()
class goodsDetail extends Component {

  constructor() {
    super(...arguments)
    this.state = {}
  }

  componentDidShow() {
   //小程序分享
   this.$setShareTitle = () => `${that.state.goodsInfo.title}`
   this.$setShareImageUrl = () => `${shoppUrlImg + cityjson.slice(1)[0]}`
   let path = `/pages/goodsDetail/index?id=${that.state.goodsInfo.id}&h5ShareHome=${'true'}`;
   this.$setSharePath = () => path
  }



  //分享提示
  shareBtnClick() {
    if (process.env.TARO_ENV === 'h5') {
      Taro.showToast({
        title: '请点击右上角分享哦',
        icon: 'none',
        duration: 2000
      })
    }
  }

  render() {
    return (
      <View className='goodsDetail'>
      	 <Button className='share-box' openType='share' onClick={this.shareBtnClick.bind(this)}>
        	<Image className='right' src={shareIcon}></Image>
      	 </Button>
      </View>
    )
  }
}

export default goodsDetail;

总结

项目中太多地方要分享，所以进行了封装，是为了更好的维护，减少代码的残余量