Hbuilder打包Vue app项目实现分享功能

• Z时代
• 2024-01-10
• 分类：综合

<script type="text/javascript">
  var auths = null;
  // 监听plusready事件  
  document.addEventListener("plusready", function() {
  // 扩展API加载完毕，现在可以正常调用扩展API
  plus.oauth.getServices(function(services) {
  auths = services;
  }, function(e) {
  alert("获取分享服务列表失败：" + e.message + " - " + e.code);
  });
  // 分享功能
  var Intent = null,
      File = null,
      Uri = null,
      main = null;
  var shares = null;
  var shareImageUrl = \'\';
  // updateSerivces方法中plus.share与上面的plus.oauth不知道有没有重合，以防万一还是加上了
  updateSerivces();
  if (plus.os.name == "Android") {
    Intent = plus.android.importClass("android.content.Intent");
    File = plus.android.importClass("java.io.File");
    Uri = plus.android.importClass("android.net.Uri");
    main = plus.android.runtimeMainActivity();
  }
  }, false);
  function updateSerivces() {
    plus.share.getServices(function(s) {
      shares = {};
      for (var i in s) {
        var t = s[i];
        shares[t.id] = t;
      }
      alert("获取分享服务列表成功");
    }, function(e) {
      alert("获取分享服务列表失败：" + e.message);
    });
    }
 </script>

所有获取APi功能的接口都得在plusready事件之后调用

在index.html header中调用完API后，在需要分享的页面通过点击事件调用share方法

// 微信分享
share () {
  var ids = [{
            id: "weixin", 
            ex: "WXSceneSession"  /*微信好友*/
        }, {
            id: "weixin",
            ex: "WXSceneTimeline" /*微信朋友圈*/
        }, {
            id: "qq"   /*QQ好友*/
        }, {
            id: "tencentweibo"   /*腾讯微博*/
        },{
            id: "sinaweibo"  /*新浪微博*/
        }],
        bts = [{
            title: "发送给微信好友"
        }, {
            title: "分享到微信朋友圈"
        }, {
            title: "分享到QQ"
        }, {
            title: "分享到腾讯微博"
        }, {
            title: "分享到新浪微博"
        }];
    plus.nativeUI.actionSheet({
            cancel: "取消",
            buttons: bts
        },function(e) {
            var i = e.index;
            alert(\'i:\' + i)
            if (i > 0) {
                // this.shareAction(ids[i - 1].id, ids[i - 1].ex);
                var id = ids[i - 1].id;
                var ex = ids[i - 1].ex
                var s = null;
                alert(\'ex:\'+ex)
                if (!id || !(s = shares[id])) {
                    alert("无效的分享服务！");
                    return;
                }
                if (s.authenticated) {
                    alert("---已授权---");
                    var msg = {
                      content: \'分享-详情\',
                      href: \'***\',分享链接
                      title: \'\',标题
                      content: \'\',分享描述
                      thumbs: [\'http://img3.3lian.com/2013/v10/4/87.jpg\'],
                      pictures: [\'http://img3.3lian.com/2013/v10/4/87.jpg\'],
                      extra: {
                        scene: ex
                      }
                    };
                    s.send(msg, function() {
                        alert("分享成功!");
                    }, function(e) {
                        alert("分享失败!");
                    });
                } else {
                    alert("---未授权---");
                    s.authorize(function() {
                      var msg = {
                          content: \'分享-详情\',
                          href: \'**\',
                          title: \'\',
                          content: \'\',
                          thumbs: [\'http://img3.3lian.com/2013/v10/4/87.jpg\'],
                          pictures: [\'http://img3.3lian.com/2013/v10/4/87.jpg\'],
                          extra: {
                            scene: ex
                         }
                      };
                      s.send(msg, function() {
                          alert("分享成功!");
                      }, function(e) {
                          alert("分享失败!");
                      });
                    }, function(e) {
                        alert("认证授权失败");
                    });
                }
            }
        }
    );
}

在Hbuilder manifest.json文件中的SDK配置中的plus.share微信消息及朋友圈勾选并填写appid与appsecret,在模块权限配置中添加Share(分享)模块后，打包即可

大概记录功能，代码有待完善

以上是 Hbuilder打包Vue app项目实现分享功能 的全部内容， 来源链接： utcz.com/z/376982.html