uniapp安卓与IOS微信与QQ分享功能

分享弹框组件代码：
<template>
    <view>
        <!-- uView的popup弹框组件封装 -->
        <u-popup class="bPopup" :customStyle="customStyle" :zIndex="zIndex" :show="ushow" @close="close" @open="open" :closeable="false" :closeOnClickOverlay="true">
            <view class="title-content mb27" v-if="title&&hasTitle">
                <view class="back" @tap="back" v-if="hasBack">
                    <view class="iconfont icon-zuofanhui"></view>
                </view>
                <view class="title" :style="{'text-align': tl}">
                    {{title}}
                </view>
                <view class="close" @tap="close" v-if="hasClose">
                    <view class="iconfont icon-shanchu"></view>
                </view>
            </view>
            <view class="popup-content">
                <slot name="content"></slot>
            </view>
        </u-popup>
    </view>
</template>
<script>
    export default {
        props: {
            show: {
                type: Boolean,
                default:false
            },
            hasTitle: {
                type: Boolean,
                default:true
            },
            title: {
                type: String,
                default: ''
            },
            tl: {
                type: String,
                default: 'left'
            },
            zIndex: {
                type: Number,
                default: 10075
            },
            hasClose: {
                type: Boolean,
                default:true
            },
            hasBack: {
                type: Boolean,
                default:false
            },
            customStyle: {
                type: Object,
                default: () => {}
            }
        },
        watch:{
            show(val) {
                this.ushow = val
            }
        },
        data() {
            return {
                ushow: false
            }
        },
        methods: {
            open() {
                this.$emit('open')
            },
            close() {
                this.$emit('update:show',false)
                this.$emit('close')
            },
            back() {
                this.$emit('back')
            }
        }
    }
</script>
<style lang="scss">
    .bPopup{
        border-radius: 30rpx 30rpx 0 0;
        .title-content{
            display: flex;
            border-radius: 30rpx 30rpx 0 0;
            justify-content: space-between;
            align-items: center;
            position: relative;
            padding: 42rpx 32rpx;
            .title{
                font-size: 34rpx;
                font-family: PingFang SC;
                font-weight: 800;
                color: #1C1C1C;
                width: 100%;
               
            }
            .close{
                color: #1C1C1C;
                background-color: #F4F4F4;
                padding: 8rpx;
                border-radius: 50%;
                cursor: pointer;
                position: absolute;
                right: 32rpx;
                .iconfont {
                    font-size: 32rpx;
                    color: #C0C0C0;
                }
            }
            .back{
                color: #1C1C1C;
                background-color: #F4F4F4;
                padding: 8rpx;
                border-radius: 50%;
                cursor: pointer;
                position: absolute;
                left: 32rpx;
                .iconfont {
                    font-size: 32rpx;
                    color: #C0C0C0;
                }
            }
        }
        .popup-content{
            max-height: 80vh;
            overflow-y: auto;
        }
        /deep/.u-popup__content{
            border-radius: 30rpx 30rpx 0 0;
            overflow: auto;
        }
    }
