在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了,

原始的分享效果:

使用微信JS-SDK的分享效果:

首先需要引入weixin-js-sdk

npm install weixin-js-sdk --save

在main.js中引用

* 微信分享后自定义缩略图及标题
 
import {getSignature} from '../services/wechat.js';
export default {
data: function() {
return {
wxReady: false,
apiReady: false,
wxShare: {}
};
},
created() {
const _this = this;
getSignature({url: location.href})
.then(data => {
const wx = this.$wx;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appid, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function() {
_this.wxReady = true;
_this.toShare();
});
wx.error(function() {
// config信息验证失败会执行error函数
});
})
.catch(error => {
/* eslint-disable */
console.error('获取微信签名出错', error);
});
},
methods: {
setWxShare: function(params) {
this.apiReady = true;
const config = {
link: window.location.href,
...params
};
this.wxShare = config;
this.toShare();
},
toShare: function() {
if (this.apiReady && this.wxReady) {
const wx = this.$wx;
const config = this.wxShare;
wx.onMenuShareAppMessage(config); //分享给朋友
wx.onMenuShareTimeline(config); //分享到朋友圈
wx.onMenuShareQQ(config); //分享给手机QQ
}
}
}
};

然后再文件中引入既可:

在vue中使用weixin-js-sdk自定义微信分享效果的更多相关文章

  1. 使用JS-SDK自定义微信分享效果

    前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题,摘要),一开始真是一脸懵逼,在网上搜索了半天之后大概有了方案.值得注意的是一开始搜索到的解决方案全是调用微 ...

  2. 带你使用JS-SDK自定义微信分享效果

    前言 想必各位在写wap端时都遇到过这样的场景吧 ----自定义分享标题.图片.描述 接下来小编给大家讲解下分享相关操作 预期效果 原始的分享效果: 使用微信JS-SDK的分享效果: 可以看出缩略图, ...

  3. 手把手带你使用JS-SDK自定义微信分享效果

    https://www.cnblogs.com/backtozero/p/7064247.html

  4. vue中config/index.js:配置的详细理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  5. vue中使用raphael.js实现地图绘制

    一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> &l ...

  6. Vue中使用fullpage.js

    Vue中使用fullpage.js:https://blog.csdn.net/weixin_34184158/article/details/88672739

  7. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  8. php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  9. .Net微信网页开发之使用微信JS-SDK自定义微信分享内容

    第一步.微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token ...

随机推荐

  1. OpenCV 中轮廓包裹的几个函数boundingRect、minAreaRect、minEnclosingCircle用法

    当我们得到对象轮廓后,可用boundingRect()得到包覆此轮廓的最小正矩形,minAreaRect()得到包覆轮廓的最小斜矩形,minEnclosingCircle()得到包覆此轮廓的最小圆形, ...

  2. scapy学习笔记(5)

    1.ACK Scan >>>ans,unans=sr(IP(dst=,],flags="A") 扫描后,若要找出未过虑的端口: for s,r in ans: i ...

  3. Android github上的好的开源项目汇总

    转自:http://blog.csdn.net/ithomer/article/details/8882236 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上.基于 ...

  4. HDU 3440 House Man(编号排序+线性差分约束跑最短路)

    House Man Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  5. [SDOI2012]任务安排 BZOJ2726 斜率优化+二分查找

    网上的题解...状态就没有一个和我一样的...这让我有些无从下手... 分析: 我们考虑,正常的斜率优化满足x(i)单调递增,k(i)单调递增,那么我们就可以只用维护一个单调队列满足对于当前的x(i) ...

  6. C指针乱谈(1)

    写了几年的C指针几乎没怎么用过,因为感觉没什么用.不过在听了一位老师讲课之后,我改变的我的想法. 在此稍做总结,希望能帮到一些和我有同样想法的人,希望看完这篇文章后能改变您的想法. 首先,说说概念,指 ...

  7. 腾讯云CVM服务器怎么建网站

    腾讯云云服务器CVM站在用户的角度看就相当于一台计算机,虽然实际上它是一个虚拟服务器,是一个大的云端服务器集群虚拟出来的一个虚拟服务器,在使用上直接当做一个实际的服务器即可.那么,对于一个新手菜鸟来说 ...

  8. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  9. SSIS 你真的了解事务吗?

    事务用于处理数据的一致性,事务的定义是,处于同一个事务中的操作是一个工作单元,要么全部执行成功,要么全部执行失败.把事务的概念应用到在实际的SSIS Package场景中,如何在Package中实现事 ...

  10. JavaScript快速入门-ECMAScript本地对象(String)

    一.String对象 String对象和python中的字符串一样,也有很多方法,这些方法大概分为以下种类: 1.索引和查找 1.charAt()   返回指定位置的字符. 2.charCodeAt( ...