Taro下利用Decorator快速实现小程序分享

1. 在Page的?onLoad?里面定义?wx.showShareMenu()?显示当前页面的转发按钮
2. 使用?button?的?open-type=share?让用户点击按钮触发转发

如果需要对当前页面转发进行自定义编辑，则需要再当前页面 Page 中定义?onShareAppMessage?事件处理函数，自定义该页面的转发内容。

官方相关文档转发 · 小程序

痛点

使用原生微信转发主要有以下痛点:

wx.showShareMenu()
format

解决方式

利用?Decorator?以及React的高阶组件?HOC?，在?willMount?的时候往页面注入?wx.showShareMenu()?，然后可通过参数或者在当前页面触发响应的设置函数进行相应的分享配置设置

代码分享

分享修饰器

withShare.js

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

function withShare(opts = {}) {
  
  // 设置默认
  const defalutPath = 'pages/index/index?';
  const defalutTitle = '默认标题';
  const defaultImageUrl = defaultShareImg;

  return 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;
		
        // 从继承的组件获取配置
        this.$setSharePath && typeof this.$setSharePath === 'function') {
          path = this.$setSharePath();
        }
		
        this.$setShareTitle && this.$setShareTitle === 'function') {
          title = this.$setShareTitle();
        }

        if (
          this.$setShareImageUrl &&
          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

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

@withShare({
    title: '可设置分享标题',imageUrl: '可设置分享图片路径',path: '可设置分享路径'
})
Index Component {
  
  // $setSharePath = () => '可设置分享路径(优先级最高)'

  // $setShareTitle = () => '可设置分享标题(优先级最高)'

  // $setShareImageUrl = () => '可设置分享图片路径(优先级最高)'
  
  render() {
     return <View />
  }
}
复制代码

由于是继承传入的组件，所以获取分享配置除了可以从函数的参数获取，还可以通过定义的一些方法，通过继承的组件获取到继承的参数，这样可以再某些业务场景下，根据需要动态生成分享参数配置，例如代码里面的?this.$setSharePath()?等就是从父级组件动态获取到分享的参数

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!