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("Presto") > -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>