taro/微信小程序 页面内多个分享功能

2020-08-24  本文已影响0人  逸笛

https://taro-docs.jd.com/taro/docs/components/forms/button/#opentype

图片.png

多个分享功能,可通过在button加id来区分

/**
 * 用户点击右上角分享
 */
onShareAppMessage(res) {
  if (res.from === "button") {
    // 来自页面内转发按钮
    if (res.target.id == 1) {
      return {
        title: `欢迎浏览${this.state.cardData.name}的名片哦!`,
        path: `/pages/vein/card/card?id=${this.state.cardData.id}&typesgo=wo`
      };
    }
    if (res.target.id == 2) {
      return {
        title: `${this.state.cardData.name}邀请您加入公司`,
        path: `/pages/join_company/index?company_id=${this.state.cardData.company_id}&card_id=${this.state.cardData.id}`
      };
    } else {
      return {
        title: "欢迎浏览我的名片哦!",
        path: "pages/user/company/index"
      };
    }
  }
}

原生样式可以这样处理:

  button[plain] {
    border: 0;
    margin: 0;
    padding: 0;
    line-height: 1.2;
  }
  <Button className="itemView" openType="share" plain="true" id="1">
                <Image className="cardImg" src={share}></Image>
                <Text className="itemTxt">分享名片</Text>
              </Button>
  <Button className="itemView" openType="share" plain="true" id="2">
                <Image className="companyImg" src={invite}></Image>
                <Text openType="share" className="itemTxt">
                  邀请人员
                </Text>
              </Button>
上一篇下一篇

猜你喜欢

热点阅读