vue weixin-js-sdk进行微信分享

2023-11-13

第一步:安装weixin-js-sdk   

 

npm install weixin-js-sdk

第二步:

在assets文件下新建个common文件夹 ,然后再新建个utils.js文件

import wx from "weixin-js-sdk";

/*
* 微信分享
* 获取微信加签信息
* @param{data}:获取的微信加签
* @param{shareData}:分享配置参数
*/
export const wexinShare = (data, shareData) => {
	let appId = data.appId;
	let timestamp = data.timestamp;
	let nonceStr = data.nonceStr;
	let signature = data.signature;
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		appId: appId, // 必填,公众号的唯一标识
		timestamp: timestamp, // 必填,生成签名的时间戳
		nonceStr: nonceStr, // 必填,生成签名的随机串
		signature: signature, // 必填,签名,见附录1
		jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
	});
	wx.ready(function () {
		//分享到朋友圈”及“分享到QQ空间”
		wx.updateTimelineShareData({
			title: shareData.title, // 分享标题
			link: shareData.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: shareData.imgUrl, // 分享图标
			success: function (res) {
				// 设置成功
				// console.log("分享成功返回的信息为:", res);
			}
		})

		//“分享给朋友”及“分享到QQ”
		wx.updateAppMessageShareData({
			title: shareData.title, // 分享标题
			desc: shareData.desc, // 分享描述
			link: shareData.link, // 分享链接
			imgUrl: shareData.imgUrl, // 分享图标
			success: function (res) {
				// console.log("分享成功返回的信息为:", res);;
			}
		})

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

 第三步:调用

import {wexinShare} from "@/common/utils.js";
//请求微信配置参数接口(获取签名),由后台给接口给
get_share(){
    var that = this;
    var urls = that.$qs.stringify(window.location.href.split('#')[0]);
    
    //看后台请求接口是get/post
    that.$axios.post("/xxx",urls).then((res) => {
       if (res.data) {
	    //微信加签
	    var obj = {
		    appId: res.data.appId,
		    nonceStr: res.data.nonceStr,
		    signature: res.data.signature,
		    timestamp: res.data.timestamp
	    }
	    //分享数据,这段主要是为了在hash模式下分享出去的链接不被浏览器截取,保证完全把链接分享出去
	    var shareWxLink = window.location.href.split('#')[0] + 'static/redirect.html?redirect=' + encodeURIComponent(window.location.href) + '&pid_uid=' + userinfo.uid;
	    // console.log('shareWxLink', shareWxLink)
	    let shareData = {
		    title: '标题', // 分享标题
		    link: shareWxLink,
		    imgUrl: 'http://xxx.jpg', // 分享图标
		    desc: '这里填写简介文字'
	    }
        //引用
	    wexinShare(obj, that, shareData);
	    } else {
		    that.$toast('获取sdk参数失败!');
	    } 

  })

}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue weixin-js-sdk进行微信分享 的相关文章

  • RISC-V IDE MounRiver Studio相较Eclipse GNU的区别与改进

    RISC V单片机集成开发环境 IDE MounRiver Studio相较Eclipse GNU的区别与改进 一 界面与功能区别 1 欢迎页 MounRiver Studio www mounriver com 左侧为工程操作及帮助文档快
  • 机器学习(二)分类器及回归拟合

    在机器学习中 分类器作用是在标记好类别的训练数据基础上判断一个新的观察样本所属的类别 分类器依据学习的方式可以分为非监督学习和监督学习 非监督学习顾名思义指的是给予分类器学习的样本但没有相对应类别标签 主要是寻找未标记数据中的隐藏结构 监督
  • 互补品的需求曲线图_需求曲线:需求曲线的移动

    我们已经知道市场需求量是社会中各个家庭或企业的需求总和 那么需求曲线的变动是什么因素引起的呢 这将是我们本次讨论的重点问题 我们在讨论市场需求需求曲线时假设的前提 其他条件都保持不变 但是随着时间的推移 该曲线不一定是稳定不变的 如果某种因

随机推荐