-
实用干货
对于前端页面,某个业务实体,需要实现移动端分享给微信好友或是分享到朋友圈,对分享内容实现自定义,本文是介绍如何实现给微信分享卡片设置图标、标题、描述文字等
干货详细
1.使用npm 安装或者在.html 文件里 <script src="" ></script >引入
npm install vue-draggable-plus
2.引入微信的SDK
import wx from 'weixin-js-sdk'
3.请求后端接口,在接口成功的回调函数中,通过wx的config接口注入权限验证配置封装 .js
const logo = 'https://www.xiezuoyanjiu.com/static/images/yidong.png'
// 自定义图片地址
function getShareInfo(urlstr, title) {
// 分享接口
axios.post('https://auth.xiezuoyanjiu.com/api/v1/share', {
url: urlstr
}, {
headers: {
app: 'vip-link'
},
})
.then(function (response) {
let res = response.data
// 请求成功的处理逻辑
if (res.code == 0) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.appid, // 和获取Ticke的必须一样------必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.noncestr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名,见附录1
//需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]
});
wx.ready(() => {
// 分享给朋友
wx.updateAppMessageShareData({
title: title, // 分享标题
link: urlstr, //这里可带参数,必须是同配置的JS安全域名一致
desc: '', // 分享描述
imgUrl: logo,// 必须是同配置的JS安全域名一致
success: function () { }
});
// 分享到朋友圈
wx.updateTimelineShareData({
title: title, // 分享标题
link: urlstr, //这里可带参数,必须是同配置的JS安全域名一致
imgUrl: logo, // 必须是同配置的JS安全域名一致
success: function () { }
})
})
wx.error(res => {
console.log('微信分享错误信息:', res)
})
}
})
}
4.组件里使用刚刚封装的 .js里的函数,内容自己配置
<script setup lang='ts'>
import { getShareInfo } from "../../untils/share.js"
getShareInfo(window.location.href, '核心产品 ')
// 核心产品为自定义标题
</script>
-
结论
建立这个平台的初衷:
-
打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。
-
遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。
-
平台现拥有功能问题、技术资讯、实用干货3个专栏内容。
感谢关注微信公众号:“程序员树朦”,免费领取"面试礼包
"一份,然后免费加入问答群
,从此让解决问题的你不再孤单!