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

时间 2019-11-05

标签 taro 利用 decorator 快速实现程序分享繁體版

原文原文链接

关于微信分享逻辑

微信小程序下开发转发有两个途径

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

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

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

痛点

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

须要转发的页面都要写一次wx.showShareMenu()
若是分享涉及一些统一的逻辑处理，则要么要引入一个相似format的函数进行处理，或者每一个页面单独写一次

举个例子

在每次分享的卡片的连接上，都须要带上当前分享用户的userId，方便往后对于用户拉新分析，助力，团购等行为进行处理，这个时候就须要对分享卡片的路径进行一次处理前端

解决方式

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

代码分享

分享修饰器

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()等就是从父级组件动态获取到分享的参数redux