WebApp实现微信分享功能

H5Plus分享功能实战

最新推荐文章于 2025-06-13 17:36:28 发布

原创最新推荐文章于 2025-06-13 17:36:28 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webapp #分享 #h5+plus

web 同时被 2 个专栏收录

1 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

本文详细介绍如何利用H5Plus的分享功能，在前端项目中实现社交媒体分享，包括使用Vue进行编码的具体JS代码示例，以及如何在不同平台如微信、QQ上分享链接。

利用H5 plus的分享功能

该功能前端使用vue进行的编写

以下为js代码

var shares=null;
var Intent=null,File=null,Uri=null,main=null;
// H5 plus事件处理
function plusReady(){
    updateSerivces();
    if(plus.os.name=="Android"){
        main = plus.android.runtimeMainActivity();
        Intent = plus.android.importClass("android.content.Intent");
        File = plus.android.importClass("java.io.File");
        Uri = plus.android.importClass("android.net.Uri");
    }
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener("plusready",plusReady,false);
}

/**
 * 
 * 更新分享服务
 */
function updateSerivces(){
    plus.share.getServices( function(s){
        shares={};
        for(var i in s){
            var t=s[i];
            shares[t.id]=t;
        }
    }, function(e){
        alert("获取分享服务列表失败："+e.message );
    } );
}



/**
   * 分享操作
   * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
   * @param {Boolean} bh 是否分享链接
   */
function shareAction(sb,bh) {
    if(!sb||!sb.s){
        alert("无效的分享服务！");
        return;
    }
    
    var msg={content:'',extra:{scene:sb.x}};


    msg.thumbs=["http://wx4.sinaimg.cn/large/a1b61d0aly1fn2h3xwat6j20dw0dwtbp.jpg"];
    msg.pictures=["http://wx4.sinaimg.cn/large/a1b61d0aly1fn2h3xwat6j20dw0dwtbp.jpg"];
    msg.href='http://www.baidu.com/';
    msg.title='XXXXXX';
    msg.content='我正在xxxxxxx，快啦围观哦！';

    // 发送分享
    if ( sb.s.authenticated ) {
        // alert("---已授权---");
        shareMessage(msg,sb.s);
    } else {
        alert("---未授权---");
        sb.s.authorize( function(){
                shareMessage(msg,sb.s);
            },function(e){
                alert("认证授权失败："+e.code+" - "+e.message );
            
        });
    }
}
/**
   * 发送分享消息
   * @param {JSON} msg
   * @param {plus.share.ShareService} s
   */
function shareMessage(msg,s){
    
    // alert(JSON.stringify(msg));
    s.send( msg, function(){
        alert("分享到\""+s.description+"\"成功！ ");
        
    }, function(e){
        alert( "分享到\""+s.description+"\"失败: "+JSON.stringify(e) );
    
    } );
}
// 分析链接
function shareHref(){
    var shareBts=[];
    // 更新分享列表
    var ss=shares['weixin'];
    ss&&ss.nativeClient&&(shareBts.push({title:'微信朋友圈',s:ss,x:'WXSceneTimeline'}),
    shareBts.push({title:'微信好友',s:ss,x:'WXSceneSession'}));
    ss=shares['qq'];
    ss&&ss.nativeClient&&shareBts.push({title:'QQ',s:ss});
    // 弹出分享列表
    shareBts.length>0?plus.nativeUI.actionSheet({title:'分享链接',cancel:'取消',buttons:shareBts},function(e){
        (e.index>0)&&shareAction(shareBts[e.index-1],true);
    }):plus.nativeUI.alert('当前环境无法支持分享链接操作!');
}export default{
  shareHref // 因为我使用的是vue 所以对外输出给vue使用
}

即可直接调用

以上为调用h5+plus分享的js

js写完了那么就需要调用这个js了

我们需要把js引入到我们的项目里面去所以我在vue入口文件main.js里面进行了注册

import utils from'@/components/w.js';
Vue.prototype.$utils=utils

然后即可进行调用

  <span @click="$utils.shareHref()">分享</span>

在 hbuilder下项目的配置里面填写微信的appid和密钥即可调用