vue项目做微信分享功能-CSDN博客

本文链接：https://blog.csdn.net/zz975896590/article/details/119990843

vue项目做微信分享功能

安装sdk

npm install weixin-js-sdk --save

方法 1.新建js文件wxapi.js

2.在wxapi.js中引入sdk以及配置一些基本信息(相关的配置内容是后台返的)

3.然后在需要分享的页面引入wxapi.js，调用里面的方法

大概代码如下：

/**
 * 微信js-sdk
 * 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 */
import wx from 'weixin-js-sdk'

/**微信分享
 * @param {Object} option
 * {title:'',link:location.href.split('#')[0],imgUrl:'',desc:''}
 */
export function wxShare(option){
    let _this = this;
    this.axios({
        method:'GET',
        // url: //获取分享信息的接口
    })
    .then((res) => {
        let data = res;
        wx.config({
            debug: false, // 开启调试模式
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: [
                'checkJsApi',
                'updateTimelineShareData',
                'updateAppMessageShareData',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        wx.ready(function(){
            wx.updateTimelineShareData({
                title: option.title, // 分享标题
                link: option.link, // 分享链接
                imgUrl: option.imgUrl, // 分享图标
                desc: option.desc, // 分享描述
                success() {// 用户成功分享后执行的回调函数
                },
                cancel() {// 用户取消分享后执行的回调函数
                }
            });
            wx.updateAppMessageShareData({
                title: option.title, // 分享标题
                desc: option.desc, // 分享描述
                link: option.link, // 分享链接
                imgUrl: option.imgUrl, // 分享图标
                success() {// 用户成功分享后执行的回调函数
                },
                cancel() {// 用户取消分享后执行的回调函数
                }
            })
        })
    })
    .catch(() => {
    });
}

4.在需要分享的页面，如：index.vue

import wxapi from '@/assets/js/wxapi.js';//@/assets/js/wxapi.js为实际路径，根据实际情况修改

5.页面请求完接口之后，调用wxapi.js中的方法(可以写在created中，也可以写在初始化调用的方法据实际项目而定)