vue 配置微信分享
2024-09-22 08:41:26
参考：https://www.cnblogs.com/goloving/p/9256212.html
1. main.js
import WXConfig from '../../assets/js/wx.jsapi';
2. wx.jsapi.js
import axios from 'axios'
export default {
wxShowMenu: function(shareData) {
var localURL = location.href.split('#')[0];
var param = {
'url': localURL
};
var wxData = shareData.wxData;//分享配置信息
var Param1= shareData.param1;//假设需传参数1
var Param2= shareData.param2;//假设需传参数2
var ifshare = shareData.ifshare;//是否开启分享
var _this = shareData.that;
axios.get('*****', {//获取config信息链接
params: param
}).then(function(res) {
if (res.status == 200 && res.data.result == 0) {
var getMsg = res.data.message.ticket;
wx.config({
debug: false, //生产环境需要关闭debug模式
appId: getMsg.appId, //appId通过微信服务号后台查看
timestamp: getMsg.timestamp, //生成签名的时间戳
nonceStr: getMsg.nonceStr, //生成签名的随机字符串
signature: getMsg.signature, //签名
jsApiList: [ //需要调用的JS接口列表
'onMenuShareTimeline', //分享给好友
'onMenuShareAppMessage', //分享到朋友圈
'hideMenuItems'
]
});
wx.ready(function() {
/* wx.checkJsApi({
jsApiList: ["showMenuItems"],
success: function(res) {
wx.showMenuItems({
menuList: [
'menuItem:share:appMessage', //发送给朋友
'menuItem:share:timeline' //分享到朋友圈
]
});
}
});*/
if (ifshare == '1') {//后端未开启分享则屏蔽分享菜单
wx.hideAllNonBaseMenuItem();
return;
}
//分享到朋友圈
wx.onMenuShareTimeline({
title: wxData.title, // 分享标题
desc: wxData.info, //分享描述
link: wxData.shareurl, // 分享链接
imgUrl: wxData.img, // 分享图标
success: function(res) {
// 用户确认分享后执行的回调函数
var param = {
param: {
param1: Param1,
param2: Param2
}
}
_this.axios.get('****', {//分享回调链接，用于自行记录判断之类
params: param
}).then(function(res) {
if (res.status == 200 && res.data.result == 0) {
console.log('分享成功');
}
}).catch(function(err) {
console.log(err);
})
console.log("分享朋友圈成功返回的信息为:", res);
},
cancel: function(res) {
// 用户取消分享后执行的回调函数
console.log("取消分享朋友圈返回的信息为:", res);
}
}); //分享给朋友
wx.onMenuShareAppMessage({
title: wxData.title, // 分享标题
desc: wxData.info, //分享描述
link: wxData.shareurl, // 分享链接
imgUrl: wxData.img, // 分享图标 success: function(res) {
// 用户确认分享后执行的回调函数
var param = {
param: {
param1: Param1,
param2: Param2
}
}
_this.axios.get('****', {//分享回调链接，用于自行记录判断之类
params: param
}).then(function(res) {
if (res.status == 200 && res.data.result == 0) {
console.log('分享成功');
}
}).catch(function(err) {
console.log(err);
})
console.log("分享朋友圈成功返回的信息为:", res);
},
cancel: function(res) {
// 用户取消分享后执行的回调函数
console.log("取消分享给朋友返回的信息为:", res);
}
});
});
}
})
},
}
3. vue中
activated(){
this.getShare();//放在这里获取是因为我用了keep-alive（在组件切换过程中将状态保留在内存中，防止重复渲染DOM），而此方法需要“每次进入组件都调用，从而初始化微信分享配置等”——关键，否则分享会出问题。
},
methods(){
getShare(){
let _this = this,
shareData = {
wxData: wxShareInfo,//分享配置信息
param1: _this.param1,
param2: _this.param2,
ifshare: _this.ifshare,
that: _this
};
_this.WXConfig.wxShowMenu(shareData);
}
}
最新文章
- 「理解HTTP」之常见的状态码segmentfault
- 【原】iOS学习之UITabBar的隐藏
- C#可扩展编程之MEF学习笔记（一）：MEF简介及简单的Demo
- 没有R.java问题找不到getActionBar()方法
- 基本I/O模型与Epoll简介
- word多级编号，如何让第一级为大写“一”，其他级别均为小写1.
- 如何管理linux开机自启服务
- What is the innovator’s solution——什么才是创新的解决方案2
- python中的单下划线和双下划线意义和作用
- interview:about Oracle表空间
- Linux守护进程详解(init.d和xinetd)
- qt下面例子学习（部分功能）
- ASP.NET - 上传图片方法（单张）
- 最长公共子序列问题 (LCS)
- 从Java的角度简单修复Cookie越权漏洞
- web 页面上纯js实现按钮倒计数功能(实时计时器也可以)
- Unity3d跨平台原理
- npm install 包 失败解决方法
- [Oracle]如何查看一个数据文件是否是自动扩展
- SSL身份认证原理 - 目标: 搞清楚数字证书和数字签名的关系
热门文章
- linux安装jrockit 1.6
- This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its de 错误解决
- 剑指offer第二版面试题3：二维数组中的查找（JAVA版）
- 拾遗：Qemu/KVM
- 20140613 Opencv重新编译 word小技巧
- mysql动态列--统计报表信息对比
- maven管理工具配置
- 8.1_springboot2.x之Actuator应用监控
- Spring IOC源码分析（二）：Bean工厂体系结构设计
- vt-is-UTF8 - check whether current VT is in UTF8- or byte-mode. 检查当前VT是否处于VTF8模式或是字节模式.