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

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

作者: 逸笛 | 来源:发表于2020-08-24 14:19 被阅读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>
    

    相关文章

      网友评论

          本文标题:taro/微信小程序 页面内多个分享功能

          本文链接:https://www.haomeiwen.com/subject/cnlnjktx.html