Использование Decorator для быстрой реализации обмена апплетами в Taro

внешний интерфейс WeChat JavaScript React.js

О логике обмена WeChat

Есть два способа разработки переадресации в апплете WeChat.
  1. в ПейджеonLoadвнутри определенияwx.showShareMenu()Отображает кнопку вперед для текущей страницы
  2. использоватьbuttonизopen-type=shareПозвольте пользователю нажать кнопку, чтобы вызвать ретвит

Если вам нужно настроить переадресацию текущей страницы, вам нужно определить ее на текущей странице СтраницаonShareAppMessageОбработчик событий для настройки пересылаемого содержимого страницы.

Официальные сопутствующие документыВперед · Мини-программа

Болевые точки

Использование нативной переадресации WeChat в основном имеет следующие болевые точки:
  1. Страницы, которые необходимо переслать, должны быть записаны один разwx.showShareMenu()
  2. Если совместное использование предполагает некоторую унифицированную логическую обработку, либо введите аналогичнуюformatфункция для обработки, или каждая страница записывается один раз
Например

По ссылке каждой расшаренной карточки нужно привести текущий раздающий пользовательuserId, чтобы облегчить обработку анализа запросов пользователей, помощи, групповых покупок и других действий в будущем. В настоящее время необходимо один раз обработать путь обмена карточками.

Решение

использоватьDecoratorи компоненты высшего порядка ReactHOC,существует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 обратитесь к [Создание согласованного API с декораторами ES | Taobao FED | Taobao Front-end Team](

Категории