vue项目之微信分享

1. npm install weixin-js-sdk --save 

2. mian.js

引入 import wx from 'weixin-js-sdk'

Vue.prototype.wx = wx

3.wxapi.js 封装的公共js

import wx from 'weixin-js-sdk'
import Vue from 'vue'

export function wxShare(r, wxParams) {
    let links = wxParams.links; //分享出去的链接
    let title = wxParams.title; //分享的标题
    let desc = wxParams.desc;
    let imgUrl = wxParams.shareImage;
    let shareSuccess = wxParams.shareSuccess;
    let shareFailure = wxParams.shareFailure;
    let configFailure = wxParams.configFailure;
    let resultObject = {
        code: 0,
        msg: ""
    };

    wx.config({
        debug: false,
        appId: r.appId,
        timestamp: r.timestamp,
        nonceStr: r.nonceStr,
        signature: r.signature,
        jsApiList: [
            'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'
        ]

    });
    wx.ready(function() {
        wx.onMenuShareTimeline({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                if(shareSuccess) {
                    shareSuccess("Timeline");
                }
            },
            cancel: function() {
                if(shareFailure) {
                    shareFailure(resultObject);
                }
            }
        });
        //微信分享菜单测试
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                if(shareSuccess) {
                    shareSuccess("AppMessage");
                }
            },
            cancel: function() {
                if(shareFailure) {
                    shareFailure(resultObject);
                }
            }
        });
        wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                if(shareSuccess) {
                    shareSuccess("QQ");
                }

            },
            cancel: function() {
                if(shareFailure) {
                    shareFailure(resultObject);
                }
            }
        });
        wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                if(shareSuccess) {
                    shareSuccess("Weibo");
                }
            },
            cancel: function() {
                if(shareFailure) {
                    shareFailure(resultObject);
                }
            }
        });
        wx.onMenuShareQZone({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                if(shareSuccess) {
                    shareSuccess("QZone");
                }

            },
            cancel: function() {
                if(shareFailure) {
                    shareFailure(resultObject);
                }
            }
        });
    });
    wx.error(function(res) {
        if(configFailure) {
            configFailure(resultObject);
        }
        
        //        Vue.$showError();
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    });
}

4.页面调用

import { wxShare } from './wxapi.js'

methods: {

share() {
                let params = {
                    "body": {
                        ChatShareUrl: window.location.href
                    }
                }
                this.$api.post('weChatShare', params, r => {
                    wxShare(r, {
                        shareSuccess: this.shareSuccess,
                        links: process.env.SHARE_ROOT,
                        title: "分享标题",
                        desc: '分享描述',
                        shareImage: process.env.SHARE_ROOT_IMG + '/static/images/share.png', 
                        shareFailure: function() {
                            this.showToast("分享失败,您取消了分享!")
                        },
                        configFailure: function() {
                            this.showToast("微信接口出现异常,请稍后再试!")
                        }
                    });
                });
            }

},

    created() {

this.share()

}

}

 

 

 

你可能感兴趣的:(vue项目总结)