在做微信分享的时候,产品要求分享效果要有文字和图片,使用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. XmlSpy / XSD以及验证

    很早以前看过一句话:“XML就象空气”,在企业应用开发中XML是一个重要的数据交换标准.而XSD则可以用来校验XML的数据格式是否正确. 一个典型的XSD文件如下: <?xml version= ...

  2. WorldWind源码剖析系列:四叉树瓦片类QuadTile

    四叉树瓦片类QuadTile提供了对影像和地形数据的四叉树访问模型.该类的类图如下. 四叉树瓦片类QuadTile提供的主要字段.属性和方法简要描述如下: public QuadTileSet Qua ...

  3. Python2.7-hmac

    hmac 模块,基于密钥的哈希算法 1.模块对象 1.1 HMAC 对象 1.1.1 初始化构建类:需要通过模块方法 hmac.new(key[, msg[, digestmod]]) 创建一个新对象 ...

  4. Java中splite的用法与小技巧

    在java.lang包中也有String.split()方法,与.net的类似,都是返回是一个字符型数组,但使用过程中还有一些小技巧.如执行:"2|33|4".split(&quo ...

  5. haproxy [WARNING] 312/111530 (17395) : config : 'option forwardfor' ignored for frontend 'harbor_login' as it requires HTTP mode.

    1.经过调查, 2down voteaccepted x-forwarded-for is an HTTP header field, so has nothing to do with the tr ...

  6. 微信小程序开发 [03] 事件、数据绑定和传递

    1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...

  7. log下一次改版优化别人代码的事

    有次接到个PM要改版一个功能的UI设计,前端童鞋还没敲定页面的时候,我先看了看这个功能的后台,我擦...简直是惨不忍睹..对PM来说是改版UI,对我这么有点代码洁癖的来说就是优化代码. 首先我能肯定的 ...

  8. vi 替换

    在vi编辑器中,能够利用 :s命令能够实现字符串的替换.详细的使用方法例如以下: 1.:s/str1/str2/ 用字符串 str2 替换行中首次出现的字符串str1: 2.:s/str1/str2/ ...

  9. [Baltic 2011]Lamp BZOJ2346

    分析: 建图最短路,比较裸. 我们可以考虑,如果是‘\’那么,左上连右下边权为0,左下连右上边权为1,反之亦然. 卡裸spfa,加点优化能过,我就直接改成的堆优化Dijkstra 附上代码: #inc ...

  10. 使用MySQL命令行修改密码

    格式:mysqladmin -u用户名 -p旧密码 password 新密码 1.给root加个密码ab12.首先在DOS下进入目录mysql\bin,然后键入以下命令    mysqladmin - ...