项目场景：

项目场景：一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友

效果图如下

首先得得下载微信的 weixin-js-sdk

cnpm i weixin-js-sdk --save

在需要分享的页面引入

import wx from 'weixin-js-sdk'; // 引入wxjs
import { shares } from '@/api/index'; // 分享的接口  传给后端一个地址(与域名一致)

在methods写调用的方法

// vue调用微信的自定义分享getShareInfo() {this.save = {url: location.href.split('#')[0] // 只需要传地址就好，其他后端都会写好来};shares(this.save).then(res => {const config = res.data;wx.config({appId: config.appId,  // appID 公众号的唯一标识timestamp: config.timestamp, // 生成签名的时间戳nonceStr: config.nonceStr, //  生成签名的随机串signature: config.signature, // 生成的签名jsApiList: ['updateAppMessageShareData','updateTimelineShareData','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone',]});wx.ready(() => {var shareData = {title: '王者归来-王者突破特训营',desc: '帮助青铜早日登上王者之路',link: window.location.href,imgUrl:'分享出去的图片地址'};//点击要去分享wx.updateAppMessageShareData(shareData);wx.updateTimelineShareData(shareData);wx.onMenuShareTimeline(shareData);wx.onMenuShareAppMessage(shareData);wx.onMenuShareQQ(shareData);wx.onMenuShareWeibo(shareData);wx.onMenuShareQZone(shareData);});});}

在 mounted 中调用分享的方法

 mounted() {this.getShareInfo(); // 调用分享的事件},

ok好了，这就是我项目效果图及代码，希望对你们有所帮助,觉得还行的，可以点点关注啊

VUE + 微信分享相关推荐

vue微信分享给朋友，朋友圈自定义网页链接url改变了
以下是微信分享给朋友,朋友圈的部分代码 wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客 ...
vue 微信分享带图片，带title，带简介
效果图如下我写在app.vue中 <script> import sdk from './router/share'; // 引入sdk.export default {name: 'A ...
vue 微信分享功能
因为是全局的分享,所有以下操作在App.vue中实现. 安装weixin-js-sdk npm i weixin-js-sdk -S 在js引入并使用 script> // 引入 import ...
vue微信分享中相关问题（安卓分享成功，IOS分享失效）
问题一:图片路径正确的情况下,缩略图不显示. 解决:将图片尺寸改为200*200. 问题二:安卓分享成功,IOS分享失效,IOS分享始终分享的是首页. 解决: IOS:每次切换路由,url是不会变的, ...
vue 分享微信传参_vue 中使用微信分享接口（简单实用）
前言开发微信小程序时,基本上都要接入微信的SDK,而微信也提供了非常多的接口供我们去完成我们想要的功能.微信分享功能常常是我们在开发中常见的需求之一,本文将围绕微信分享接口使用展开,给自己以后碰到需 ...
Vue开发微信H5 微信分享签名失败问题解决方案
Vue开发微信H5 微信分享签名失败问题解决方案参考文章: (1)Vue开发微信H5 微信分享签名失败问题解决方案 (2)https://www.cnblogs.com/golddemon/p/94 ...
对hash签名失败_详解Vue开发微信H5微信分享签名失败问题解决方案
关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时 ...
vue 分享微信传参_vue实现微信分享链接添加动态参数的方法
微信分享时分享链接携带参数可能不是固定的需要在分享的前一刻才知道这里就是动态设置分享链接的基本写法代码不是那么详尽但大致流程如下 1.安装引用jssdk npm install --save ...
vue项目做微信分享功能
vue项目做微信分享功能安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息( ...
vue 如何调用微信分享_Vue开发添加微信分享功能（全局分享）
在Vue4.0开发微信公众号的时候,需要做微信分享功能.这个功能其实还算简单,具体的思路如下: 1.安装微信JSSDK和Axios(axios是http请求插件) 2.向后台请求微信配置参数 3.初始 ...

VUE + 微信分享

项目场景：

VUE + 微信分享相关推荐

最新文章

热门文章