美文网首页
vue + plus 实现微信分享

vue + plus 实现微信分享

作者: 大号火龙果 | 来源:发表于2020-03-09 14:16 被阅读0次

    前言:app内的一个砍价功能,分享到微信好友,好友打开链接来帮助朋友砍价

    此功能必须在在真机上测试,你也可以选择在hbuilder上运行=>真机运行

    原料:

    1. hbuilder
    2. 微信的appid 和appsecret (这个是在微信开放平台上的你当前app的id和secret)


      image.png

    代码部分:

    async inviteShare() {
          let that = this,
            shareObj = null,
            link = null;
          plus.share.getServices(
            //获取分享服务成功
            async function(services) {
              for (var i in services) {
                //判断微信分享服务
                if (services[i].id == "weixin") {
                  shareObj = services[i];
                }
              }
              if (shareObj == null) {
                plus.nativeUI.toast("获取分享服务失败");
                return;
              }
            //这里我选择使用同步来让他先获取分享的超链接
              await that.$api.ownport
                .shareLink(that.user_id)
                .then(res => {
                  if (res.data.code == 1) {
                    link = res.data.data.url;
                  } else if (res.data.code == 10) {
                    that.$userLogOut();
                  }
                })
                .catch(err => {
                  console.log(err);
                });
              //分享核心代码
              shareObj.send(
                //朋友圈{content:"hi....",thumbs:['_www/shareLogo.png'], href:'http://hcoder.net',title:'test'},
                //微信好友
                {
                  //分享的内容
                  content: that.my_bargain.goods_info.goods_name,
                  //商品的缩略图
                  thumbs: [that.my_bargain.goods_info.goods_master_img.src],
                  //链接
                  href: link ,
                  //标题
                  title: "来!帮我砍一刀!",
                  //分享到微信聊天   'WXSceneSession'分享给好友,'WXSceneTimeline'分享到朋友圈
                  extra: { scene: "WXSceneSession" }
                },
                function() {
                  that.$toast("分享成功!");
                },
                function(e) {
                  that.$toast("分享失败:" + e.message);
                }
              );
            },
            //获取分享服务失败
            function(e) {
              that.$toast(e.message);
            }
          );
        }
    

    总结:分享出来的链接可以写一个微信公众号页面以供访问,可以在连接上拼接一个id或者其他的标识来区别商品。

    相关文章

      网友评论

          本文标题:vue + plus 实现微信分享

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