小程序开发

利用Decorator快速实现微信小程序分享

编辑时间:2019-08-24 15:11  浏览次数:浏览次数
摘要:如果需要对当前页面转发进行自定义编辑,则需要再当前页面 Page 中定义onShareAppMessage 事件处理函数,自定义该页面的转发内容。

Decorator小程序快速开发在Page的 onLoad 里面定义 wx.showShareMenu() 显示当前页面的转发按钮 使用 button 的 open-type=share 让用户点击按钮触发转发 如果需要对当前页面转发进行自定义编辑,则需要再当前页面 Page 中定义 onShareAppMessage 事件处理函数,自定义该页面的转发内容。

举个例子
在每次分享的卡片的链接上,都需要带上当前分享用户的 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; 使用的页面 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 } } 由于是继承传入的组件,所以获取分享配置除了可以从函数的参数获取,还可以通过定义的一些方法,通过继承的组件获取到继承的参数,这样可以再某些业务场景下,根据需要动态生成分享参数配置,例如代码里面的 this.$setSharePath() 等就是从父级组件动态获取到分享的参数。

本文地址:https://www.webbj.cn/opertion/xcx1884.html

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
推荐阅读
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

感受专业服务,从来电咨询开始
010-69759765186-1139-1767