实现移动端分享到微信朋友圈 / 转发分享给朋友好友，给微信分享卡片设置图标、标题、描述文字等

• 实用干货

   对于前端页面，某个业务实体，需要实现移动端分享给微信好友或是分享到朋友圈，对分享内容实现自定义，本文是介绍如何实现给微信分享卡片设置图标、标题、描述文字等

干货详细

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个专栏内容。

感谢关注微信公众号：“程序员树朦”，免费领取"面试礼包"一份，然后免费加入问答群，从此让解决问题的你不再孤单！