vue页面分享微信朋友圈

个人博客地址

微信官方文档

注：1.web的分享只能通过微信右上角自带的三个点分享，只有app才能实现自定义按钮的分享。

步骤：

1.安装：npm i -S weixin-js-sdk

2.新建js导入

import wx from ‘weixin-js-sdk’ //微信sdk依赖

3.js文件

import wx from 'weixin-js-sdk'         //微信sdk依赖
import axios from 'axios';    // 引用全局//要用到微信API
function getJSSDK (url, dataForWeixin) {// 调用后台接口换取参数axios({url: "/news-serve/admin/wx-index/share",// 需要改成自己对应的接口params: {url: url}}).then(res => {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.data.data.appId, // 必填，公众号的唯一标识timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串signature: res.data.data.signature, // 必填，签名// jsApiList: jsApiList // 必填，需要使用的JS接口列表jsApiList: [ //需要调用的JS接口列表'updateAppMessageShareData', //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） 新接口'updateTimelineShareData', //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） 老接口// 'getLocation'  //获取定位]})wx.ready(function () {      //需在用户可能点击分享按钮前就先调用wx.updateTimelineShareData({title: dataForWeixin.title,desc: dataForWeixin.desc,link: dataForWeixin.linkurl,imgUrl: dataForWeixin.img,trigger: function trigger (result) { },success: function success (result) {//console.log('已分享');},cancel: function cancel (result) {//console.log('已取消');},fail: function fail (result) {//alert(JSON.stringify(result));}});wx.updateAppMessageShareData({title: dataForWeixin.title,desc: dataForWeixin.desc,link: dataForWeixin.linkurl,imgUrl: dataForWeixin.img,trigger: function trigger (result) { },success: function success (result) {//console.log('已分享');},cancel: function cancel (result) {//console.log('已取消');},fail: function fail (result) {//alert(JSON.stringify(result));}});});wx.error(function (result) {// alert(JSON.stringify(res)+"微信验证失败");});})
}export default {// 获取JSSDKgetJSSDK: getJSSDK
}

页面中引用（在页面信息请求回来时调用这个share()方法，加载微信配置）

import weiXinShare from "../util/shareWx"/*** @Description: 分享朋友圈* @date 2021/1/25*/
share (title, desc, img) {// 分享朋友圈var ip1 = location.href.split("#")[0];let dataForWeixin = {title: title, //分享标题desc: desc, //分享内容linkurl: location.href, //分享链接img: img //分享内容显示的图片(图片必须是正方形的链接)};weiXinShare.getJSSDK(ip1, dataForWeixin);
}_this.share(_this.options.title,_this.options.content.replace(/<[^>]+>/g,''),_this.options.img);

效果:

vue页面分享微信朋友圈相关推荐

html5 自动分享到朋友圈,html5手机端分享微信朋友圈代码
特效描述:html5手机端分享微信朋友圈.html5手机端分享微信朋友圈代码代码结构 1. HTML代码发送给朋友分享到朋友圈 button{width:100%;text-ali ...
互联网早报：淘宝发布购物车分享功能,双十一有望分享微信朋友圈
行业热点 1.淘宝发布购物车分享功能,双十一有望分享微信朋友圈: 2.微信小号来了:正测试新功能,同一个手机号可注册两个微信号: 3.京东汽配App上线传统汽车后市场供应链面临冲击: 4.阿里在海外 ...
新浪微博、微信朋友圈、qq空间分享---微信朋友圈
微信文档需要导入keystore测试,或者打包出来测试一.添加必要的权限支持: <uses-permission android:name="android.permission. ...
html页面发送微信朋友圈,【源码分享】分享一个基于官方share.html简化的分享js代码（微信，朋友圈，QQ）...
基于官方demo中的share.hml中的分享内容或者链接到微博,微信,QQ,自己简化了一个通用的分享方法,进一步减少分享功能的开发量. 代码附件中,由于不能上传html文件,所以把文件扩展名改成了d ...
微信公众号开发中分享功能分享微信朋友圈/微信好友
微信公众号中经常遇到的问题就是分享链接到微信朋友圈微信好友一类的需求. 下边走一下需要操作的流程 1.首先再项目中(一般就放到自己的公共文件中引入即可,vue中引入到index.html中)引入微信 ...
c# 文章分享微信朋友圈自定义标题、摘要、缩略图
微信升级后需要通过接入微信公众号才行,记录下. 一.登录微信公众号设置-功能设置-JS接口安全域名,设置网站的域名,可以多个二.前端配置:测试阶段将wx.config中的debug设置为true,页 ...
uniapp分享微信朋友圈微博 qq
封装了一个组件 <template><viewclass="maskBody"v-if="isShow"@click="isShow ...
node拉取微信权限，实现自定义分享微信朋友圈等操作
最近做一个应用需要实现自定义分享朋友圈的文字和图片,然后找了很多文章,总结趴坑如下,或许对你很有帮助,我看别人写的都是乱七八糟的,浪费我好多时间,所以决定自己写一个,保证拿过去直接用 node实现代码 ...
Taro2.* 小程序配置分享微信朋友圈
if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {Taro.showShareMenu({withShareTicket: true,menus: [" ...

vue页面分享微信朋友圈

vue页面分享微信朋友圈相关推荐

最新文章

热门文章