码迷,mamicode.com
首页 > 其他好文 > 详细

vue+h5 plus 第三方分享

时间:2020-05-15 15:47:48      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:--   col   ice   页面   scene   img   date   else   The   


html:

<div class="box" style="margin-top:0;" @click="share(‘weixin‘)">微信分享</div>
<div class="box" style="margin-top:0;" @click="share(‘qq‘)">QQ分享</div>
<div class="box" style="margin-top:0;" @click="share(‘sinaweibo‘)">微博分享</div>

 

mounted() {
      if(window.plus) {
        this.updateSerivces();
      }
},

 


data() {
  return {
        buttons: [{
            title: ‘我的好友‘,
            extra: {
              scene: ‘WXSceneSession‘
            }
          },
          {
            title: ‘朋友圈‘,
            extra: {
              scene: ‘WXSceneTimeline‘
            }
          },
        ],
        buttons1: [{
            title: ‘QQ‘,
            extra: {
              scene: ‘WXSceneSession‘
            }
          },
        ],
        buttons2: [
          {
            title: ‘微博‘,
            extra: {
              scene: ‘WXSceneTimeline‘
            }
          },
        ],
        sweixin: null,
        shares: null,
        sqq: null,
        sinaweibo: null,
    };
},

 

 

 methods: {
      /**
       * 获取微信分享通道
       */
      updateSerivces() {
        let _this = this;
        plus.share.getServices(function (s) {
          _this.shares = {};
          for (var i in s) {
            var t = s[i];
            _this.shares[t.id] = t;
          }
          _this.sweixin = _this.shares[‘weixin‘];
          _this.sqq = _this.shares[‘qq‘];
          _this.sinaweibo = _this.shares[‘sinaweibo‘];
        }, function (e) {
          plus.nativeUI.alert(‘获取分享服务列表失败:‘ + e.message);
        });
      },
      //第三方分享
      share(a) {
        let _this = this;

        if(a == ‘weixin‘){
          let msg = {
            type: ‘web‘, //分享的内容的类型
            title: ‘页面分享标题‘,
            content: ‘内容‘,
            thumbs: [‘http://img-cdn-qiniu.dcloud.net.cn/icon3.png‘],
            href: ‘https://www.baidu.com/‘,
            extra: {
              scene: "WXSceneSession"
            } // ‘WXSceneSession‘分享给好友,‘WXSceneTimeline‘分享到朋友圈
          }
          plus.nativeUI.actionSheet({
            title: ‘分享网页到微信‘,
            cancel: ‘取消‘,
            buttons: _this.buttons,
          }, function (e) {
              (e.index > 0) && _this.sharePage(_this.sweixin, msg, _this.buttons[e.index - 1]);
          })
        }
        if(a == ‘qq‘){
          let qq_msg = {
            type: ‘text‘, //分享的内容的类型
            title: ‘页面分享标题‘,
            content: ‘内容‘,
            thumbs: [‘http://img-cdn-qiniu.dcloud.net.cn/icon3.png‘],
            href: ‘https://www.baidu.com/‘,
          }
          plus.nativeUI.actionSheet({
            title: ‘分享网页到QQ‘,
            cancel: ‘取消‘,
            buttons: _this.buttons1,
          }, function (e) {
              (e.index > 0) && _this.sharePage(_this.sqq, qq_msg, _this.buttons[e.index - 1]);
          })
        }
        if(a == ‘sinaweibo‘){
          let sinaweibo_msg = {
            type: ‘web‘, //分享的内容的类型
            title: ‘页面分享标题‘,
            content: ‘内容‘,
            thumbs: [‘http://img-cdn-qiniu.dcloud.net.cn/icon3.png‘],
            href: ‘https://www.baidu.com/‘,
          }
          plus.nativeUI.actionSheet({
            title: ‘分享网页到微博‘,
            cancel: ‘取消‘,
            buttons: _this.buttons2,
          }, function (e) {
              (e.index > 0) && _this.sharePage(_this.sinaweibo, sinaweibo_msg, _this.buttons[e.index - 1]);
          })
        }

      },
      /**
       * 触发分享
       */
      sharePage(srv, msg, button) {
        let _this = this;
        // plus.nativeUI.alert(‘分享操作:‘);
        if (!srv) {
          plus.nativeUI.alert(‘无效的分享服务!‘);
          return;
        }
        button && (msg.extra = button.extra);
        // 发送分享
        if (srv.authenticated) {
          // plus.nativeUI.alert(‘---已授权---‘);
          _this.doShare(srv, msg);
        } else {
          // plus.nativeUI.alert(‘---未授权---‘);
          srv.authorize(function () {
            _this.doShare(srv, msg);
          }, function (e) {
            plus.nativeUI.alert(‘认证授权失败:‘ + JSON.stringify(e));
          });
        }
      },
      /**
       * 开始分享
       */
      doShare(srv, msg) {
        let _this = this;
        srv.send(msg, function () {
          plus.nativeUI.alert(‘分享到"‘ + srv.description + ‘"成功!‘);
        }, function (e) {
          plus.nativeUI.alert(‘分享到"‘ + srv.description + ‘"失败: ‘ + JSON.stringify(e));
        });
      },
}

 



 

vue+h5 plus 第三方分享

标签:--   col   ice   页面   scene   img   date   else   The   

原文地址:https://www.cnblogs.com/fanqiuzhuji/p/12894896.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!