vue 微信分享带图片，带title，带简介

效果图如下

我写在app.vue中

<script>
import sdk from './router/share'; // 引入sdk.export default {name: 'App',mounted() {/* eslint-disable */this.isIPhoneX();const url = location.href.split('#')[0];const dataForWeixin = {title: '未来尽在平方之间',      // 分享标题desc: '重庆壹平方米网络科技有限公司诚邀您在线体验线上购房全流程',                      // 分享内容linkurl: "http://show.1m2.net/sj", // 分享链接img: 'http://show.1m2.net/sj/static/img/share.jpg',                // 分享内容显示的图片(图片必须是正方形的链接)};const ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger') {sdk.getJSSDK(url,dataForWeixin);                  //传入sdk.js需要的参数} else {console.log('不是微信浏览器')}},methods: {isIPhoneX() {const u = navigator.userAgent;/* eslint-disable */const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端if (isIOS) {if (screen.height === 812 && screen.width === 375) {// 是iphoneXthis.$store.commit('iphonex', true);} else {// 不是iphoneXthis.$store.commit('iphonex', false);}}},},
};
</script>

share.js

import wx from 'weixin-js-sdk'; // 微信sdk依赖
import axios from 'axios';
// 引用全局
/* eslint-disable */
const jsApiList = ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','hideOptionMenu','showOptionMenu','shareTimeline' //不存在
];// 要用到微信API
function getJSSDK(url, dataForWeixin) {// 调用后台接口换取参数axios.get('https://zbhxfapi.1m2.net/weixin/share', {params: {url,},}).then((res) => {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.data.object.appId, // 必填，公众号的唯一标识timestamp: res.data.object.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.object.nonceStr, // 必填，生成签名的随机串signature: res.data.object.signature, // 必填，签名jsApiList, // 必填，需要使用的JS接口列表});wx.ready(() => {wx.onMenuShareAppMessage({title: dataForWeixin.title,desc: dataForWeixin.desc,link: dataForWeixin.linkurl,imgUrl: dataForWeixin.img,trigger: function trigger(res) {},success: function success(res) {console.log('已分享');},cancel: function cancel(res) {console.log('已取消');},fail: function fail(res) {console.log(JSON.stringify(res), 123456);},});// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口wx.onMenuShareTimeline({title: dataForWeixin.title,link: dataForWeixin.linkurl,imgUrl: dataForWeixin.img,trigger: function trigger(res) {// alert('用户点击分享到朋友圈');},success: function success(res) {// alert('已分享');},cancel: function cancel(res) {// alert('已取消');},fail: function fail(res) {alert(JSON.stringify(res));},});// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口wx.onMenuShareQQ({title: dataForWeixin.title,desc: dataForWeixin.desc,link: dataForWeixin.linkurl,imgUrl: dataForWeixin.img,trigger: function trigger(res) {// alert('用户点击分享到QQ');},complete: function complete(res) {alert(JSON.stringify(res));},success: function success(res) {// alert('已分享');},cancel: function cancel(res) {// alert('已取消');},fail: function fail(res) {// alert(JSON.stringify(res));},});// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口wx.onMenuShareWeibo({title: dataForWeixin.title,desc: dataForWeixin.desc,link: dataForWeixin.linkurl,imgUrl: dataForWeixin.img,trigger: function trigger(res) {// alert('用户点击分享到微博');},complete: function complete(res) {// alert(JSON.stringify(res));},success: function success(res) {// alert('已分享');},cancel: function cancel(res) {// alert('已取消');},fail: function fail(res) {// alert(JSON.stringify(res));console.log(JSON.stringify(res));},});});wx.error((res) => {console.log(`${JSON.stringify(res)}微信验证失败`, 456);// alert(JSON.stringify(res)+"微信验证失败");});});
}
export default {// 获取JSSDKgetJSSDK,
};

另外还需要在微信公众号里面设置

JS接口安全域名点击设置将下图二的文件下载下来放到对应的服务器上即可

注意点：

分享内容显示的图片(图片必须是正方形的链接) 尽量是线上链接（本地的话打包可能会出现不显示的问题）

其实很简单，只是第一次不会，走了很多坑！尽量填坑中

vue 微信分享带图片，带title，带简介相关推荐

axure中怎么把图片变圆_orcad中怎么创建带图片的Title Block？
一般来说,Title Block都是调用系统本身自带的,或者是修改自带的文件,所以这里我们直接复制一个系统自带的Title Block,修改后保存在路径下,进行关联即可. 第一步,从系统自带的模板Ca ...
JavaWeb--邮件发送（web注册邮件，纯文本邮件，带图片邮件，带附件邮件）
邮件服务器与传输协议发送邮件:SMTP协议通常把处理用户smtp请求(邮件发送请求)的服务器称之为SMTP服务器(邮件发送服务器). 接收邮件:POP3协议通常把处理用户pop3请求(邮件接收请 ...
c语言考试的说说带图片致自己,好听的说说带图片_说说带图片励志致自己
现在在朋友圈发说说,不配张图都觉得不好看,那么有哪些比较适合配好听一点说说的图片呢?接下来,学习啦小编跟你分享好听的说说带图片,欢迎欣赏致自己的励志说说带图片. 好听的说说带图片 1.愿你如阳光,快乐 ...
关于微信分享logo图片不显示，带有微信敏感文字
做微信分享的时候,发现自己分享的链接带的logo自己能看到,但是好友是看不到的. 问题是因为描述语带有微信敏感关键字,就我所知的微信敏感关键字如下: 1.红包 2.现金 3.神圣 4.使命 5.一路同 ...
android微信分享icon不能显示,微信分享 icon图片不显示问题
微信分享中,会有一个小图标显示出来,该怎么做,注意哪些问题这个图片能显示的条件: 宽高大于300px 页面从上到下的第一张图片除了上面两点,经过测试,还有以下要注意的 img标签上不能出现 dis ...
微信分享指引图片关于微信中分享到朋友圈代码
转自: https://www.server110.com/jiaocheng/201703/2806284.html 最近在做微信的项目,遇到需要转发到朋友圈功能,有需要的朋友可以参考首先看页面源 ...
vue微信分享给朋友，朋友圈自定义网页链接url改变了
以下是微信分享给朋友,朋友圈的部分代码 wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客 ...
微信分享圆角图片有黑色部分
近期做微信分享,分享时图片需要用app的logo做为分享图标,因为logo是一个圆角的图标,并且背景为透明色,所以导致分享后图片有黑色的部分 1.第一种解决方案就是直接让ui重新切图 2.直接用代码实 ...
微信分享接口图片显示不出来，只有自己能看的到
微信分享接口当分享的标题或描述含有恭喜发财 , 领取, 红包,等字眼的时候分享的链接图片则显示不出来,只有自己能看得到

vue 微信分享带图片，带title，带简介

vue 微信分享带图片，带title，带简介相关推荐

最新文章

热门文章