vue开发APP使用微信分享和QQ分享功能

条件

微信开放平台申请微信开放平台appid
腾讯开放平台申请腾讯开放平台appid

打包环境Hbuilder

manifest.json中plus下的plugins下添加如下代码，并填写你的appid

"share" : {
            "weixin" : {
                "appid" : "wx****************",
                "UniversalLinks" : ""
            },
            "QQ" : {
                "appid" : "**********",
                "UniversalLinks" : ""
            }
        },

代码片段

html

此次使用vant的默认分享模板样式，有疑问的可以参考
Vant ShareSheet 分享面板

<van-share-sheet v-model="showShare" :options="options" @select="onSelect"/>

js

封装share.js

import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast);
let Share = new Object();
var shares = null;
Share.service = function(){
    plus.share.getServices(function(s){
        shares={};
        for(var i in s){
            var t=s[i];
            shares[t.id]=t;
        }
        console.log(JSON.stringify(s));
    }, function(e){
        alert("获取分享服务列表失败： "+JSON.stringify(e));
    });
}
  /**
 * 分享操作
 */
Share.shareAction = function(id, ex,shareUrl,detail) {
    var s = null;
    if (!id || !(s = shares[id])) {
        Toast("无效的分享服务！");
        return;
    }
    if (s.authenticated) {
        console.log("---已授权---");
        // shareMessage(s, ex,shareUrl,detail);
            shareMsg(s, ex,detail);

    } else {
        console.log("---未授权---");
        s.authorize(function() {
            // shareMessage(s, ex,shareUrl,detail);
            shareMsg(s, ex,detail);
        }, function(e) {
            Toast("认证授权失败");
        });
    }
}
    /**
 * 发送分享消息
 */
 function shareMsg(s, ex,detail) {
    var msg = {
        href: detail.link,
        title: detail.title,
        content: detail.desc,
        thumbs:  detail.imgUrl,
        pictures: detail.imgUrl,
        extra: {
            scene: ex
        }
    };
    s.send(msg, function() {
        Toast("分享成功!");
    }, function(e) {
        Toast("分享失败!");
    });
}
export default Share;

页面设置与调用

import shareJS from "@/assets/js/share.js"
document.addEventListener("plusready",function(){
  shareJS.service()
}, false);

//data中添加分享选项
 data () {
   return {
  	 showShare:false,
     options: [
         { index:0, id: "weixin", name: '微信', icon: 'wechat' ,ex:"WXSceneSession"},
         { index:1, id: "weixin", name: '朋友圈', icon: 'wechat-moments',ex:"WXSceneTimeline" },
         { index:2, id: "qq", name: 'QQ', icon: 'qq' },
         { index:3, name: '复制连接', icon: 'link' },
     ]
  	}
  },
  //methods中根据分享选项调用功能
  methods:{
   onSelect(e){
     this.showShare = false;
     if(e.index==3){
       this.copyLink(e);
     }else{
       this.wxShare(e);
     }
   },
   //分享到微信或QQ功能
   wxShare(e){
     let option={
                 title: "<分享标题>", // 分享标题
                 link: '<分享链接>', // 分享链接，可根据参数调整
                 imgUrl: '<分享图标>', // 分享图标
                 desc: "<分享描述>", // 分享描述
       };
     shareJS.shareAction(e.id,e.ex,option.link,option);
   },
   //复制链接功能
   copyLink(e){
     let link= <分享链接>
     this.$copyText(link)
           .then(()=>{
              this.$toast('复制链接成功，请分享');
           })
           .catch((e)=>{console.log(e);})
   }