h5的微信分享和小程序分享的实现

459 阅读2分钟

前言

本文采用wx.miniProgram.getEnv()方法,判断当前的环境,并使用小程序分享js-sdk分享的方式实现分享功能。

原理

  通过判断当前环境,采用对应的方法,集成分享功能。

实现

// 引入文件
  <script src="./js/jweixin-1.3.2.js"></script>   // 下载 jweixin; 或者在项目中使用npm下载官方提供的包
// 初始化调用
    xcx_share();

// 小程序分享功能
function share() {
      let params = {
        url: window.location.href,
      };
      $.ajax({
          type: 'post',
          url: getJsapiTicket,    // 请求接口,返回js-sdk配置的参数
          async: false,
          contentType: 'application/json;charset=UTF-8',
          data: JSON.stringify(params),
          success: function (data) {
            var weixindata = data
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
                appId: weixindata.returnObject.appId,
                timestamp: weixindata.returnObject.timestamp,
                nonceStr: weixindata.returnObject.nonceStr,
                signature: weixindata.returnObject.signature,
                jsApiList: [
                  'onMenuShareTimeline', //分享给好友
                  'onMenuShareAppMessage', //分享到朋友圈
                  'onMenuShareQQ', //分享到QQ
                  'onMenuShareWeibo', //分享到微博
                ],
              });
              var title = '分享标题'
              wx.ready(function () {
                var shareData = {
                  title: title,
                  desc: '分享的内容', //这里请特别注意是要去除html
                  link: shareurl,
                  imgUrl:'https://cpicaicdn.abtpt.cn/bxhd/ylsh/img/shore_logo.png',  //分享的图片
                };
                wx.onMenuShareAppMessage({
                  ...shareData,
                  success: function () {
                        // 分享成功的回调
                  },
                  cancel: function () {
                    // 用户取消分享后执行的回调函数
                  }
                });

                wx.onMenuShareTimeline({
                  ...shareData,
                  success: function () {
                    // 分享成功的回调
                  },
                  cancel: function () {
                    // 用户取消分享后执行的回调函数
                  }
                });
                wx.onMenuShareQQ({
                  ...shareData,
                  success: function () {
                    // 分享成功的回调
                  },
                  cancel: function () {
                    // 用户取消分享后执行的回调函数
                  }
                });
                wx.onMenuShareWeibo({
                  ...shareData,
                  success: function () {
                    // 分享成功的回调
                  },
                  cancel: function () {
                    // 用户取消分享后执行的回调函数
                  }
                });
              });
          }
      })
    };
    // 判断当前的环境
    function xcx_share(){
      wx.miniProgram.getEnv(function (res) {
        if (res.miniprogram) {
          // 走在小程序的逻辑
          if(筛选条件,参数不同走不同的接口){
            wx.miniProgram.postMessage({
              data: {
                shareurl: '', // 分享地址
                sharedesc: '', // 分享语
                imageUrl: ''// 分享图片
              }
            })
          }else if(筛选条件,参数不同走不同的接口)
            wx.miniProgram.postMessage({
              data: {
                  shareurl: '', // 分享地址
                  sharedesc: '', // 分享语
                  shareimg: ''// 分享图片
              }
            })
          }
        }else{
          // 走不在小程序的逻辑
          share();
        }
      })
    }

总结

  根据当前的环境判断需要采用的分享方式,实现分享功能