首页 技术 正文
技术 2022年11月16日
0 收藏 364 点赞 3,243 浏览 1249 个字

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

原始的分享效果:

在vue中使用weixin-js-sdk自定义微信分享效果

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

在vue中使用weixin-js-sdk自定义微信分享效果

首先需要引入weixin-js-sdk

npm install weixin-js-sdk –save

在main.js中引用

在vue中使用weixin-js-sdk自定义微信分享效果

* 微信分享后自定义缩略图及标题 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, // 必填,签名,见附录1jsApiList: [‘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自定义微信分享效果

在vue中使用weixin-js-sdk自定义微信分享效果

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,085
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,560
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,409
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,182
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,819
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,902