</style>
分享页组件代码：
<template>
  <view class="pageBox">
    <!-- iconfont图标库下载分享图标至项目 -->
    <view class="iconfont icon-fenxiang3" @click="openShare"></view>
    <view class="btn-primary" @click="toPayPage"> 立刻购买 </view>
    <!-- 分享弹窗（分享图标自行在iconfont图标库下载svg即可） -->
    <b-popup id="share-con" :show.sync="shareShow" :hasTitle="false">
      <template slot="content">
        <view class="share-c">
          <view class="item" @tap="doShare('wx')">
            <view class="image">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixin"></use>
              </svg>
            </view>
            <view class="tx"> 微信 </view>
          </view>
          <view class="item" @tap="doShare('pyq')">
            <view class="image">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pengyouquan"></use>
              </svg>
            </view>
            <view class="tx"> 朋侪圈 </view>
          </view>
          <view class="item" @tap="doShare('qq')">
            <view class="image">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-QQhaoyou"></use>
              </svg>
            </view>
            <view class="tx"> QQ好友 </view>
          </view>
          <view class="item" @tap="doShare('qqkj')">
            <view class="image">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-QQkongjian"></use>
              </svg>
            </view>
            <view class="tx"> QQ空间 </view>
          </view>
        </view>
        <view class="share-btn" @click="shareShow = false"> 取消 </view>
      </template>
    </b-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productId: "", //产物id
      shareShow: false, // 分享弹窗
      listData: {}, // 图片详情数据
      share: 1, //项目里面1，分享后2
      webpageUrl: "", //分享url
    };
  },
  onLoad(option) {
    if (option.id) {
      // 商品id
      this.productId = option.id;
    }
    if (option.share) {
      this.share = Number(option.share);
    }
  },
  methods: {
    // 获取商品详情
    getProductDetail() {
      // 接口获取数据
      this.listData = {
        name: "一次性水杯",
        subtitle:
          "一种方便携带和使用，代价低廉的纸质杯子，是许多家庭和公共场所常见的喝水工具。",
      };
    },
    // 分享页面跳转
    toPayPage() {
      if (this.share === 2) { // 分享页面跳转过来打开分享
        //分享页
        this.openApp(this.productId);
      } else { // 如果不是分享跳转过来的页面则直接跳转
        console.log('跳转购买页面')
      }
    },
    // 打开分享
    openShare() {
      this.shareShow = true;
    },
    // 执行分享
    doShare(type) {
      let origin = window.location.origin;
      this.webpageUrl = `${origin}/#/pages/productDetail/productDetail?urlFrom=share&share=2&id=${this.productId}`; // 打开的分享页面
      let params = {
        bText: "2", // 1 纯文本分享 2 链接分享
        title: this.listData.name || "APP", //分享url表现标题
        description: this.listData.subtitle || "", // 分享表现的副标题形貌
        webpageUrl: this.webpageUrl, //分享url
        thumbImage: "https://csmarapi.csmar.com/ysmapp/iconfont.png" || "", // 分享表现的icon图标
      };
      this.shareShow = false;
      if (sessionStorage.getItem("isIOS")) {
        // ios分享
        switch (type) {
          case "wx":
            window.webkit.messageHandlers.wxShareMessage.postMessage({
              ...params,
              scene: "0",
            });
            break;
          case "pyq":
            window.webkit.messageHandlers.wxShareMessage.postMessage({
              ...params,
              scene: "1",
            });
            break;
          case "qq":
            window.webkit.messageHandlers.qqShareMessage.postMessage({
              ...params,
              scene: "0",
            });
            break;
          case "qqkj":
            window.webkit.messageHandlers.qqShareMessage.postMessage({
              ...params,
              scene: "1",
            });
            break;
        }
      } else {
        // 安卓分享
        switch (type) {
          case "wx":
            console.log("微信分享入参", {
              ...params,
              scene: "0",
            });
            window.ytyJsApi.goToShareWX(
              JSON.stringify({
                ...params,
                scene: "0",
              })
            );
            break;
          case "pyq":
            window.ytyJsApi.goToShareWX(
              JSON.stringify({
                ...params,
                scene: "1",
              })
            );
            break;
          case "qq":
            window.ytyJsApi.goToShareQQ(
              JSON.stringify({
                ...params,
                scene: "0",
              })
            );
            break;
          case "qqkj":
            window.ytyJsApi.goToShareQQ(
              JSON.stringify({
                ...params,
                scene: "1",
              })
            );
            break;
        }
      }
    },
    // 打开APP
    openApp(tid) {
      let url = "";
      let isIOS = sessionStorage.getItem("isIOS");
      let browerObj = this.browserVersions();
      if (isIOS) {
        //iOS
        let isQQ = browerObj.qq;
        if (isQQ) {
          const oInput = document.createElement("input");
          oInput.value = `https://www.csmar.com/app/goods?urlFrom=app&id=${tid}`;
          document.body.appendChild(oInput);
          oInput.select();
          const copyResult = document.execCommand("copy");
          document.body.removeChild(oInput);
          url =
            "https://a.app.qq.com/o/simple.jsp?pkgname=com.csmar.edu&android_schema=csmarysm://goods?urlFrom=app&id=" +
            tid +
            "&ios_schema=csmarysm://goods?urlFrom=app&id=" +
            tid;
          window.location.href = url;
        } else {
          url = `https://www.csmar.com/app/goods?urlFrom=app&id=${tid}`;
          window.location.href = url;
        }
      } else {
        //android
        url =
          "https://a.app.qq.com/o/simple.jsp?pkgname=com.csmar.edu&android_schema=" +
          `csmarysm://forum?type=store&tid=${tid}`;
        let copyUrl = `https://www.csmar.com/app/forum?type=store&tid=${tid}`;
        this.copyToClipBoard(copyUrl);
        window.location.href = url;
      }
    },
    //复制内容到剪切板
    copyToClipBoard(url) {
      const oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select();
      const copyResult = document.execCommand("copy");
      document.body.removeChild(oInput);
    },
    browserVersions() {
      let u = navigator.userAgent,
        app = navigator.appVersion;
      return {
        trident: u.indexOf("Trident") > -1, //IE内核
        presto: u.indexOf("resto") > -1, //opera内核
        webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
        gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1, //android终端
        iPhone: u.indexOf("iPhone") > -1, //是否为iPhone大概QQHD欣赏器
        iPad: u.indexOf("iPad") > -1, //是否iPad
        webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
        weixin: u.indexOf("MicroMessenger") > -1, //是否微信
        qq: u.match(/\sQQ/i), //是否QQ
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.pageBox {
  background-color: #fff;
  height: 100%;
  position: relative;
  .icon-fenxiang3 {
    font-size: 38rpx;
    margin-right: 30rpx;
    margin-top: 6rpx;
    color: #333;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
  }
  .btn-primary {
    height: 40px;
    width: 80%;
    background: linear-gradient(0deg, #6c8ff8, #bbcbfd);
    border-radius: 25px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
    position: absolute;
    bottom: 25px;
    left: 10%;
  }
}
#share-con {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 26rpx 0rpx rgba(99, 106, 113, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 80rpx;
  .share-c {
    padding: 70rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 14rpx solid #f1f2f4;

    .item {
      width: 90rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 140rpx;
      justify-content: space-around;

      .image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        background-color: #f3f5f8;
        display: flex;
        justify-content: center;
        align-items: center;

        svg {
          width: 48rpx;
          height: auto;
        }
      }

      .tx {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 36rpx;
      }
    }
  }

  .share-btn {
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 30rpx;
    color: #333333;
  }
}
</style>


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。