vue 配置微信分享
参考: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);
}
}
vue 配置微信分享的更多相关文章
- [转]Vue项目全局配置微信分享思路详解
这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...
- vue实现微信分享朋友圈和朋友功能
vue实现微信分享朋友圈和朋友功能 A-A+ haibao 2018-10-25 11 21 6.2 k 百度已收录 前端开发 温馨提示:本文共3536个字,读完预计9分钟. 这两天在开发 ...
- Vue+Vue-router微信分享功能
在使用vue和vue-router路由框架已经开发过好几个项目了,其中也遇到不少坑,有些坑各种搜也没有找到非常理想的答案. vue学习相对来说还是比较简单,官方文档说明非常清楚(https://cn. ...
- vue项目微信分享之后路由链接被破坏怎么办
异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- VUE使用微信JDK(附踩坑记录)
VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...
- React Native微信分享 朋友圈分享 Android/iOS 通用
超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用 2016/06/16 | React Native技术文章 | Sky丶清| 暂无评论 | 1 ...
- 一篇搞定微信分享和line分享
前言 在h5的页面开发中,分享是不可或缺的一部分,对于一些传播性比较强的页面,活动页之类的,分享功能极为重要.例如,京东等电商年末时会有一系列的总结h5在微信中传播,就不得不提到微信的分享机制. 微信 ...
- React Native实现微信分享
(一)前言 现阶段大家在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能. 刚创建的React N ...
随机推荐
- docker集群故障迁移
docker swarm 故障时候镜像迁移(无法添加新节点的时候)生产docker集群出现了故障,无法正常添加删除节点.在这样的情况下只能想办法把故障集群的镜像迁移到新的docker集群当中.将发生故 ...
- python re 正則匹配規則
- [转] JPA 2.0 with EclipseLink - 教程
原文: http://www.vogella.com/articles/JavaPersistenceAPI/article.html Lars Vogel Version 2.2 Copyright ...
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- Spring Boot跨域问题解决方案
@Configurationpublic class CorsConfig { @Bean public FilterRegistrationBean corsFilter() { UrlBasedC ...
- 50-Ubuntu-其他命令-2-软硬链接示意图
在Linux中,文件名和文件的数据是分开存储的. 使用ls -lh可以查看一个文件的硬链接数. 在日常工作中,几乎不会建立文件的硬链接数. 在Linux中,只有文件的硬链接数等于0才会被删除.如下图第 ...
- Avito Cool Challenge 2018 B - Farewell Party
题目大意: 有n个人 接下来一行n个数a[i] 表示第i个人描述其他人有a[i]个的帽子跟他不一样 帽子编号为1~n 如果所有的描述都是正确的 输出possible 再输出一行b[i] 表示第i个人的 ...
- centos7 sshd 安全设置
ssh 的安全机制 1.SSH之所以能够保证安全,原因在于它采用了非对称加密技术(RSA)加密了所有传输的数据. 2.传统的网络服务程序,如FTP等在网络上用明文传送数据.用户帐号和用户口令,很容 ...
- linux redis的启动---后台启动
1.启动redis服务: redis-server 如果想要开启后台进程: 1.找到redis.conf里边的 把no 改为yes. 2.redis-server redis.conf(这个是针对两个 ...
- Centos 14: problem making ssl connection
在执行 yum 命令时,会提示 Loaded plugins: fastestmirror Loading mirror speeds from cached hostfile Could not g ...