专栏首页Vue开发社区教你利用Taro中的Decorator快速实现小程序分享
原创

教你利用Taro中的Decorator快速实现小程序分享

Taro开发

小程序分享api痛点:

我们开发小程序分享时都知道,小程序分享的出口及入口过多,每个页面中都要使用onShareAppMessage,这样并不方便我们进行管理。

什么是Decorator:

Decorator就是一个用于装饰类和类的方法,我们完全可以写一个share的装饰器去装饰不同的页面(类), 后面只需要维护share的装饰器即可

直接上代码:

withShare.js

import Taro from '@tarojs/taro';
import { getBehaviorAnalysis } from '@/actions/global';

function withShare(opts) {
  return function shareComponent(Component) {      
     class WithShare extends Component {
      async componentWillMount() {
        Taro.showShareMenu({
          withShareTicket: true
        });

        if (super.componentWillMount) {
          super.componentWillMount();
        }
      }
      createShareOpts (res) {
        // 写相应的路径进行处理,给出type值做出判断,最好是 key-value值 
      }

      onShareAppMessage(res) {
        // 判断分享按钮来自哪里
        if (res.from === 'menu') {
        }
        return this.createShareOpts(res)
      }

      render() {
        return super.render();
      }
    }

    return WithShare;
  };
}

export default withShare;

使用方法:

import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import withShare from './withShare';

@withShare({
    title: '可设置分享标题', 
    imageUrl: '可设置分享图片路径', 
    path: '可设置分享路径'
})
class Index extends Component {
  
  render() {
     return (<View></View>)
  }
}

近期:

https://mp.weixin.qq.com/s/ce262xICrOrZe9fZezUITQ

我是一名前端程序员,大家可以关注下‘前端开发社区’公众号,里面有500G的学习资源供大家学习。大家也可以进前端技术交流群或者关注我的博客,谢谢大家!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js工具函数大全 || 实用篇

    “ 关注 前端开发社区 ,回复 '领取资源',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

    前端老道
  • 你还在写if else 吗?更优雅的写法来了

    “ 关注 前端开发社区 ,回复 '领取资源',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

    前端老道
  • 安利几个开发JS的小技巧

    “ 关注 前端开发社区 ,回复 '领取资源',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

    前端老道
  • JavaScript编码规范

    JavaScript在百度一直有着广泛的应用,特别是在浏览器端的行为管理。本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护。

    java攻城狮
  • jQuery事件(20171031)

    天天_哥
  • 八、商品详情页功能

    (1)商品详情页只需要多继承一个类(mixins.RetrieveModelMixin)就可以了

    Freshman
  • Django REST framework+Vue 打造生鲜超市(七) 八、商品详情页功能

    八、商品详情页功能  8.1.viewsets实现商品详情页接口 (1)商品详情页只需要多继承一个类(mixins.RetrieveModelMixin)就可以...

    zhang_derek
  • 混搭 TypeScript + GraphQL + DI + Decorator 风格写 Node.js 应用

    阅读本文的知识前提:熟悉 TypeScript + GraphQL + Node.js + Decorator + Dependency Inject 等概念。...

    JSCON简时空
  • 超火的倒放挑战 - ReverseVoice (微信小程序版 前后端源码) Ts Node Taro

    项目地址: https://github.com/smackgg/reversevoice 整个项目其实很简单,从本人在抖音和 B 站看到火起来到最终小程...

    腾讯NEXT学位

扫码关注云+社区

领取腾讯云代金券