利用微信SDK在网页调起分享并自定义分享link与标题、描述
一、第一步
首先需要在公众号配置您想要分享的网页域名 白名单
如下图所示，完成设置
二、第二步
安装微信提供的JS-SDK包
npm install weixin-js-sdk -S
随便找个页面引入在控制台打印，出现下图信息，引入成功
三、第三步
上面是微信文档原话
四、第四步
新建tools.js文件
// Vue.js 项目正常引入即可// JS-SDKvar wx = require('weixin-js-sdk');/*** 验证配置(由后端接口提供配置验证的必要参数)* @description appId/timestamp/nonceStr/signature等* @param {Object} data - 后端必要参数* @return void*/function config(data) {// 手动注入配置wx.config({debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature,// 必填，签名jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的 JS 接口列表})// 或者由后端返回全部的参数 ↓↓↓// wx.config(data)}/*** 设置自定义分享配置(必须在用户可能点击分享按钮前就调用,也就是说提前设置好才行)* @description 详见文档: https://developers./doc/offiaccount/OA_Web_Apps/JS-SDK.html#111* @param {Object} appMessage - "分享给朋友/分享到QQ" 配置* @param {Object} timeLine - "分享到朋友圈/分享到QQ空间" 配置* @return void*/function wxShare(appMessage = {}, timeLine = {}) {wx.ready(() => {// "分享给朋友/分享到QQ"wx.updateAppMessageShareData(appMessage)// "分享到朋友圈/分享到QQ空间"wx.updateTimelineShareData(timeLine)})}export default {config: config,wxShare: wxShare}
五、第五步
在要自定义分享配置的页面引入tools.js文件，并注入配置信息，调用
<template><div><h1>微信开发者工具中打开进行测试</h1></div></template><script>// 注意路径！！！import $tools from '@/assets/tools.js'export default {data() {return {// 分享标题、描述、图标等数据(根据您的需求自定义即可)info: {title: '自定义标题',desc: '自定义描述',cover: 'https://xxxxxxx/xxxxx.png',// ...}}},mounted() {// 一键开启页面分享功能this.getConfig()},methods: {/*** 获取配置信息(尽量在mounted()钩子中执行)* @description 拿到后端数据后,传入封装好的函数中进行验证* @return void*/getConfig() {// 请自行替换接口请求方式与地址！！this.$http(`XXXX`).then(res => {// console.log('配置信息', res.data)// 1: 注入并验证信息$tools.config(res.data)// 2: 调用分享功能this.setShare()})},/*** 获取配置信息(尽量在mounted()钩子中执行)* @description 拿到后端数据后,传入封装好的函数中进行验证* @return void*/setShare() {// 分享标题、描述、图标等数据(根据您的需求自定义即可)const data = this.info;// "分享给朋友/分享到QQ"const appMessage = {title: data.title, //分享标题desc: data.desc, //分享描述link: location.href, //分享链接,默认当前页面(必须对应JS安全域名)imgUrl: data.cover, //分享图标success: () => {//调用成功// alert('成功')},fail: (err) => {//调用失败alert(JSON.stringify(err))}}// "分享到朋友圈/分享到QQ空间"const timeLine = {title: data.title, //分享标题link: location.href, //分享链接,默认当前页面(必须对应JS安全域名)imgUrl: data.cover, //分享图标success: () => {//调用成功// alert('成功')},fail: (err) => {//调用失败alert(JSON.stringify(err))}}// 丢入自动设置$tools.wxShare(appMessage, timeLine)},}}</script><style scoped></style>
遇到的坑
确保公众号有权限确认传入config的后端接口参数近期微信做出了调整，必须在公众号底部菜单栏打开才能正常分享，显示自定义的卡片信息
微信外部链接内容管理规范具
5.再调后端接口拿验证信息的时候，后端可能会需要你传一个url，
一定要是当前网页的url，不让有可能分享失败
encodeURIComponent(location.href.split('#')[0])
如果分享以后，发现小卡片上的链接不是config注入的配置中如ink链接，并且又是在公众号配置过的安全域名，那么可以让后端/运维给你一个转发地址，通过找个转发地址跳转到你想要去的页面
